From 0c79ee445ca62339f9df9dc6aefebb8f09b30f4d Mon Sep 17 00:00:00 2001
From: Andres <andres99.dev@gmail.com>
Date: Tue, 12 Jul 2022 16:23:38 +0200
Subject: [PATCH] hw9 styles and logic

---
 src/s2-homeworks/hw09/Clock.module.css | 29 ++++++++++
 src/s2-homeworks/hw09/Clock.tsx        | 74 +++++++++++++++-----------
 src/s2-homeworks/hw09/HW9.tsx          |  8 +--
 3 files changed, 77 insertions(+), 34 deletions(-)
 create mode 100644 src/s2-homeworks/hw09/Clock.module.css

diff --git a/src/s2-homeworks/hw09/Clock.module.css b/src/s2-homeworks/hw09/Clock.module.css
new file mode 100644
index 0000000..bdc2fb9
--- /dev/null
+++ b/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%;
+}
\ No newline at end of file
diff --git a/src/s2-homeworks/hw09/Clock.tsx b/src/s2-homeworks/hw09/Clock.tsx
index f63190e..a8a6241 100644
--- a/src/s2-homeworks/hw09/Clock.tsx
+++ b/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>
     )
 }
diff --git a/src/s2-homeworks/hw09/HW9.tsx b/src/s2-homeworks/hw09/HW9.tsx
index 0397cb6..f597255 100644
--- a/src/s2-homeworks/hw09/HW9.tsx
+++ b/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>
     )
 }