Создайте простое и красивое приложение с таймером обратного отсчета

Крупнейшая распродажа года, известная как Распродажа Черной пятницы, только что закончилась, и вы могли получить сотни писем с таймером обратного отсчета для покупки любого курса на udemy, Pluralsight и т. Д. Или покупки любой подписки на ограниченный временной период.

В этой статье мы фактически создадим настоящее приложение таймера обратного отсчета, как показано на основном изображении выше.

Итак, приступим!

  1. Создайте новое приложение React, используя
 create-react-app countdown_timer

Если у вас не установлен create-react-app, установите его с помощью

npm install create-react-app -g

2. Теперь откройте каталог countdown_timer в вашей любимой среде IDE, например в Visual Studio Code.

3. Удалите все файлы из папки src, кроме index.js.

4. Добавьте следующее содержание в index.js

5. Мы будем использовать react-bootstrap для базовой стилизации CSS. Мы также будем писать наш собственный CSS.

6. Перейдите в каталог countdown_timer из терминала и установите пакеты.

npm install [email protected] [email protected]

7. Обратите внимание, что react-bootstrap также требуется bootstrap для базового CSS, поэтому мы добавили и его

8. Теперь ваш package.json будет иметь раздел зависимостей, как показано ниже.

9. Для выбора даты и времени воспользуемся библиотекой react-datetime-picker. Он очень прост в использовании и к тому же очень мощный. Вы можете установить все поля даты и времени, просто используя клавиши со стрелками на клавиатуре при выборе даты.

Вы можете найти все доступные параметры и документацию по нему на https://www.npmjs.com/package/react-datetime-picker

10. Чтобы установить пакет react-datetime-picker

npm install [email protected]

11. Создайте два новых файла в src папке с именами Timer.js и styles.css.

12. Добавьте следующее содержание в styles.css

13. Добавьте следующее содержание в Timer.js

14. Теперь запустите приложение, выполнив команду npm start с терминала.

15. Давайте разберемся, что происходит в Timer.js

  • В метод render мы добавили форму для выбора конечной даты и кнопку для запуска таймера
  • Ниже мы отображаем секцию таймера обратного отсчета.
  • Когда мы нажимаем кнопку “Begin Countdown”, мы вызываем функцию calculateCountdown, которая берет текущую дату и время и дату окончания и определяет разницу между двумя датами.

  • Внутри метода calculateCountdown для метода setState мы обновляем дни, часы, минуты и секунды с помощью вычисленных значений, и после обновления состояния мы снова вызываем функцию calculateCountdown после задержки в 1 секунду (1000 мс), используя setTimeout
  • Всегда рекомендуется удалять все добавленные обработчики событий и очищать тайм-аут или интервал в компоненте после размонтирования компонента, что мы делаем в componentWillUnmount методе.

И вот так! Мы создали простое и красивое приложение с таймером обратного отсчета.

Исходный код Github: https://github.com/myogeshchavan97/countdown_timer

Живая демонстрация: https://codesandbox.io/s/hopeful-sea-2l3ls

На сегодня все. Надеюсь, вы многому научились при создании этого приложения.

Не забудьте подписаться, чтобы получать мою еженедельную рассылку с замечательными советами, приемами и статьями прямо в свой почтовый ящик здесь.