HW20 lsd done

homework20/my-app/src/App.js

@@ -157,29 +157,28 @@ const SecondsTimer = ({seconds}) => <h2>{seconds}</h2>;
 
 const TimerContainer = ({seconds, refresh, render}) => {
 const Render = render;
-const [count, setCount] = useState(1800);
+const [count, setCount] = useState(300);
 
 
-useEffect(
-  () => {
 
-    var firstState = Date.now()
-    var secCounter;
-      var interval = setInterval(() => {
-          secCounter = seconds - (Math.floor((Date.now()/1000) - firstState/1000));
-          setCount(seconds - (Math.floor((Date.now()/1000) - firstState/1000)));
-          if (secCounter < 0) {
-            setCount(0)
-            clearInterval(interval)
-          }
+useEffect(() => {
+  var firstState = Date.now()
+  var secCounter;
 
-      
-      }
-      , refresh);
+  var interval = setInterval(() => {
 
-      
-  }, []
-)
+    secCounter = seconds - (Math.floor((Date.now()/1000) - firstState/1000));
+    
+    setCount(secCounter);
+
+    if (secCounter < 0) {
+      setCount(0)
+      return clearInterval(interval)
+    }
+
+  }, refresh);
+
+}, []);
 
 
   return (
@@ -189,6 +188,28 @@ useEffect(
   )
 }
 
+const Timer2 = ({seconds}) => {
+  var h = Math.floor(seconds / 3600);
+  var m = Math.floor(seconds % 3600 / 60);
+  var s = Math.floor(seconds % 3600 % 60);
+
+
+
+
+  return (
+    <>
+      <h3>Timer {`${h}: ${m}: ${s}`}</h3>
+
+        <button onClick = {() =>  {
+
+
+          
+        }}>Start/pause</button>
+    </>
+  )
+}
+
+
 const App = () => {
   
   return (
@@ -230,6 +251,12 @@ const App = () => {
         <h3>Timer Container</h3>
         <TimerContainer seconds={1800} refresh={100} render={SecondsTimer}/>
       </div>
+
+
+      <div id = "LSD">
+        <h3>LSD</h3>
+        <TimerContainer seconds={300} refresh={100} render={Timer2}/>
+      </div>
     </>
 
 

homework20/my-app/src/index.css

@@ -72,3 +72,13 @@ code {
   justify-content: center;
   align-items: center;
 }
+
+#LSD {
+  width: 40%;
+  background-color: rgb(36, 214, 60);
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}