rpolevach/webclock

Webclock

Часы были сделаны с помощью технологий CSS и HTML. Идея заключается в том, чтобы каждую секунду передвигать стрелку на определенный угол. К примеру, угол для передвижения секундной стрелки мы получаем из текущей даты методом getUTCSeconds() и делим полученное значение на 60 и, далее, умножаем на 360, добавляя полученное значение в CSS стиль transform - rotate.

Сами по себе часы показывают всегда время по UTC. Чтобы получить время, которое подходит определенному часовому поясу, мы берем сдвиг по UTC и прибавляем к часам, которые получены методом getUTCHours().

Для выбора городов был разработан обыкновенный dropdown-список. Данный список открывается по нажатию на него и закрывается, когда пользователь нажмет на него или на какое-то место, которое не будет принадлежать компоненту списка (для этого был написал отдельный хук useOutsideDetecter).

Для того, чтобы получить json файл по сети, была использована библиотека json-server, которая запускается вместе с основным приложением. Для осуществления сетевых запросов была использована библиотека axios, так как это очень удобная библиотека, позволяющая написать запрос с использованием минимально возможного количества кода. Также, при получении данных выводится небольшой лоадер, который указывает пользователю, что идет загрузка данных с сервера.

Для основного приложения были использованы React и Redux. При успешнои запросе на сервер, данные сохраняются в Redux и, далее, каждый компонент получает эти данные с помощью хука useSelector, в противном случае пользователь должен увидеть ошибку.

Для сборки проекта был использован Webpack. Была настроена работа новых стандартов языка с помощью Babel, сборка всех CSS файлов в один и подключение стилей к единому HTML файлу с помощью плагина html-webpack-plugin.