diff --git a/src/index.css b/src/index.css index 8dd5ed4..9144ae3 100644 --- a/src/index.css +++ b/src/index.css @@ -20,24 +20,3 @@ code { monospace; } -[data-theme='1'] { - - --background: #FFFFFF; - --color: #000000; -} - -[data-theme='2'] { - --color: #000000; - --background: #DDEEFF; -} - -[data-theme='3'] { - --color: #FFFFFF; - --background: #212A34; - -} - -html { - background-color: var(--background); - color: var(--color); -} diff --git a/src/s1-main/App.tsx b/src/s1-main/App.tsx index 65eae4e..9e8b29e 100644 --- a/src/s1-main/App.tsx +++ b/src/s1-main/App.tsx @@ -7,17 +7,8 @@ import HW4 from '../s2-homeworks/hw04/HW4' import HW5 from '../s2-homeworks/hw05/HW5' function App() { - // для дз 12 - // const themeId = useSelector((state: any) => state.theme.themeId) - // useEffect(() => { - // document.documentElement.dataset.theme = themeId - // }, [themeId]) - return ( -
+
{/**/} {/*раскомментировать по ходу выполнения*/} {/**/} diff --git a/src/s2-homeworks/hw05/pages/JuniorPlus.tsx b/src/s2-homeworks/hw05/pages/JuniorPlus.tsx index f98ef58..c998994 100644 --- a/src/s2-homeworks/hw05/pages/JuniorPlus.tsx +++ b/src/s2-homeworks/hw05/pages/JuniorPlus.tsx @@ -1,7 +1,7 @@ import React from 'react' import HW10 from '../../hw10/HW10' import HW11 from '../../hw11/HW11' -// import HW12 from '../../hw12/HW12' +import HW12 from '../../hw12/HW12' // import HW13 from '../../hw13/HW13' function JuniorPlus() { @@ -9,7 +9,7 @@ function JuniorPlus() {
- {/**/} + {/**/}
) diff --git a/src/s2-homeworks/hw09/Clock.tsx b/src/s2-homeworks/hw09/Clock.tsx index d962da5..a249ef4 100644 --- a/src/s2-homeworks/hw09/Clock.tsx +++ b/src/s2-homeworks/hw09/Clock.tsx @@ -33,8 +33,8 @@ function Clock() { setShow(false) } - const stringTime = date.toLocaleTimeString() ||
// часы24:минуты:секунды (01:02:03)/(23:02:03)/(24:00:00)/(00:00:01) // пишут студенты - const stringDate = date.toLocaleDateString() ||
// день.месяц.год (01.02.2022) // пишут студенты, варианты 01.02.0123/01.02.-123/01.02.12345 не рассматриваем + const stringTime = date.toLocaleTimeString('ru-Ru') ||
// часы24:минуты:секунды (01:02:03)/(23:02:03)/(24:00:00)/(00:00:01) // пишут студенты + const stringDate = date.toLocaleDateString('ru-Ru') ||
// день.месяц.год (01.02.2022) // пишут студенты, варианты 01.02.0123/01.02.-123/01.02.12345 не рассматриваем // день недели на английском, месяц на английском (https://learn.javascript.ru/intl#intl-datetimeformat) const stringDay = new Intl.DateTimeFormat('en-US', {weekday: 'long'}).format(date) ||
// пишут студенты diff --git a/src/s2-homeworks/hw10/bll/store.ts b/src/s2-homeworks/hw10/bll/store.ts index 5f1fed0..0462e58 100644 --- a/src/s2-homeworks/hw10/bll/store.ts +++ b/src/s2-homeworks/hw10/bll/store.ts @@ -1,10 +1,10 @@ import { loadingReducer } from './loadingReducer' import { combineReducers, legacy_createStore } from 'redux' -// import { themeReducer } from '../../hw12/bll/themeReducer' +import { themeReducer } from '../../hw12/bll/themeReducer' const reducers = combineReducers({ loading: loadingReducer, // hw10 - // theme: themeReducer, // hw12 + theme: themeReducer, // hw12 }) const store = legacy_createStore(reducers) diff --git a/src/s2-homeworks/hw12/HW12.module.css b/src/s2-homeworks/hw12/HW12.module.css index b24cae1..05ae3a1 100644 --- a/src/s2-homeworks/hw12/HW12.module.css +++ b/src/s2-homeworks/hw12/HW12.module.css @@ -1,23 +1,23 @@ -.dark { - background: dimgrey; +[data-theme='1'] { + --color: #000000; + --background: #FFFFFF; } -.dark-text { - color: aliceblue; +[data-theme='2'] { + --color: #000000; + --background: #DDEEFF; } -.red { - background: lightcoral; +[data-theme='3'] { + --color: #FFFFFF; + --background: #212A34; } -.red-text { - color: aqua; +html { + background-color: var(--background); + color: var(--color); } -.some { - background: lightgreen; -} +.select { -.some-text { - color: darkslateblue; } diff --git a/src/s2-homeworks/hw12/HW12.tsx b/src/s2-homeworks/hw12/HW12.tsx index 22427c2..35c59f4 100644 --- a/src/s2-homeworks/hw12/HW12.tsx +++ b/src/s2-homeworks/hw12/HW12.tsx @@ -1,33 +1,47 @@ -import React from 'react' +import React, {useEffect} from 'react' import s from './HW12.module.css' import s2 from '../../s1-main/App.module.css' import SuperSelect from '../hw07/common/c5-SuperSelect/SuperSelect' -import { useDispatch, useSelector } from 'react-redux' -import { changeThemeId } from './bll/themeReducer' +import {useDispatch, useSelector} from 'react-redux' +import {changeThemeId} from './bll/themeReducer' + +/* +* 1 - в файле themeReducer.ts написать нужные типы вместо any, дописать редьюсер +* 2 - получить themeId из редакса +* 3 - дописать тип и логику функции change +* 4 - передать пропсы в SuperSelect +* */ const themes = [ - { id: 1, value: 'light' }, - { id: 2, value: 'blue' }, - { id: 3, value: 'dark' }, + {id: 1, value: 'light'}, + {id: 2, value: 'blue'}, + {id: 3, value: 'dark'}, ] const HW12 = () => { + // взять ид темы из редакса const themeId = useSelector((state: any) => state.theme.themeId) - const theme = themes.find((t) => t.id === themeId)!.value - const dispatch = useDispatch() - const change = (id: number) => { + + const change = (id: any) => { // дописать функцию dispatch(changeThemeId(id)) } + useEffect(() => { + document.documentElement.dataset.theme = themeId + '' + }, [themeId]) + return (
Homework #12
+
{ - // fix any +export const themeReducer = (state = initState, action: any): any => { // fix any switch (action.type) { + // дописать case 'SET_THEME_ID': { return { ...state,