HW20 timer

homework20/my-app/src/App.js

@@ -1,4 +1,4 @@
-import React, { Component, useState } from 'react'
+import React, { Component, useState, useRef } from 'react'
 import './App.css'
 // import Header from './components/Header';
 // import Navbar from './components/Navbar';
@@ -70,6 +70,49 @@ const PasswordConfirm = ({min}) => {
 }
 
 
+const Timer = ({sec}) => {
+  var h = Math.floor(sec / 3600);
+  var m = Math.floor(sec % 3600 / 60);
+  var s = Math.floor(sec % 3600 % 60);
+  const [count,  changeCount] = useState(`${h}: ${m}: ${s}`);
+  const [lock, closer] = useState(true);
+
+  const [onOff, turning] = useState(false);
+
+  const countRef = useRef(onOff);
+
+
+  return (
+    <>
+      <h3>Timer {count}</h3>
+
+        <button onClick = {() =>  {
+
+          turning(!onOff);
+          countRef.current = onOff;
+      
+          lock && (() => {
+             setInterval((() => {
+                if(sec && countRef.current == false) {
+                  sec -=1;
+                  h = Math.floor(sec / 3600);
+                  m = Math.floor(sec % 3600 / 60);
+                  s = Math.floor(sec % 3600 % 60);
+                  changeCount(`${h}: ${m}: ${s}`);
+                } else {
+                  return
+                }
+             }), 1000);
+          })();
+
+          closer(false);
+          
+        }}>Start/pause</button>
+    </>
+  )
+}
+
+
 const App = () => {
   
   return (
@@ -90,15 +133,18 @@ const App = () => {
 
       </div>
 
-    <div id = "rangeInput">
-      <h2>Range Input</h2>
-        <RangeInput min={2} max={10} />
-    </div>
+      <div id = "rangeInput">
+        <h2>Range Input</h2>
+          <RangeInput min={2} max={10} />
+      </div>
 
-    <div id = "passwordConfirm">
-      <PasswordConfirm min = {3}  />
-    </div>
+      <div id = "passwordConfirm">
+        <PasswordConfirm min = {3}  />
+      </div>
 
+      <div id = "timer">
+        <Timer sec = {3600}/>
+      </div>
     </>
 
 

homework20/my-app/src/index.css

@@ -12,7 +12,7 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 20px;
+  padding: 3px;
   background-color: aqua;
 }
 
@@ -42,3 +42,12 @@ code {
   justify-content: center;
   align-items: center;
 }
+#timer {
+  width: 40%;
+  background-color: rgb(214, 36, 104);
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}