diff --git a/catch-rate-calc/src/app.js b/catch-rate-calc/src/app.js index 6526f88a92e976d18363ae15421027c834904d58..52bf3307cf0c1a445216e1d574153273d68fcc01 100644 --- a/catch-rate-calc/src/app.js +++ b/catch-rate-calc/src/app.js @@ -7,7 +7,7 @@ export function App() { return ( <> <Route exact path={'/'}> - <CatchRateCalc label={'Taps'} /> + <CatchRateCalc label={'RateCalc'} /> </Route> </> ); diff --git a/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.css b/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.css new file mode 100644 index 0000000000000000000000000000000000000000..6b0017158109c1168081139dd4bc31b5b7555307 --- /dev/null +++ b/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.css @@ -0,0 +1,34 @@ +body { + background-color: powderblue; +} +h2 { + text-align: center; + display: block; +} +.rate { + margin: auto; + width: 85%; + border: 3px solid green; + padding: 25px; +} +.stats { + margin: auto; + width: 75%; + border: 3px solid green; + padding: 10px; +} +.ball { + margin: auto; + width: 75%; + border: 3px solid red; + padding: 10px; +} +.status { + margin: auto; + width: 75%; + border: 3px solid blue; + padding: 10px; +} +p { + color: red; +} diff --git a/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.js b/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.js index d7d928f778f60821ae6129c49ca141fd54274312..4e158d14024a8f1c14e5c34d00210fa0b2a27f36 100644 --- a/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.js +++ b/catch-rate-calc/src/features/catchRateCalc/catchRateCalc.js @@ -1,15 +1,38 @@ import React from 'react'; +import styles from './catchRateCalc.css'; export function CatchRateCalc() { return ( <main> - <div class="level"> - <label id="level">Enter the Pokemon's Level:</label> - <input type="number" id="level" name="level"></input> + + <h2>Gen6 Pokemon Catch Rate Calculator</h2> + + <div class="rate"> + <label for="rate">Enter the Pokemon's Modified Catch Rate:</label> + <input type="number" size= "3" id="rate" name="rate"></input> + </div> + + <div class="stats"> + <div class="level"> + <label for="level">Enter the Pokemon's Level:</label> + <input type="number" size="3" name="level" id="level" value="35"></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> <div class="ball"> - <label id="ball">Ball:</label> + <label for="ball">Ball:</label> <select name="ball"> <option value="1">Poke Ball</option> @@ -21,27 +44,10 @@ export function CatchRateCalc() { </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"> + <select name="status"> <option value="1">None</option> <option value="1.5">Poisoned</option> <option value="1.5">Burned</option> @@ -51,7 +57,6 @@ export function CatchRateCalc() { </select> </div> - </main > ); } \ No newline at end of file