Checkpoint 3. Added basic HTML

catch-rate-calc/src/features/catchRateCalc/catchRateCalc.js

@@ -3,7 +3,55 @@ import React from 'react';
 export function CatchRateCalc() {
   return (
     <main>
-      [placeholder text]
+      <div class="level">
+        <label id="level">Enter the Pokemon's Level:</label>
+        <input type="number" id="level" name="level"></input>
+      </div>
+
+      <div class="ball">
+        <label id="ball">Ball:</label>
+
+        <select name="ball">
+          <option value="1">Poke Ball</option>
+          <option value="1.5">Great Ball</option>
+          <option value="2">Ultra Ball</option>
+          <option value="999">Master Ball</option>
+          <option value="1+.3">Timer Ball</option>
+          <option value="4">Quick Ball</option>
+        </select>
+      </div>
+
+      <div class="rate">
+        <label for="rate">Enter the Pokemon's Modified Catch Rate:</label>
+        <input type="number" id="rate" name="rate"></input>
+      </div>
+
+      <div class="hp">
+        <label for="hp">HP Approximation (1% to 100%)</label>
+        <div class="slidecontainer">
+          <input type="range" min="1" max="100" value="50" class="slider" id="myRange"></input>
+        </div>
+      </div>
+
+      <div class="falseSwipe">
+        <label for="falseSwipe">False Swipe (exactly 1 HP):</label>
+        <input type="checkbox" id="falseSwipe" value="1"></input>
+      </div>
+
+      <div class="status">
+        <label for="status">Status:</label>
+
+        <select name="ball">
+          <option value="1">None</option>
+          <option value="1.5">Poisoned</option>
+          <option value="1.5">Burned</option>
+          <option value="2">Asleep</option>
+          <option value="1.5">Paralyzed</option>
+          <option value="2">Frozen</option>
+        </select>
+      </div>
+
+
     </main >
   );
 }
\ No newline at end of file