Этот проект был создан при помощи Parcel. Для знакомства и настройки дополнительных возможностей обратись к документации.
Создан репозиторий goit-js-hw-08.
При сдаче домашней работы есть две ссылки: на исходные файлы и рабочую страницу на GitHub Pages.
При посещении живой страницы задания, в консоли нету ошибок и предупреждений.
Проект собран с помощью parcel-project-template.
Код отформатирован Prettier.
Стартовые файлы с готовой разметкой, стилями и подключенными файлами скриптов для каждого задания заменены в src parcel-project-template.
Выполняй это задание в файлах 01-gallery.html и 01-gallery.js. Разбей его на несколько подзадач:
Добавь библиотеку SimpleLightbox как зависимость проекта используя npm (ссылка на CDN из твоей прошлой работы больше не нужна).
Используй свой JavaScript код из предыдущей домашней работы, но выполни рефакторинг с учетом того, что библиотека была установлена через npm (синтаксис import/export).
Для того чтобы подключить CSS код библиотеки в проект, необходимо добавить еще один импорт, кроме того который описан в документации.
// Описан в документации
import SimpleLightbox from "simplelightbox";
// Дополнительный импорт стилей
import "simplelightbox/dist/simple-lightbox.min.css";В HTML есть <iframe> с видео для Vimeo плеера. Напиши скрипт который будет сохранять текущее время воспроизведения видео в локальное хранилище и, при перезагрузке страницы, продолжать воспроизводить видео с этого времени.
<iframe
id="vimeo-player"
src="https://player.vimeo.com/video/236203659"
width="640"
height="360"
frameborder="0"
allowfullscreen
allow="autoplay; encrypted-media"
></iframe>Выполняй это задание в файлах 02-video.html и 02-video.js. Разбей его на несколько подзадач:
Ознакомься с документацией библиотеки Vimeo плеера.
Добавь библиотеку как зависимость проекта через npm.
Инициализируй плеер в файле скрипта как это описано в секции pre-existing player, но учти что у тебя плеер добавлен как npm пакет, а не через CDN.
Разбери документацию метода on() и начни отслеживать событие timeupdate - обновление времени воспроизведения.
Сохраняй время воспроизведения в локальное хранилище. Пусть ключом для хранилища будет строка "videoplayer-current-time".
При перезагрузке страницы воспользуйся методом setCurrentTime() для того чтобы возобновить воспроизведение с сохраненной позиции.
Добавь в проект бибилотеку lodash.throttle и сделай так, чтобы время воспроизведения обновлялось в хранилище не чаще чем раз в секунду.
В HTML есть разметка формы. Напиши скрипт который будет сохранять значения полей в локальное хранилище когда пользователь что-то печатает.
<form class="feedback-form" autocomplete="off">
<label>
Email
<input type="email" name="email" autofocus />
</label>
<label>
Message
<textarea name="message" rows="8"></textarea>
</label>
<button type="submit">Submit</button>
</form>Выполняй это задание в файлах 03-feedback.html и 03-feedback.js. Разбей его на несколько подзадач:
Отслеживай на форме событие input, и каждый раз записывай в локальное хранилище объект с полями email и message, в которых сохраняй текущие значения полей формы. Пусть ключом для хранилища будет строка "feedback-form-state".
При загрузке страницы проверяй состояние хранилища, и если там есть сохраненные данные, заполняй ими поля формы. В противном случае поля должны быть пустыми.
При сабмите формы очищай хранилище и поля формы, а также выводи объект с полями email, message и текущими их значениями в консоль.
Сделай так, чтобы хранилище обновлялось не чаще чем раз в 500 миллисекунд. Для этого добавь в проект и используй библиотеку lodash.throttle