HW20 timerContainer done

homework20/my-app/src/App.js

@@ -1,4 +1,5 @@
-import React, { Component, useState, useRef } from 'react'
+import userEvent from '@testing-library/user-event'
+import React, { Component, useState, useRef, useEffect } from 'react'
 import './App.css'
 // import Header from './components/Header';
 // import Navbar from './components/Navbar';
@@ -151,6 +152,43 @@ const TimerControl = ({}) => {
   )
 }
 
+
+const SecondsTimer = ({seconds}) => <h2>{seconds}</h2>;
+
+const TimerContainer = ({seconds, refresh, render}) => {
+const Render = render;
+const [count, setCount] = useState(1800);
+
+
+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)
+          }
+
+      
+      }
+      , refresh);
+
+      
+  }, []
+)
+
+
+  return (
+    <>
+    <Render seconds = {count}/>
+    </>
+  )
+}
+
 const App = () => {
   
   return (
@@ -186,6 +224,12 @@ const App = () => {
       <div id = "timerControl">
         <TimerControl/>
       </div>
+
+
+      <div id = "timerContainer">
+        <h3>Timer Container</h3>
+        <TimerContainer seconds={1800} refresh={100} render={SecondsTimer}/>
+      </div>
     </>
 
 

homework20/my-app/src/index.css

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