https://kras-pomodoroclock.netlify.app/
Этот pet-проект представляет собой реализацию таймера Pomodoro, разработанную с использованием фреймворка React.js. Проект создан с целью изучения и закрепления основ React.js, включая работу с компонентами, состоянием, эффектами, контекстом, а также интеграцию сторонних библиотек и использование современных возможностей SCSS для стилизации и анимации.
- React.js: Основной фреймворк для построения пользовательского интерфейса.
- React Context API: Для управления состоянием темы, таймера и языка.
- SCSS: Для стилизации компонентов и анимаций.
- React Icons: Для использования иконок в интерфейсе.
- HTML5 Notifications API: Для реализации браузерных уведомлений.
-
Клонируйте репозиторий:
git clone https://github.com/andrew-kras/pomodoro-react.gi
-
Перейдите в директорию проекта:
cd pomodoro-react
-
Установите зависимости:
npm install
-
Запустите проект:
npm start
- Запуск и остановка таймера: Используйте кнопку "Start" для запуска таймера и "Pause" для его остановки.
- Сброс таймера: Кнопка "Reset" сбрасывает таймер до начального значения.
- Переключение режима: Кнопка "Switch to Work/Break" позволяет переключаться между режимами работы и перерыва.
- Настройки: Кликните на иконку настроек в правом верхнем углу для изменения длительности сессий, включения/выключения уведомлений и переключения языка.
- Переключение темы: Кликните на иконку темы в левом верхнем углу для переключения между светлой и темной темами.
Создано для изучения React.js. Автор: Andrew Kras