Checkpoint 4. Added CSS

catch-rate-calc/src/app.js

@@ -7,7 +7,7 @@ export function App() {
   return (
     <>
       <Route exact path={'/'}>
-        <CatchRateCalc label={'Taps'} />
+        <CatchRateCalc label={'RateCalc'} />
       </Route>
     </>
   );

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

+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;
+}

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

 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>
-      </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>
+      <h2>Gen6 Pokemon Catch Rate Calculator</h2>
 
       <div class="rate">
         <label for="rate">Enter the Pokemon's Modified Catch Rate:</label>
-        <input type="number" id="rate" name="rate"></input>
+        <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">
@@ -37,11 +29,25 @@ export function CatchRateCalc() {
           <label for="falseSwipe">False Swipe (exactly 1 HP):</label>
           <input type="checkbox" id="falseSwipe" value="1"></input>
         </div>
+      </div>
+
+      <div class="ball">
+        <label for="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="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