https://github.com/yuriyvyatkin/ra-hw-6.1-clocks

ДЗ №1 к лекции «Жизненный цикл и работа с HTTP» курса «React» Нетологии
https://github.com/yuriyvyatkin/ra-hw-6.1-clocks

lifecyclemethods reactjs svg timezone-conversion

Last synced: 8 months ago
JSON representation

ДЗ №1 к лекции «Жизненный цикл и работа с HTTP» курса «React» Нетологии

• Host: GitHub
• URL: https://github.com/yuriyvyatkin/ra-hw-6.1-clocks
• Owner: yuriyvyatkin
• Created: 2021-11-16T08:34:38.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-11-24T06:50:18.000Z (almost 4 years ago)
• Last Synced: 2025-01-04T01:38:57.275Z (10 months ago)
• Topics: lifecyclemethods, reactjs, svg, timezone-conversion
• Language: JavaScript
• Homepage: https://yuriyvyatkin.github.io/ra-hw-6.1-clocks
• Size: 382 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Домашнее задание №1 к лекции «Жизненный цикл и работа с HTTP»

[![Build status](https://ci.appveyor.com/api/projects/status/ry17yo7qyrhwulkn?svg=true)](https://ci.appveyor.com/project/yuriyvyatkin/ra-hw-6-1-clocks)

[Ссылка на Github Pages](https://yuriyvyatkin.github.io/ra-hw-6.1-clocks/)

Мировые часы

===

Наверняка вы видели в офисах многих компаний, установленные часы, показывающие время в разных столицах мира:

* New York

* Moscow

* London

* Tokyo

И т.д.

![Watches](./assets/watches.png)

Общая механика:

1. Вы заполняете поля название и временная зона (указываете смещение в часах относительно Гринвича) и нажимаете кнопку "Добавить"

1. Часы автоматически добавляются и (что самое важное) часы начинают "тикать", т.е. отсчитываются секунды, минуты и часы

1. При нажатии на крестик рядом с часами часы автоматически удаляются, при этом все подписки (`setTimeout`, `setInterval` и другие) должны вычищаться в соответствующем методе жизненного цикла

Упрощения: если вам сложно реализовать механику со стрелками (через css - см. `transform` и `rotate()`), то вы можете сделать цифровые часы, где отображаются только цифры в формате: ЧЧ:ММ:СС

Подсказки:

1. Посмотреть текущий TimezoneOffset вы можете используя объект `Date`

1. Можете использовать библиотеку momentjs.