HW20 done

homework20/my-app/src/App.js

@@ -202,13 +202,93 @@ const Timer2 = ({seconds}) => {
 
         <button onClick = {() =>  {
 
-
+          
           
         }}>Start/pause</button>
     </>
   )
 }
 
+const Watches = ({seconds}) => {
+
+  var h = Math.floor(seconds / 3600) * 30;
+  var m = Math.floor(seconds % 3600 / 60) * (360 / 60);
+  var s = Math.floor(seconds % 3600 % 60) * (360 / 60);
+
+  return (
+    <>
+      <div id = "container" style = {{position: "relative"}}>
+        <img id = "clock" src = "http://draw.asmer.fe.a-level.com.ua/ClockFace/ClockFace.png" style = {{position: "absolute", zIndex :"0"}}/>
+        <img id = "hours" src = "http://draw.asmer.fe.a-level.com.ua/ClockFace/ClockFace_H.png" style = {{position: "absolute", zIndex :"1", transform: `rotate(${h}deg)`}}/>
+        <img id = "minutes" src = "http://draw.asmer.fe.a-level.com.ua/ClockFace/ClockFace_M.png" style = {{position: "absolute", zIndex :"2", transform: `rotate(${m}deg)`}}/>
+        <img id = "secunds" src = "http://draw.asmer.fe.a-level.com.ua/ClockFace/ClockFace_S.png"style = {{position: "absolute", zIndex :"3", transform: `rotate(${s}deg)`}}/>
+      </div>
+    </>
+  )
+}
+
+
+
+const TimerContainerControl = ({refresh, render}) => {
+  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 [msc, letsCount] = useState("0");
+  const Render = render;
+
+
+  const checkNumbers = (newVal, confirmVal) => {
+    return (confirmVal.includes(".") || newVal.includes(".") || newVal < 0  || +confirmVal < 0 || +newVal > 60  || +confirmVal > 60) ? turnOnOff(false) : turnOnOff(true);
+  }
+  
+  useEffect(() => {
+    if (!countDownSown) {
+      return clearInterval(interval)
+
+    }
+    var firstState = Date.now()
+    var secCounter;
+  
+    var interval = setInterval(() => {
+      
+      secCounter =  msc + (Math.floor((Date.now()/1000) - firstState/1000));
+      letsCount(secCounter);
+
+      
+    }, refresh);
+  
+  }, [countDownSown]);
+
+  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);
+          letsCount(((+hours * 60 * 60) + (+minutes * 60) + +sec))
+        }}>Start/pause</button>
+        <div id = "timer">
+          { countDownSown && <Render seconds={msc} /> }
+        </div>
+      </div>
+
+
+      
+    </>
+    
+  )
+}
 
 const App = () => {
   
@@ -240,8 +320,6 @@ const App = () => {
       </div>
 
 
-
-
       <div id = "timerControl">
         <TimerControl/>
       </div>
@@ -257,6 +335,11 @@ const App = () => {
         <h3>LSD</h3>
         <TimerContainer seconds={300} refresh={100} render={Timer2}/>
       </div>
+
+      <div id = "Watches">
+        <h3>Watches + containerControl</h3>
+        <TimerContainerControl refresh={100} render={Watches}/>
+      </div>
     </>
 
 

homework20/my-app/src/index.css

@@ -81,4 +81,14 @@ code {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+}
+
+#Watches {
+  width: 40%;
+  background-color: rgb(54, 36, 214);
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }