https://github.com/yuriipohorilets/goit-js-hw-08

📚 JS-HW-08 | Project infrastructure. Storage
https://github.com/yuriipohorilets/goit-js-hw-08

goit javascript npm storage

Last synced: about 2 months ago
JSON representation

📚 JS-HW-08 | Project infrastructure. Storage

• Host: GitHub
• URL: https://github.com/yuriipohorilets/goit-js-hw-08
• Owner: YuriiPohorilets
• Created: 2022-08-19T17:13:49.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-10-06T11:09:17.000Z (about 2 years ago)
• Last Synced: 2023-03-07T13:40:48.396Z (almost 2 years ago)
• Topics: goit, javascript, npm, storage
• Language: JavaScript
• Homepage: https://yuriipohorilets.github.io/goit-js-hw-08/
• Size: 1.4 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Инфраструктура проектов. Веб-хранилище | goit-js-hw-08

## Критерии приема

- Создан репозиторий `goit-js-hw-08`.

- При сдаче домашней работы есть две ссылки: на исходные файлы и рабочую

  страницу на `GitHub Pages`.

- При посещении живой страницы задания, в консоли нету ошибок и предупреждений.

- Проект собран с помощью

  [parcel-project-template](https://github.com/goitacademy/parcel-project-template).

- Код отформатирован `Prettier`.

## Стартовые файлы

[Скачай стартовые файлы](https://downgit.github.io/#/home?url=https:%2F%2Fgithub.com%2Fgoitacademy%2Fjavascript-homework%2Ftree%2Fmain%2Fv2%2F08%2Fsrc)

с готовой разметкой, стилями и подключенными файлами скриптов для каждого

задания. Скопируй их себе в проект, полностью заменив папку `src` в

[parcel-project-template](https://github.com/goitacademy/parcel-project-template).

### Задание 1 - библиотека `SimpleLightbox`

Выполняй это задание в файлах `01-gallery.html` и `01-gallery.js`. Разбей его на

несколько подзадач:

1. Добавь библиотеку [SimpleLightbox](https://simplelightbox.com/) как

   зависимость проекта используя `npm` (ссылка на CDN из твоей прошлой работы

   больше не нужна).

2. Используй свой JavaScript код из предыдущей домашней работы, но выполни

   рефакторинг с учетом того, что библиотека была установлена через `npm`

   (синтаксис import/export).

Для того чтобы подключить CSS код библиотеки в проект, необходимо добавить еще

один импорт, кроме того который описан в документации.

```

// Описан в документации 

import SimpleLightbox from "simplelightbox"; 

// Дополнительный импорт стилей import

"simplelightbox/dist/simple-lightbox.min.css";

```

### Задание 2 - видео плеер

В HTML есть `` с видео для Vimeo плеера. Напиши

скрипт который будет сохранять текущее время воспроизведения видео в локальное

хранилище и, при перезагрузке страницы, продолжать воспроизводить видео с этого

времени.

```

```

Выполняй это задание в файлах `02-video.html` и `02-video.js`. Разбей его на

несколько подзадач:

1. Ознакомься с

   [документацией](https://github.com/vimeo/player.js/#vimeo-player-api)

   библиотеки Vimeo плеера.

2. Добавь библиотеку как зависимость проекта через `npm`.

3. Инициализируй плеер в файле скрипта как это описано в секции

   [pre-existing player](https://github.com/vimeo/player.js/#pre-existing-player),

   но учти что у тебя плеер добавлен как npm пакет, а не через CDN.

4. Разбери документацию метода

   [on()](https://github.com/vimeo/player.js/#onevent-string-callback-function-void)

   и начни отслеживать событие

   [timeupdate](https://github.com/vimeo/player.js/#events) - обновление времени

   воспроизведения.

5. Сохраняй время воспроизведения в локальное хранилище. Пусть ключом для

   хранилища будет строка `"videoplayer-current-time"`.

6. При перезагрузке страницы воспользуйся методом

   [setCurrentTime()](https://github.com/vimeo/player.js/#setcurrenttimeseconds-number-promisenumber-rangeerrorerror)

   для того чтобы возобновить воспроизведение с сохраненной позиции.

7. Добавь в проект бибилотеку

   [lodash.throttle](https://www.npmjs.com/package/lodash.throttle) и сделай

   так, чтобы время воспроизведения обновлялось в хранилище не чаще чем раз в

   секунду.

### Задание 3 - форма обратной связи

В HTML есть разметка формы. Напиши скрипт который будет сохранять значения полей

в локальное хранилище когда пользователь что-то печатает.

```

  

    Email

    

  

  

    Message

    

  

  Submit

```

Выполняй это задание в файлах `03-feedback.html` и `03-feedback.js`. Разбей его

на несколько подзадач:

1. Отслеживай на форме событие `input`, и каждый раз записывай в локальное

   хранилище объект с полями `email` и `message`, в которых сохраняй текущие

   значения полей формы. Пусть ключом для хранилища будет строка

   `"feedback-form-state"`.

2. При загрузке страницы проверяй состояние хранилища, и если там есть

   сохраненные данные, заполняй ими поля формы. В противном случае поля должны

   быть пустыми.

3. При сабмите формы очищай хранилище и поля формы, а также выводи объект с

   полями `email`, `message` и текущими их значениями в консоль.

4. Сделай так, чтобы хранилище обновлялось не чаще чем раз в 500 миллисекунд.

   Для этого добавь в проект и используй библиотеку

   [lodash.throttle](https://www.npmjs.com/package/lodash.throttle).