hw9

src/s2-homeworks/hw05/pages/Junior.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import HW6 from '../../hw06/HW6'
 import HW7 from '../../hw07/HW7'
 import HW8 from '../../hw08/HW8'
+import HW9 from '../../hw09/HW9'
 
 function Junior() {
     return (
@@ -10,7 +11,7 @@ function Junior() {
             <HW6/>
             <HW7/>
             <HW8/>
-            {/*<HW9/>*/}
+            <HW9/>
         </div>
     )
 }

src/s2-homeworks/hw09/Clock.tsx

@@ -0,0 +1,81 @@
+import React, {useState} from 'react'
+import SuperButton from '../hw04/common/c2-SuperButton/SuperButton'
+import {restoreState} from '../hw06/localStorage/localStorage'
+
+function Clock() {
+    const [timerId, setTimerId] = useState<number | undefined>(undefined)
+    const [date, setDate] = useState<Date>(new Date(restoreState('hw9-date', 0))) // for autotests
+    const [show, setShow] = useState<boolean>(false)
+
+    const stop = () => { // пишут студенты
+        if (timerId) {
+            clearInterval(timerId)
+            setTimerId(undefined)
+        }
+    }
+    const start = () => { // пишут студенты
+        const id: number = +setInterval(() => {
+            setDate(new Date())
+        }, 1000)
+        setTimerId(id)
+    }
+
+    const onMouseEnter = () => {
+        setShow(true)
+    }
+    const onMouseLeave = () => {
+        setShow(false)
+    }
+
+    // логику напишет Андрей :)                                                                     // |v| видел такое в реальных часах |v|
+    const stringTime = date?.toLocaleTimeString() || <br/> // часы24:минуты:секунды (01:02:03)/(23:02:03)/(24:00:00)/(00:00:01) // пишут студенты
+    const stringDate = date?.toLocaleDateString() || <br/> // день.месяц.год (01.02.2022) // пишут студенты, варианты 01.02.0123/01.02.-123/01.02.12345 не рассматриваем
+    // день недели на английском, месяц на английском
+    const stringDay = 'Monday' || <br/> // пишут студенты
+    const stringMonth = 'May' || <br/> // пишут студенты
+
+    return (
+        <div>
+            <div
+                id={'hw9-watch'}
+                onMouseEnter={onMouseEnter}
+                onMouseLeave={onMouseLeave}
+            >
+                <div id={'hw9-day'}>{stringDay}</div>
+                <div id={'hw9-time'}>{stringTime}</div>
+            </div>
+
+            <div id={'hw9-more'}>
+                {show ? (
+                    <>
+                        <div id={'hw9-month'}>{stringMonth}</div>
+                        <div id={'hw9-date'}>{stringDate}</div>
+                    </>
+                ) : (
+                    <>
+                        <br/>
+                        <br/>
+                    </>
+                )}
+            </div>
+
+
+            <SuperButton
+                id={'hw9-button-start'}
+                disabled={!timerId} // пишут студенты
+                onClick={start}
+            >
+                start
+            </SuperButton>
+            <SuperButton
+                id={'hw9-button-stop'}
+                disabled={!!timerId} // пишут студенты
+                onClick={stop}
+            >
+                stop
+            </SuperButton>
+        </div>
+    )
+}
+
+export default Clock

src/s2-homeworks/hw09/HW9.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import Clock from './Clock'
+import s2 from '../../s1-main/App.module.css'
+
+const HW9 = () => {
+    return (
+        <div id={'hw9'} className={s2.hw}>
+            <hr/>
+            {/*можно убрать этот тег*/}
+
+            {/*should work (должно работать)*/}
+            <Clock/>
+
+            <hr/>
+            {/*можно убрать этот тег*/}
+            <hr/>
+            {/*можно убрать этот тег*/}
+        </div>
+    )
+}
+
+export default HW9