final ref hw9

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

@@ -2,7 +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'
+import HW9 from '../../hw09/HW9'
 
 function Junior() {
     return (
@@ -10,7 +10,7 @@ function Junior() {
             <HW6 />
             <HW7 />
             <HW8 />
-            {/*<HW9 />*/}
+            <HW9 />
         </div>
     )
 }

src/s2-homeworks/hw09/Clock.tsx

@@ -1,48 +1,44 @@
-import React, { useState } from 'react'
+import React, {useState} from 'react'
 import SuperButton from '../hw04/common/c2-SuperButton/SuperButton'
-import { restoreState } from '../hw06/localStorage/localStorage'
+import {restoreState} from '../hw06/localStorage/localStorage'
 import s from './Clock.module.css'
 
 function Clock() {
     const [timerId, setTimerId] = useState<number | undefined>(undefined)
-    const [date, setDate] = useState<Date>(
+    // for autotests // не менять // можно подсунуть в локалСторэдж нужную дату, чтоб увидеть как она отображается
-        new Date(restoreState('hw9-date', new Date()))
+    const [date, setDate] = useState<Date>(new Date(restoreState('hw9-date', Date.now())))
-    ) // for autotests
     const [show, setShow] = useState<boolean>(false)
 
-    const stop = () => {
-        // пишут студенты
-        if (timerId) {
-            clearInterval(timerId)
-            setTimerId(undefined)
-        }
-    }
     const start = () => {
-        // пишут студенты
+        // пишут студенты // запустить часы (должно отображаться реальное время, а не +1)
+        // сохранить ид таймера (https://learn.javascript.ru/settimeout-setinterval#setinterval)
         const id: number = +setInterval(() => {
             setDate(new Date())
         }, 1000)
         setTimerId(id)
     }
 
-    const onMouseEnter = () => {
+    const stop = () => {
+        // пишут студенты // поставить часы на паузу, обнулить ид таймера (timerId <- undefined)
+        if (timerId) {
+            clearInterval(timerId)
+            setTimerId(undefined)
+        }
+    }
+
+    const onMouseEnter = () => { // пишут студенты // показать дату если наведена мышка
         setShow(true)
     }
-    const onMouseLeave = () => {
+    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 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 stringDate = date?.toLocaleDateString() || <br /> // день.месяц.год (01.02.2022) // пишут студенты, варианты 01.02.0123/01.02.-123/01.02.12345 не рассматриваем
-    // день недели на английском, месяц на английском
 
-    const stringDay = new Intl.DateTimeFormat('en-US', {
+    // день недели на английском, месяц на английском (https://learn.javascript.ru/intl#intl-datetimeformat)
-        weekday: 'long',
+    const stringDay = new Intl.DateTimeFormat('en-US', {weekday: 'long'}).format(date) || <br/> // пишут студенты
-    }).format(date) || <br /> // пишут студенты
+    const stringMonth = new Intl.DateTimeFormat('en-US', {month: 'long'}).format(date) || <br/> // пишут студенты
-    const stringMonth = new Intl.DateTimeFormat('en-US', {
-        month: 'long',
-    }).format(date) || <br /> // пишут студенты
 
     return (
         <div className={s.clock}>
@@ -67,7 +63,7 @@ function Clock() {
                         </>
                     ) : (
                         <>
-                            <br />
+                            <br/>
                         </>
                     )}
                 </div>
@@ -76,14 +72,14 @@ function Clock() {
             <div className={s.buttonsContainer}>
                 <SuperButton
                     id={'hw9-button-start'}
-                    disabled={!!timerId} // пишут студенты
+                    disabled={!!timerId} // пишут студенты // задизэйблить если таймер запущен
                     onClick={start}
                 >
                     start
                 </SuperButton>
                 <SuperButton
                     id={'hw9-button-stop'}
-                    disabled={!timerId} // пишут студенты
+                    disabled={!timerId} // пишут студенты // задизэйблить если таймер не запущен
                     onClick={stop}
                 >
                     stop

src/s2-homeworks/hw09/HW9.tsx

@@ -2,12 +2,18 @@ import React from 'react'
 import Clock from './Clock'
 import s2 from '../../s1-main/App.module.css'
 
+/*
+* 1 - в файле Clock.tsx дописать функции stop, start, onMouseEnter, onMouseLeave
+* 2 - в файле Clock.tsx из переменной date вычислить значения stringTime, stringDate, stringDay, stringMonth
+* 3 - в файле Clock.tsx дизэйблить кнопки стоп / старт если таймер не запущен / запущен соответственно
+* 4 - сделать стили в соответствии с дизайном
+* */
+
 const HW9 = () => {
     return (
         <div id={'hw9'}>
             <div className={s2.hwTitle}>Homework #9</div>
 
-            {/*should work (должно работать)*/}
             <div className={s2.hw}>
                 <Clock />
             </div>