hw9 styles and logic

src/s2-homeworks/hw09/Clock.module.css

@@ -0,0 +1,29 @@
+.buttonsContainer {
+    display: flex;
+    gap: 20px;
+}
+
+.clock {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.watch {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+}
+
+.watch strong {
+    font-weight: 600;
+}
+
+.more {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 20px;
+    opacity: 50%;
+}

src/s2-homeworks/hw09/Clock.tsx

@@ -1,11 +1,12 @@
 import React, { useState } from 'react'
 import SuperButton from '../hw04/common/c2-SuperButton/SuperButton'
 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>(
-        new Date(restoreState('hw9-date', 0))
+        new Date(restoreState('hw9-date', new Date()))
     ) // for autotests
     const [show, setShow] = useState<boolean>(false)
 
@@ -35,48 +36,59 @@ function Clock() {
     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 /> // пишут студенты
+
+    const stringDay = new Intl.DateTimeFormat('en-US', {
+        weekday: 'long',
+    }).format(date) || <br /> // пишут студенты
+    const stringMonth = new Intl.DateTimeFormat('en-US', {
+        month: 'long',
+    }).format(date) || <br /> // пишут студенты
 
     return (
-        <div>
+        <div className={s.clock}>
             <div
                 id={'hw9-watch'}
+                className={s.watch}
                 onMouseEnter={onMouseEnter}
                 onMouseLeave={onMouseLeave}
             >
-                <div id={'hw9-day'}>{stringDay}</div>
-                <div id={'hw9-time'}>{stringTime}</div>
+                <span id={'hw9-day'}>{stringDay}</span>,{' '}
+                <span id={'hw9-time'}>
+                    <strong>{stringTime}</strong>
+                </span>
             </div>
 
             <div id={'hw9-more'}>
-                {show ? (
-                    <>
-                        <div id={'hw9-month'}>{stringMonth}</div>
-                        <div id={'hw9-date'}>{stringDate}</div>
-                    </>
-                ) : (
-                    <>
-                        <br />
-                        <br />
-                    </>
-                )}
+                <div className={s.more}>
+                    {show ? (
+                        <>
+                            <span id={'hw9-month'}>{stringMonth}</span>,{' '}
+                            <span id={'hw9-date'}>{stringDate}</span>
+                        </>
+                    ) : (
+                        <>
+                            <br />
+                        </>
+                    )}
+                </div>
             </div>
 
-            <SuperButton
-                id={'hw9-button-start'}
-                disabled={!!timerId} // пишут студенты
-                onClick={start}
-            >
-                start
-            </SuperButton>
-            <SuperButton
-                id={'hw9-button-stop'}
-                disabled={!timerId} // пишут студенты
-                onClick={stop}
-            >
-                stop
-            </SuperButton>
+            <div className={s.buttonsContainer}>
+                <SuperButton
+                    id={'hw9-button-start'}
+                    disabled={!!timerId} // пишут студенты
+                    onClick={start}
+                >
+                    start
+                </SuperButton>
+                <SuperButton
+                    id={'hw9-button-stop'}
+                    disabled={!timerId} // пишут студенты
+                    onClick={stop}
+                >
+                    stop
+                </SuperButton>
+            </div>
         </div>
     )
 }

src/s2-homeworks/hw09/HW9.tsx

@@ -4,11 +4,13 @@ import s2 from '../../s1-main/App.module.css'
 
 const HW9 = () => {
     return (
-        <div id={'hw9'} className={s2.hw}>
-            <div className={s2.hwTitle}>homeworks 9</div>
+        <div id={'hw9'}>
+            <div className={s2.hwTitle}>Homework #9</div>
 
             {/*should work (должно работать)*/}
-            <Clock />
+            <div className={s2.hw}>
+                <Clock />
+            </div>
         </div>
     )
 }