- Створено репозиторій
goit-advancedjs-hw-01
. - Домашня робота містить два посилання: на вихідні файли і робочу сторінку на
GitHub Pages
. - В консолі відсутні помилки і попередження під час відкриття живої сторінки завдання.
- Проект зібраний за допомогою vanilla-app-template.
- Код відформатований за допомогою
Prettier
.
- Оцінка від 0 до 100
- Два посилання: на вихідні файли і робочу сторінку на
GitHub Pages
- Прикрiплений файл репозиторію у форматi zip
Завантажуй стартові файли
з готовою розміткою, стилями та підключеними файлами скриптів для кожного
завдання. Скопіюй їх собі в проєкт, повністю замінивши папку src
у
vanilla-app-template.
Виконуй це завдання у файлах 01-gallery.html
і 01-gallery.js
. Розбий його на
декілька підзавдань:
- Додай бібліотеку SimpleLightbox як залежність
проекту, використовуючи
npm
(посилання на CDN з твоєї минулої роботи більше не потрібне). - Використовуй свій JavaScript код з станної домашньої роботи на курсi
JavaScript Fundamentals: From Basics to Advanced Concepts, але виконай
рефакторинг з урахуванням того, що бібліотека була встановлена через
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.