https://github.com/annatsepilova/goit-advancedjs-hw-01
https://github.com/annatsepilova/goit-advancedjs-hw-01
css3 html5 javascript lodashthrottle simplelightbox vimeo-player vite
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/annatsepilova/goit-advancedjs-hw-01
- Owner: AnnaTsepilova
- Created: 2023-11-05T11:47:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-07T11:18:23.000Z (over 1 year ago)
- Last Synced: 2025-01-09T21:34:59.979Z (4 months ago)
- Topics: css3, html5, javascript, lodashthrottle, simplelightbox, vimeo-player, vite
- Language: JavaScript
- Homepage: https://annatsepilova.github.io/goit-advancedjs-hw-01/
- Size: 1.89 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Критерії приймання
- В консолі відсутні помилки і попередження під час відкриття живої сторінки
завдання.
- Проект зібраний за допомогою
[vanilla-app-template](https://github.com/goitacademy/vanilla-app-template).
- Код відформатований за допомогою `Prettier`.
## Завдання 1. Бібліотека `SimpleLightbox`
Виконуй це завдання у файлах `01-gallery.html` і `01-gallery.js`. Розбий його на
декілька підзавдань:
1. Додай бібліотеку [SimpleLightbox](https://simplelightbox.com/) як залежність
проекту, використовуючи `npm` (посилання на CDN з твоєї минулої роботи більше
не потрібне).
2. Використовуй свій JavaScript код з станної домашньої роботи на курсi
JavaScript Fundamentals: From Basics to Advanced Concepts, але виконай
рефакторинг з урахуванням того, що бібліотека була встановлена через `npm`
(синтаксис import/export).
Для того щоб підключити CSS код бібліотеки в проект, необхідно додати ще один
імпорт, крім того, що описаний в документації.
```js
// Описаний в документації
import SimpleLightbox from 'simplelightbox';
// Додатковий імпорт стилів
import 'simplelightbox/dist/simple-lightbox.min.css';
```
## Завдання 2. Відеоплеєр
HTML містить `` з відео для Vimeo плеєра. Напиши скрипт, який буде
зберігати поточний час відтворення відео у локальне сховище і, після
перезавантаження сторінки, продовжувати відтворювати відео з цього часу.
```html
```
Виконуй це завдання у файлах `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 містить розмітку форми. Напиши скрипт, який буде зберігати значення полів у
локальне сховище, коли користувач щось друкує.
```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).