chek 5 commit

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

 body {
   background-color: powderblue;
 }
+.calculate {
+ align-self: center;
+}
+.flex {
+  display: flex;
+    align-items: center;
+    flex-direction: column;
+}
 h2 {
   text-align: center;
   display: block;
@@ -8,26 +16,26 @@ h2 {
 .rate {
   margin: auto;
   width: 85%;
-  border: 3px solid green;
-  padding: 25px;
+  border: .5em solid green;
+  padding: 1em;
 }
 .stats {
   margin: auto;
   width: 75%;
-  border: 3px solid green;
-  padding: 10px;
+  border: .5em solid green;
+  padding: 1em;
 }
 .ball {
   margin: auto;
   width: 75%;
-  border: 3px solid red;
-  padding: 10px;
+  border: .5em solid red;
+  padding: 1em;
 }
 .status {
   margin: auto;
   width: 75%;
-  border: 3px solid blue;
-  padding: 10px;
+  border: .5em solid blue;
+  padding: 1em;
 }
 p {
   color: red;

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

 import React from 'react';
 import styles from './catchRateCalc.css';
+import { useSelector, useDispatch } from 'react-redux';
+
+import {
+  setBallValue,
+  setStatusValue,
+  setHPValue,
+  setLevelValue,
+  setRateValue,
+  selectBall,
+  selectStatus,
+  selectHP,
+  selectLevel,
+  selectRate
+} from './catchRateCalcSlice.js';
 
 export function CatchRateCalc() {
+
+  const dispatch = useDispatch();
+  const ratePercent = 0;
+
+  const onClickBall = () => dispatch(setBallValue({
+
+  }));
+
+  const onClickFSHP = () => dispatch(setHPValue({
+
+  }));
+
+
   return (
     <main>
-
       <h2>Gen6 Pokemon Catch Rate Calculator</h2>
-
+      <div class="flex">
         <div class="rate">
           <label for="rate">Enter the Pokemon's Modified Catch Rate:</label>
           <input type="number" size="3" id="rate" name="rate"></input>
@@ -20,27 +46,25 @@ export function CatchRateCalc() {
 
           <div class="hp">
             <label for="hp">HP Approximation (1% to 100%)</label>
-          <div class="slidecontainer">
+            <div>
               <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>
+            <input type="checkbox" id="falseSwipe" onClick={onClickFSHP} 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 name="ball" onClick={onClickBall}>
+            <option ball="1">Poke Ball</option>
+            <option ball="1.5">Great Ball</option>
+            <option ball="2">Ultra Ball</option>
+            <option ball="99">Master Ball</option>
           </select>
         </div>
 
@@ -48,15 +72,17 @@ export function CatchRateCalc() {
           <label for="status">Status:</label>
 
           <select name="status">
-          <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>
+            <option status="1">None</option>
+            <option status="1.5">Poisoned</option>
+            <option status="1.5">Burned</option>
+            <option status="2">Asleep</option>
+            <option status="1.5">Paralyzed</option>
+            <option status="2">Frozen</option>
           </select>
         </div>
-
+        <button class="calculate">Calculate Catch Rate!</button>
+      </div>
+      <h2>Catch Rate: {ratePercent}</h2>
     </main>
   );
 }
\ No newline at end of file

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

+import { createSlice } from '@reduxjs/toolkit';
+
+const catchRateCalcSlice = createSlice({
+  name: 'catchRateCalc',
+  initialState: {
+    ball: 1,
+    status: 1,
+    hp: 50,
+    level: 35,
+    rate: 60
+  },
+  reducers: {
+    setBallValue: (ball, action) => {
+      const {
+        value,
+      } = action.payload;
+      ball.value = value;
+    },
+
+    setStatusValue: (status, action) => {
+      const {
+        value,
+      } = action.payload;
+      status.value = value;
+    },
+
+    setHPValue: (hp, action) => {
+      const {
+        value,
+      } = action.payload;
+      hp.value = value;
+    },
+
+    setLevelValue: (level, action) => {
+      const {
+        value,
+      } = action.payload;
+      level.value = value;
+    },
+
+    setRateValue: (rate, action) => {
+      const {
+        value,
+      } = action.payload;
+      rate.value = value;
+    }
+  },
+});
+export default catchRateCalcSlice;
+
+export const {
+  setBallValue,
+  setStatusValue,
+  setHPValue,
+  setLevelValue,
+  setRateValue
+} = catchRateCalcSlice.actions;
+
+export function selectRate(state) {
+  return state.catchRateCalc.rate;
+}
+
+export function selectBall(state) {
+  return state.catchRateCalc.ball;
+}
+
+export function selectStatus(state) {
+  return state.catchRateCalc.status;
+}
+
+export function selectHP(state) {
+  return state.catchRateCalc.hp;
+}
+
+export function selectLevel(state) {
+  return state.catchRateCalc.level;
+}
\ No newline at end of file