goit js hw 08

Lesen Sie in anderen Sprachen: Ukrainisch, Englisch.

Akzeptanzkriterien

• goit-js-hw-08 wurde erstellt.
• Hausaufgaben enthält zwei Links: auf Ausgabedateien und eine Arbeitsseite auf GitHub Pages .
• Der Konsole fehlen Fehler und Warnungen, wenn eine lebendige Seite der Aufgabe eröffnet wird.
• Das Projekt wird mit Paketprojekt-Template zusammengestellt.
• Der Code wird unter Verwendung Prettier formuliert.

Startdateien

Im SRC -Ordner finden Sie Startdateien mit ready -hergestellten Markierungen, Stilen und verbundenen Skripten für jede Aufgabe. Kopieren Sie sie in das Projekt, indem Sie den src Ordner in Paketprojekt-Template vollständig ersetzen. Laden Sie dazu das ganze Repository als Archiv herunter oder verwenden Sie den Downgit -Dienst, um einen separaten Ordner aus dem Repository herunterzuladen.

Aufgabe 1 - SimpleLightbox -Bibliothek

Vervollständigen Sie diese Aufgabe in 01-gallery.html und 01-gallery.js . Teilen Sie es in ein paar Sub -Calls auf:

1. Fügen Sie die SimplyLightbox -Bibliothek als Projektabhängigkeit mit npm hinzu (CDN -Referenzen aus Ihrer früheren Arbeiten sind nicht mehr erforderlich).
2. Verwenden Sie Ihren JavaScript -Code aus früheren Hausaufgaben, führen Sie jedoch das Reaktoring durch, da die Bibliothek über npm (Import/Exportsyntax) installiert wurde.

Um den CSS -Bibliothekscode mit dem Projekt zu verbinden, müssen Sie einen weiteren Import hinzufügen, außer wie in der Dokumentation beschrieben.

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

Aufgabe 2 - Video Pleer

HTML enthält <iframe> mit Video für Vimeo Player. Schreiben Sie ein Skript, das das Video in ein lokales Repository abspielt und nach einem Neustart einer Seite von diesem Zeitpunkt nach einer Seite Video abspielen wird.

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

Füllen Sie diese Aufgabe in 02-video.html und 02-video.js aus. Teilen Sie es in ein paar Sub -Calls auf:

1. Lassen Sie uns die Dokumentation der Vimeo -Bibliothek kennenlernen.
2. Fügen Sie die Bibliothek als Projektabhängigkeit über npm hinzu.
3. Initialisieren Sie den Player in der Skriptdatei, wie im Abschnitt REISTOSE-Player beschrieben, aber denken Sie daran, dass Sie einen Player als NPM-Paket hinzugefügt haben, nicht über CDN.
4. Studieren Sie die Dokumentation der ON -Methode () und beginnen Sie mit der Verfolgung des Zeitupdate -Ereignisses - Aktualisierung der Wiedergabezeit.
5. Halten Sie die Spielzeit in einer lokalen Lagereinrichtung. Lassen Sie den Speicherschlüssel "videoplayer-current-time" sein.
6. Verwenden Sie die Methode setCurrentime (), um die Reproduktion aus der erhaltenen Position wiederherzustellen, wenn Sie die Seite neu starten.
7. Fügen Sie das Projekt von Lodash. Throttle Biblilot hinzu und machen Sie die Verlängerungszeit nicht mehr als einmal pro Sekunde im Speicher erneuert.

Aufgabe 3 - Form des Feedbacks

HTML enthält eine Formmarkierung. Schreiben Sie ein Skript, das die Feldwerte im lokalen Speicher speichert, wenn der Benutzer etwas druckt.

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

Füllen Sie diese Aufgabe in 03-feedback.html und 03-feedback.js aus. Teilen Sie es in ein paar Sub -Calls auf:

1. Verfolgen Sie input Eingabeereignis auf dem Formular und zeichnen Sie jedes Mal das Objekt mit den email und message im lokalen Repository auf, wodurch die aktuellen Werte der Formularfelder aufbewahrt werden. Lassen Sie den Speicherschlüssel die Zeile "feedback-form-state" sein.
2. Überprüfen Sie beim Herunterladen der Seite den Status des Repositorys und füllen Sie die Felder des Formulars aus. Andernfalls sollten die Felder leer sein.
3. Während der Sub -Form werden die Form und Felder gereinigt, sowie die Konsolenausgabe mit den email , message und ihren aktuellen Werten.
4. Stellen Sie sicher, dass der Speicher nicht mehr als einmal alle 500 Millisekunden aktualisiert wird. Fügen Sie dazu das Projekt hinzu und verwenden Sie die Lodash.Throttle -Bibliothek.

---

Paketvorlage

Dieses Projekt war ein Sozdan in Parcel. Für die Markierung und Anpassung der Verankerung der Exposition, die zur Dokumentation ausgewählt werden soll.

Vorbereitung eines neuen Projekts

1. Passen Sie die computergestützte LTS-Version von node.js. Download und Institutionen, wenn dies erforderlich ist.
2. Das Glas ist Repository.
3. parcel-project-template Nash Nashmi.
4. Erstellen Sie ein neues leeres Repository auf GitHub.
5. OTKROI -Projekt in VSCODE, starten Sie das Projekt und opfern Sie das Projekt mit Github -Repositoren auf Anweisungen.
6. Institutionen des Projekts im Terminal npm install .
7. Starten Sie die Reproduktionsmodus und veröffentlichten den Befehl npm start .
8. Gehen Sie zum Browser unter http: // localhost: 1234. Dieses Diagramm wird durch den automatisch geführten Mann in den Projektdateien ersetzt.

Dateien und Ordner

• Alle Parshali -Dateistile liegen im src/sass -Papquet und werden in den Dateidateien von Seiten importiert. Zum Beispiel heißt index.html die Stildatei index.scss .
• Identifizieren Sie sich im Ordner src/images . Der Chorusianer optimiert sie, jedoch nur mit der Deploration der Projektversion des Projekts. Alles geht in den Anblick Ihres Computers, so dass es viel Zeit für die schwachen Autos sein kann.

EINSETZEN

Um das Projekt DePaza anzupassen, müssen Sie viele zusätzliche Shags auf die Einstellung Ihres Repositorys zeichnen. Kommen Sie auf Settings und wählen Sie in den Actions das General Element aus.

Schieben Sie die Handlung in die Post -Secia, in der die Opakie in der Spur auf der Spur des Bildes und des Save aufgenommen wird. Ohne diese Tunks in den Scoops wird es eine Ungültigkeit für die Automatisierung des Bereitstellungsvorgangs geben.

Die Projektversion des Projekts wird automatisch sein und auf den Github-Seiten in der gh-pages -Nass gestoppt. Die Zeit des COGD wird main aktualisiert. Zum Beispiel eine gerade Pusha oder ein Pool-blockiertes Pusha oder ein gerader Pusha. Dazu müssen Sie eine homepage und das Skript build von package.json -Datei einreichen, your_username und your_repo_name Ihren eigenen und den Namen auf GitHub senden.

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

Gehen Sie nahezu in die GitHub-Repository-Abstimmung ( Settings > Pages ) und zeichnen Sie die Produktion von Dateidatei aus dem Ordner /root der gh-pages heraus, wenn dies nicht viel automatisch ist.

Status von Depaza

Der Status eines Einsatzes eines extremen Putsy wird durch die Ikone des Ego des Yoditikators erobert.

• Die Gelbsucht - Die Sammlung und Deplese des Projekts.
• Die grüne Farbe - Der Deploi endete gründlich.
• Die rote Farbe - In der Zeit des Lines, die Schaufel oder Bereitstellung des Einsatzes.

Die schmerzhaften detaillierten Informationen über den Status können im Symbol und im Schalter der Windows -Schalter Details überschritten werden.

Live -Handlung

Aufgrund der Zeit, ein paar Flotten, lebe ich die Handlung, Sie können die in homepage angegebene Adresse köcheln lassen. Zum Beispiel lebe ich einen Mand für dieses Repository https://goitacademy.github.io/parcel-project-template.

Wenn eine Wüstenhandlung geöffnet wird, um Console des NOT -Anblicks der integrierten Packungen von CSS- und JS -Projektdateien zu töten ( 404 ). Storch All in Taby Unregelmäßige Bedeutung von homepage oder build Skript in package.json .

Wie funktioniert das?

1. Nach jedem Push wird main spezielles Skript (GitHub -Aktion) aus der Datei .github/workflows/deploy.yml gestartet.
2. Alle Dateien -Repositoren werden auf dem Server kompiliert, wo das Projekt initialisiert wird und die Ernte vor dem Abbau übergibt.
3. Wenn alle Schritte so viel vergingen, die alleinige Produktion der Projektdateiprojekte im Tierarzt gh-pages . Im gegenüberliegenden Fall wird im Logikskript im Problem angegeben.