diff --git a/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.js b/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.js index 1bc849425bc6c347e1c2229760011c93f8f5004b..d7d928f778f60821ae6129c49ca141fd54274312 100644 --- a/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.js +++ b/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.js @@ -3,7 +3,55 @@ import React from 'react'; export function CatchRateCalc() { return ( <main> - [placeholder text] - </main> + <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