goit js hw 08

Read in Other Languages: Ukrainian, English.

Acceptance criteria

• goit-js-hw-08 was created.
• Homework contains two links: on output files and a work page on GitHub Pages .
• The console lacks errors and warnings when opening a living page of the task.
• The project is assembled using Parcel-Project-Template.
• The code is formulated using Prettier .

Starting files

In the SRC folder you will find starting files with ready -made markings, styles and connected scripts for each task. Copy them into the project by completely replacing the src folder in Parcel-Project-TEMPlate. To do this, download all this repository as an archive or use the Downgit service to download a separate folder from the repository.

Task 1 - SimpleLightbox Library

Complete this task in 01-gallery.html and 01-gallery.js . Break it up into a few sub -calls:

1. Add SimplelightBox Library as a project dependence using npm (CDN references from your past work no longer required).
2. Use your JavaScript Code from previous homework, but do the reactoring, given that the library has been installed through npm (Import/Export syntax).

In order to connect the CSS library code to the project, you need to add another import, except as described in the documentation.

 // Описаний в документації
import SimpleLightbox from 'simplelightbox' ;
// Додатковий імпорт стилів
import 'simplelightbox/dist/simple-lightbox.min.css' ; 

Task 2 - Video Pleer

HTML contains <iframe> with video for Vimeo player. Write a script that will keep the video playing into a local repository and, after a page restart, continue to play video from this time.

 < iframe
  id =" vimeo-player "
  src =" https://player.vimeo.com/video/236203659 "
  width =" 640 "
  height =" 360 "
  frameborder =" 0 "
  allowfullscreen
  allow =" autoplay; encrypted-media "
> </ iframe >

Complete this task in 02-video.html and 02-video.js . Break it up into a few sub -calls:

1. Let's get acquainted with the documentation of the Vimeo Library.
2. Add the library as a project dependence through npm .
3. Initialize the player in the script file as described in the Pre-Existent Player section, but keep in mind that you have a player added as a NPM package, not through CDN.
4. Study the documentation of the on () method and start tracking the TimeUpdate event - updating the playback time.
5. Keep the play time in a local storage facility. Let the storage key be "videoplayer-current-time" .
6. Use the SetCurrentime () method to restore the reproduction from the preserved position when restarting the page.
7. Add to the Lodash.Throttle Biblilot's project and make the renewal time renewed in the storage no more than once a second.

Task 3 - Form of feedback

HTML contains form marking. Write a script that will store the field values ​​in the local storage when the user prints something.

 < 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 >

Complete this task in 03-feedback.html and 03-feedback.js . Break it up into a few sub -calls:

1. Track input event on the form, and each time record the object with the email and message fields in the local repository, which keep the current values ​​of the form fields. Let the storage key be the line "feedback-form-state" .
2. When downloading the page, check the status of the repository, and if there are stored data, fill in the fields of the form. Otherwise, the fields should be empty.
3. During the sub -form, the molding and fields are cleaned, as well as the console output with the email , message fields and their current values.
4. Make sure that the storage is updated no more than once every 500 milliseconds. To do this, add to the project and use the Lodash.throttle library.

---

Parcel Template

This project was a Sozdan at Parcel. For the marking and adjustment of the anchorage of exposure to be selected for documentation.

Preparation of a new project

1. Match the computer-reached LTS-version of Node.js. Download and institutions if it is necessary.
2. The glass is repository.
3. parcel-project-template NASH NASHMI.
4. Create a new empty repository on github.
5. Otkroi project in Vscode, start the termine and sacrifice the project with github repositors on instructions.
6. Institutions of the project in the Terminal npm install team.
7. Start the mode of reproduction, released the npm start command.
8. Go to the browser on http: // localhost: 1234. This plot will be replaced by the auto -stored man -made in the project files.

Files and folders

• All the parshali File styles lie in the src/sass Papquet and are imported in the File files of pages. For example, for index.html the style file is called index.scss .
• Identify to the src/images folder. The chorusian optimizes them, but only with the deploration of the project version of the project. Everything goes into the sight of your computer, so as it can be a lot of time on the weak cars.

DEPLOY

To adjust the project depaza, it is necessary to draw a lot of additional shags on the setting of your repository. Come on Settings tab and in the Actions Subsecations Select the General item.

Slide the plot to the post -Secia, in which the opacia is taken in the track on the trace of the image and the sake of Save . Without these tunks in the scoops, there will be unburrency for automating the process of deployed.

The project version of the project will be automatic and stopped on the Github pages, in the gh-pages Wet, the time of the cogd is updated main Wet. For example, a straight pusha or a pool-retested pusha or a straight pusha. For this, you need to file a package.json file homepage and script build , muffled your_username and your_repo_name for your own, and send the name on Github.

 "homepage" : " https://your_username.github.io/your_repo_name/ " ,
"scripts" : {
  "build" : " parcel build src/*.html --public-url /your_repo_name/ "
},

Nearly go into the github-repository tuning ( Settings > Pages ) and will draw out the production of File File from the folder /root of gh-pages , if this is not a lot of automatic.

Status of depaza

The status of a deploy of an extreme commuty is conquered by the icon of ego of the yoditicator.

• The jaundice - the collection and deplese of the project.
• The green color - the deploi ended in a thoroughly.
• The red color - in the time of lint, the scoop or deployment of the deployment.

The painful detailed information about the status can be soaked in the icon, and in the exceeding the windows switch on Details .

Live plot

Because of the time, a couple of fleets, I live the plot, you can simmer at the address indicated in homepage . For example, I live a mand for this repository https://goitacademy.github.io/parcel-project-template.

If a desert plot is opened, to kill Console tab of the nor to the sight of the incorporated packs of CSS and JS project files ( 404 ). Stork all in Taby Irregular Meaning of homepage or build script in file package.json .

How's this work

1. After every push, main special script (Github Action) from the .github/workflows/deploy.yml file is launched.
2. All files repositors are compiled on the server, where the project is initialized and passes the harvest in front of the deplo.
3. If all the steps passed so much, the sole production of the project File projects in gh-pages vet. In the opposite case, in the logic script will be given in the problem.