HW20 timerControl done

homework20/my-app/src/App.js

@@ -113,6 +113,44 @@ const Timer = ({sec}) => {
 }
 
 
+const TimerControl = ({}) => {
+  const [hours, setHours] = useState("1");
+  const [minutes, setMinutes] = useState("1");
+  const [sec, setSec] = useState("1");
+  const [buttOn, turnOnOff] = useState(true);
+  const [countDownSown, show] = useState(false);
+
+  const checkNumbers = (newVal, confirmVal) => {
+    return (confirmVal.includes(".") || newVal.includes(".") || newVal < 0  || +confirmVal < 0 || +newVal > 60  || +confirmVal > 60) ? turnOnOff(false) : turnOnOff(true);
+  }
+  
+
+  return (
+    <>
+    <h3>Timer Control</h3>
+    <div>
+      <input type = "number" id = "hours" value = {hours}  onChange={(e) => {
+        setHours(e.target.value)}}/>
+      <input type = "number" id = "minutes" value = {minutes} style = {{backgroundColor: (minutes < 0) || (minutes > 59) || minutes.includes(".")  ? 'red' : 'white' }} onChange={(e) => {
+        setMinutes(e.target.value);
+        checkNumbers(e.target.value, sec)}}/>
+      <input type = "number" id = "sec" value = {sec} style = {{backgroundColor: (sec < 0) || (sec > 59) || (sec.includes(".")) ? 'red' : 'white' }} onChange={(e) => {
+        setSec(e.target.value);
+        checkNumbers(e.target.value, minutes)}}/>
+
+        <button disabled={!buttOn}  onClick={ () => show(true) }>Start/pause</button>
+        <div id = "timer">
+          { countDownSown && <Timer sec={((+hours * 60 * 60) + (+minutes * 60) + +sec)} /> }
+        </div>
+      </div>
+
+
+      
+    </>
+    
+  )
+}
+
 const App = () => {
   
   return (
@@ -142,8 +180,11 @@ const App = () => {
         <PasswordConfirm min = {3}  />
       </div>
 
-      <div id = "timer">
-        <Timer sec = {3600}/>
+
+
+
+      <div id = "timerControl">
+        <TimerControl/>
       </div>
     </>
 

homework20/my-app/src/index.css

@@ -42,12 +42,24 @@ code {
   justify-content: center;
   align-items: center;
 }
-#timer {
+
+
+#timerControl {
   width: 40%;
-  background-color: rgb(214, 36, 104);
+  background-color: rgb(105, 100, 102);
   padding: 5px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
+
+ #timer {
+  width: 100%;
+  background-color: rgb(214, 36, 104);
+  padding: 0px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}