Практика №10. Интерактивный счётчик с изменением темы

Общее описание

В рамках этого задания вам необходимо создать одностраничное веб-приложение с интерактивным счётчиком и возможностью смены темы.

Оно обязано быть сделано при помощи React (vite), следовать правильному неймингу и иметь правильную структуру.

Задание обязано быть опубликовано в новом приватном репозитории организации GitHub с названием Группа_Фамилия_task-10.

Ресурсы

Заготовка проекта react-project.
(Материалы/Заготовки под практики/react-project.zip)

Техническое задание

  1. Создайте новый компонент который реализует интерактивный счётчик со следующими параметрами:
    • min
    • max
    • initial (по умолчанию должен стать min если не указано)
  2. Отобразите текущее значение счётчика в элементе и добавьте компонент в App (с заданными значениями).
    • min = 0
    • max = 10
    • initial = 5
  3. Под значением разместите три кнопки в одном контейнере:
    • Кнопка «Уменьшить»
    • Кнопка «Сбросить»
    • Кнопка «Увеличить»
  4. Реализуйте логику:
    • При нажатии «Уменьшить» значение уменьшается на 1, но не ниже min.
    • При нажатии «Увеличить» значение увеличивается на 1, но не выше max.
    • При нажатии «Сбросить» значение возвращается к initial.
  5. Кнопки должны автоматически отключаться при достижении границ:
    • Если текущее значение равно min, кнопка «Уменьшить» имеет атрибут disabled.
    • Если текущее значение равно max, кнопка «Увеличить» имеет атрибут disabled.
  6. Все изменения должны отображаться мгновенно без перезагрузки страницы.
  7. Используйте только встроенные средства React (хуки useState и JSX). Запрещено использовать innerHTML, сторонние библиотеки или глобальные переменные вне компонента.
  8. Значения не должны сохраняться между сессиями.

Дополнительная часть

Реализуйте переключение между светлой и тёмной темой:

  • Добавьте кнопку «Сменить тему» как отдельный компонент.
  • При первом запуске приложение использует светлую тему.
  • При нажатии на кнопку тема переключается: светлая ↔ тёмная.
  • В тёмной теме фон страницы — тёмно-серый (#121212), текст — белый (#ffffff).
  • В светлой теме фон — белый (#ffffff), текст — чёрный (#000000).
  • Состояние темы должно восстанавливаться при перезагрузке страницы даже после перезагрузки браузера.
  • Помимо фона, оно должно влиять и на компоненты счётчика и саму кнопку переключения.

Время на выполнение

На выполнение выделяется 3 практических пары.
Градация баллов после дедлайна:

  • 1 пара: 50%
  • 2 пара: 25%
  • 3 пара: 10%

Баллы

Статус выполнения Количество баллов
Не сдано -8
Сдано 3-6
Дополнительное задание +3