Momentum

Демо ►

Momentum - аналог одноимённого приложения интернет-магазина Chrome. Приложение показывает время и имя пользователя. Фоновое изображение и приветствие меняются в зависимости от времени суток.

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

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

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

1.Часы и календарь. При изменении дня недели, даты, месяца эти данные меняются в приложении

2.Приветствие. Текст приветствия меняется в зависимости от времени суток (утро, день, вечер, ночь). Пользователь может ввести своё имя, при перезагрузке страницы приложения имя пользователя сохраняется

3.Смена фонового изображения. Изображения можно перелистывать кликами по стрелкам, расположенными по бокам экрана, при смене слайдов обеспечивается плавная смена фоновых изображений

4.Виджет погоды. Город по умолчанию - Астана, пока пользователь не ввёл другой город. При перезагрузке страницы приложения указанный пользователем город сохраняется. Для указанного пользователем населённого пункта выводятся данные о погоде, которое возвращает API.

5.Виджет цитата дня. При загрузке страницы приложения отображается рандомная цитата и её автор. В качестве источника цитаты используется JSON-файл с цитатами и их авторами. API с цитатами не отличаются надёжностью и долговечностью, используемый в качестве источника цитат собственный JSON-файл гарантирует работоспособность приложения. Запросы к JSON также осуществляются асинхронно. При перезагрузке страницы цитата обновляется (заменяется на другую). Есть кнопка, при клике по которой цитата обновляется (заменяется на другую)

6.Аудиоплеер. Трек, который в данный момент проигрывается, в блоке Play-list выделяется стилем. После окончания проигрывания первого трека, автоматически запускается проигрывание следующего. Треки проигрываются по кругу: после последнего снова проигрывается первый. Плейлист генерируется средствами JavaScript