#1commit

package.json

@@ -18,7 +18,10 @@
     "url": "https://github.com/goitacademy/parcel-project-template/issues"
   },
   "dependencies": {
-    "modern-normalize": "^1.1.0"
+    "@vimeo/player": "^2.20.1",
+    "lodash.throttle": "^4.1.1",
+    "modern-normalize": "^1.1.0",
+    "simplelightbox": "^2.14.1"
   },
   "devDependencies": {
     "@parcel/transformer-sass": "^2.6.0",

src/css/01-gallery.css

@@ -15,6 +15,7 @@
 }
 
 .gallery__item {
+  list-style: none;
   position: relative;
   box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
     0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);

src/js/01-gallery.js

@@ -1,5 +1,21 @@
-// Add imports above this line
 import { galleryItems } from './gallery-items';
-// Change code below this line
 
-console.log(galleryItems);
+import SimpleLightbox from 'simplelightbox';
+
+import 'simplelightbox/dist/simple-lightbox.min.css';
+
+const galleryBox = document.querySelector('.gallery');
+
+const markup = galleryItems.map(
+  ({ preview, original, description }) => `<li class="gallery__item">
+    <a class="gallery__link" href="${original}">
+       <img class="gallery__image" src="${preview}" alt="${description}" />
+    </a>
+ </li>`
+);
+galleryBox.insertAdjacentHTML('beforeend', markup.join(''));
+
+const lightbox = new SimpleLightbox('.gallery a', {
+  captionsData: 'alt',
+  captionDelay: 250,
+});

src/js/02-video.js

@@ -1 +1,28 @@
+import Player from '@vimeo/player';
 
+import throttle from 'lodash.throttle';
+
+const iframe = document.getElementById('vimeo-player'); 
+const player = new Player(iframe);// создаем функцию прототипом которой есть ф-я Плеер
+
+player.on(
+  'timeupdate',
+  throttle(a => {
+    localStorage.setItem('videoplayer-current-time', a.seconds);
+  }, 1000)
+);
+
+let currentTime = localStorage.getItem('videoplayer-current-time');
+
+player
+  .setCurrentTime(currentTime)
+  .then(function (seconds) {})
+  .catch(function (error) {
+    switch (error.name) {
+      case 'RangeError':
+        break;
+
+      default:
+        break;
+    }
+  });

src/js/03-feedback.js

@@ -1 +1,37 @@
+import throttle from 'lodash.throttle';
 
+//1.refs
+const formEl = document.querySelector('.feedback-form');
+const inputEl = document.querySelector('input[name="email"]');
+const messageEl = document.querySelector('textarea[name="message"]');
+
+
+formEl.addEventListener('input', throttle(onInput, 500));
+
+function onInput() {
+  const storageObject = { email: inputEl.value, message: messageEl.value };
+
+  localStorage.setItem('feedback-form-state', JSON.stringify(storageObject));
+}
+
+formEl.addEventListener('submit', evt => {
+  evt.preventDefault();
+  console.log(JSON.parse(localStorage.getItem('feedback-form-state')));
+  localStorage.clear();
+  evt.target.reset();
+});
+
+const load = key => {
+  try {
+    const serializedState = localStorage.getItem(key);
+    return serializedState === null ? undefined : JSON.parse(serializedState);
+  } catch (error) {
+    console.error('Get state error: ', error.message);
+  }
+};
+
+const storageData = load('feedback-form-state');
+if (storageData) {
+  inputEl.value = storageData.email;
+  messageEl.value = storageData.message;
+}