Тренажер CSS

Реализуйте тренажер для заучивания CSS свойств.

Продумайте структуру хранения вопросов в коде JavaScript. Создайте массив объектов, где каждый объект содержит описание CSS свойства и правильное название свойства. Вручную заполните массив 15-20 вопросами по CSS свойствам. Все данные должны храниться в коде JavaScript.

Основные возможности проекта

Вывод описания CSS свойства.
Инпут для ввода названия свойства.
Проверка ответа с красной подсветкой при ошибке.
Вопросы в случайном порядке.
Обратный отсчет времени на прохождение.
Запоминание выученных свойств в localStorage.
Кнопка сброса прогресса.

Главная страница

На странице должны быть размещены:

Описание CSS свойства.
Инпут для ввода названия свойства.
Кнопка "Проверить".
Таймер обратного отсчета.
Прогресс (сколько вопросов пройдено из общего количества).

Вопросы

Вопросы выводятся в случайном порядке. При правильном ответе вопрос считается выученным и сохраняется в localStorage. При следующем запуске выученные вопросы не показываются. Если ответ неправильный, граница инпута загорается красным цветом. После этого пользователь может попробовать снова.

Таймер

При начале прохождения запускается таймер обратного отсчета. Время на прохождение - 60 секунд. Таймер отображается на странице. По истечении времени, если пользователь не успел ответить на все вопросы, тренажер считается проваленным и предлагает начать заново.

Запоминание выученных свойств

Выученные свойства сохраняются в локальном хранилище браузера (localStorage). При повторном запуске эти свойства исключаются из списка вопросов.

Сброс прогресса

На странице должна быть кнопка "Сбросить прогресс". При нажатии на нее все сохраненные выученные свойства очищаются с подтверждением действия.

Завершение

Когда все вопросы пройдены правильно, тренажер поздравляет пользователя и предлагает начать заново.

Дополнительные возможности

Подсказка (первая буква свойства).
Звуковой сигнал при правильном/неправильном ответе.