Skip to content

andrew-kras/pomodoro-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Pomodoro Timer App

https://kras-pomodoroclock.netlify.app/

Описание

Этот pet-проект представляет собой реализацию таймера Pomodoro, разработанную с использованием фреймворка React.js. Проект создан с целью изучения и закрепления основ React.js, включая работу с компонентами, состоянием, эффектами, контекстом, а также интеграцию сторонних библиотек и использование современных возможностей SCSS для стилизации и анимации.

Технологии

  • React.js: Основной фреймворк для построения пользовательского интерфейса.
  • React Context API: Для управления состоянием темы, таймера и языка.
  • SCSS: Для стилизации компонентов и анимаций.
  • React Icons: Для использования иконок в интерфейсе.
  • HTML5 Notifications API: Для реализации браузерных уведомлений.

Установка и запуск

  1. Клонируйте репозиторий:

    git clone https://github.com/andrew-kras/pomodoro-react.gi
  2. Перейдите в директорию проекта:

    cd pomodoro-react
  3. Установите зависимости:

    npm install
  4. Запустите проект:

    npm start

Как использовать

  1. Запуск и остановка таймера: Используйте кнопку "Start" для запуска таймера и "Pause" для его остановки.
  2. Сброс таймера: Кнопка "Reset" сбрасывает таймер до начального значения.
  3. Переключение режима: Кнопка "Switch to Work/Break" позволяет переключаться между режимами работы и перерыва.
  4. Настройки: Кликните на иконку настроек в правом верхнем углу для изменения длительности сессий, включения/выключения уведомлений и переключения языка.
  5. Переключение темы: Кликните на иконку темы в левом верхнем углу для переключения между светлой и темной темами.

Скриншоты

Main Interface Settings

Автор

Создано для изучения React.js. Автор: Andrew Kras

About

My mini app with pomodoro clock for learning react.js.

Resources

Stars

Watchers

Forks