insane-idea / momentum

Momentum

Watch deploy

Momentum - аналог одноимённого приложения интернет-магазина Chrome. Приложение показывает время и имя пользователя. Фоновое изображение и приветствие меняются в зависимости от времени суток.
В приложении есть часы, слайдер изображений, виджеты погоды, аудиоплеер, блок цитата дня, настройки. Для хранения имени пользователя и населённого пункта используется локальное хранилище - local storage.

Ключевые навыки:

• методы поиска элементов;
• вывод данных на страницу;
• работа с датой и временем;
• работа с аудио;
• сохранение данных в local storage;
• использование рекурсивного setTimeout;
• деление js-кода на модули;
• работа с асинхронными запросами.

Функционал приложения

1. Часы и календарь
   • время выводится в 24-часовом формате, например: 21:01:00
   • время обновляется каждую секунду - часы идут. Когда меняется одна из цифр, остальные при этом не меняют своё положение на странице (время не дёргается)
   • выводится день недели, число, месяц, например: "Воскресенье, 16 мая" / "Sunday, May 16" / "Нядзеля, 16 траўня" Язык и формат вывода даты определяется языком приложения.
   • при изменении дня недели, даты, месяца эти данные меняются в приложении
2. Приветствие
   • текст приветствия меняется в зависимости от времени суток (утро, день, вечер, ночь)
     • с 6:00 до 11:59 - Good morning / Доброе утро / Добрай раніцы
     • с 12:00 до 17:59 - Good afternoon / Добрый день / Добры дзень
     • с 18:00 до 23:59 - Good evening / Добрый вечер / Добры вечар
     • с 00:00 до 5:59 - Good night / Доброй/Спокойной ночи / Дабранач
   • при изменении времени суток, если в это время приложение открыто, меняется текст приветствия
   • пользователь может ввести своё имя. При перезагрузке страницы приложения имя пользователя сохраняется, данные о нём хранятся в local storage
3. Смена фонового изображения
   • при загрузке или перезагрузке приложения фоновое изображение выбирается из расположенной на GitHub коллекции изображений. Скачать картинки на компьютер и использовать локальные файлы нельзя.
   • ссылка на фоновое изображение формируется с учётом времени суток и случайного номера изображения (от 01 до 20)
   • изображения можно перелистывать кликами по стрелкам, расположенным по бокам экрана.
   • изображения перелистываются последовательно - после 18 изображения идёт 19 (клик по правой стрелке), перед 18 изображением идёт 17 (клик по левой стрелке)
   • изображения перелистываются по кругу: после двадцатого изображения идёт первое (клик по правой стрелке), перед 1 изображением идёт 20 (клик по левой стрелке)
   • при смене слайдов важно обеспечить плавную смену фоновых изображений. Не должно быть состояний, когда пользователь видит частично загрузившееся изображение или страницу без фонового изображения. Плавную смену фоновых изображений не проверяем: 1) при загрузке и перезагрузке страницы 2) при открытой консоли браузера 3) при слишком частых кликах по стрелкам для смены изображения
4. Виджет погоды
   • город по умолчанию - Минск, пока пользователь не ввёл другой город
   • при перезагрузке страницы приложения указанный пользователем город сохраняется, данные о нём хранятся в local storage
   • для указанного пользователем населённого пункта выводятся данные о погоде, если их возвращает API
   • данные о погоде включают в себя: иконку погоды, описание погоды, температуру в °C, скорость ветра в м/с, относительную влажность воздуха в %. Числовые параметры погоды округляются до целых чисел
   • выводится уведомление об ошибке при вводе некорректных значений, для которых API не возвращает погоду (пустая строка или бессмысленный набор символов)
5. Виджет цитата дня
   • при загрузке страницы приложения отображается рандомная цитата и её автор В качестве источника цитаты можно использовать как API, так и созданный вами или найденный в интернете JSON-файл с цитатами и их авторами. API с цитатами не отличаются надёжностью и долговечностью, используемый в качестве источника цитат собственный JSON-файл гарантирует работоспособность вашего приложения. Запросы к JSON также осуществляются асинхронно, таким образом необходимые знания о работе с асинхронными запросами вы получите
   • при перезагрузке страницы цитата обновляется (заменяется на другую). Есть кнопка, при клике по которой цитата обновляется (заменяется на другую)
6. Аудиоплеер
   • при клике по кнопке Play/Pause проигрывается первый трек из блока play-list, иконка кнопки меняется на Pause
   • при клике по кнопке Play/Pause во время проигрывания трека, останавливается проигрывание трека, иконка кнопки меняется на Play
   • треки можно пролистывать кнопками Play-next и Play-prev
   • треки пролистываются по кругу - после последнего идёт первый (клик по кнопке Play-next), перед первым - последний (клик по кнопке Play-prev)
   • трек, который в данный момент проигрывается, в блоке Play-list выделяется стилем
   • после окончания проигрывания первого трека, автоматически запускается проигрывание следующего. Треки проигрываются по кругу: после последнего снова проигрывается первый.
   • плейлист генерируется средствами JavaScript
7. Продвинутый аудиоплеер (реализуется без использования библиотек)
   • примерные внешний вид и функциональность плеера https://howlerplayer.github.io/
   • добавлен прогресс-бар в котором отображается прогресс проигрывания
   • при перемещении ползунка прогресс-бара меняется текущее время воспроизведения трека
   • над прогресс-баром отображается название трека
   • отображается текущее и общее время воспроизведения трека
   • есть кнопка звука при клике по которой можно включить/отключить звук
   • добавлен регулятор громкости, при перемещении ползунка регулятора громкости меняется громкость проигрывания звука
   • можно запустить и остановить проигрывания трека кликом по кнопке Play/Pause рядом с ним в плейлисте
8. Перевод приложения на два языка (en/ru или en/be)
   • переводится язык и меняется формат отображения даты
   • переводится приветствие и placeholder
   • переводится прогноз погоды в т.ч описание погоды (OpenWeatherMap API предоставляет такую возможность) и город по умолчанию
   • переводится цитата дня (используйте подходящий для этой цели API, возвращающий цитаты на нужном языке или создайте с этой целью JSON-файл с цитатами на двух языках)
   • не переводятся данные, которые вводит пользователь: имя, город, тег для получения фонового изображения от API
9. Получение фонового изображения от API Пункт считается выполненным, если фоновые изображения, полученные от API, отвечают требованиям к фоновым изображениям, указанным в пункте 3: их можно перелистывать кликами по стрелкам, обеспечивается плавная смена фоновых изображений, ссылка на фоновое изображение формируется с учётом времени суток, если пользователь не указал другие теги для их получения. Не проверяем и не реализуем последовательное перелистывание изображений и перелистывание изображений по кругу.
   • в качестве источника изображений может использоваться Unsplash API
   • в качестве источника изображений может использоваться Flickr API