goit js hw 09
1.0.0
Lesen Sie in anderen Sprachen: Ukrainisch, Englisch.
goit-js-hw-09 Repository wurde erstellt.GitHub Pages .Prettier formuliert. 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.
Füllen Sie diese Aufgabe in 01-color-switcher.html und 01-color-switcher.js aus. Siehe die Demo-Video des Schalters.
HTML enthält "Start" und "Stop" -Tasten.
< button type =" button " data-start > Start </ button >
< button type =" button " data-stop > Stop </ button > Schreiben Sie ein Skript, das die Farbe des Hintergrunds <body> mit dem Inline -Stil auf einen zufälligen Wert ändert, nachdem Sie auf die Schaltfläche Start geklickt haben. Wenn Sie auf die Schaltfläche "Stop" klicken, wird die Farbe des Hintergrunds angehalten.
Euen Denken Sie daran, dass Sie auf der Startschaltfläche eine endlose Anzahl von Male klicken können. Stellen Sie sicher, dass die Änderung gestartet wird, der Startknopf inaktiv.
Verwenden Sie getRandomHexColor , um zufällige Farbe zu erzeugen.
function getRandomHexColor ( ) {
return `# ${ Math . floor ( Math . random ( ) * 16777215 ) . toString ( 16 ) } ` ;
} Füllen Sie diese Aufgabe in Dateien 02-timer.html und 02-timer.js aus. Schreiben Sie ein Timer -Skript, das die Anzahl auf ein bestimmtes Datum überprüft. Ein solcher Timer kann in Blogs und Online -Geschäften, Event -Registrierungsseiten, Wartung und vielem mehr verwendet werden. Siehe die Demo-Video des Timers.
HTML enthält einen ready -hergestellten Timer, die Feldauswahlfelder und eine Schaltfläche, auf die der Timer starten soll. Fügen Sie die minimale Schnittstelle hinzu.
< input type =" text " id =" datetime-picker " />
< button type =" button " data-start > Start </ button >
< div class =" timer " >
< div class =" field " >
< span class =" value " data-days > 00 </ span >
< span class =" label " > Days </ span >
</ div >
< div class =" field " >
< span class =" value " data-hours > 00 </ span >
< span class =" label " > Hours </ span >
</ div >
< div class =" field " >
< span class =" value " data-minutes > 00 </ span >
< span class =" label " > Minutes </ span >
</ div >
< div class =" field " >
< span class =" value " data-seconds > 00 </ span >
< span class =" label " > Seconds </ span >
</ div >
</ div >flatpickr -BibliothekVerwenden Sie die FlatPickr -Bibliothek, damit der Benutzer das Enddatum und die Uhrzeit in einem Schnittstellenelement auswählen kann. 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 flatpickr from 'flatpickr' ;
// Додатковий імпорт стилів
import 'flatpickr/dist/flatpickr.min.css' ; Die Bibliothek erwartet, dass sie im input[type="text"] initialisiert wird. Daher haben wir dem Feld HTML input#datetime-picker hinzugefügt.
< input type =" text " id =" datetime-picker " /> Das zweite Argument von flatpickr(selector, options) kann ein optionales Parameterobjekt übertragen. Wir haben für Sie ein Objekt vorbereitet, das benötigt wird, um die Aufgabe zu erledigen. Verstehen Sie, was jede Eigenschaft in der Optionsdokumentation verantwortlich ist, und verwenden Sie sie in Ihrem Code.
const options = {
enableTime : true ,
time_24hr : true ,
defaultDate : new Date ( ) ,
minuteIncrement : 1 ,
onClose ( selectedDates ) {
console . log ( selectedDates [ 0 ] ) ;
} ,
} ; onClose() -Methode des Parameterobjekts wird jedes Mal aufgerufen, wenn die Schnittstelle, die flatpickr erstellt, geschlossen wird. Es ist erforderlich, das vom Benutzer ausgewählte Datum zu verarbeiten. Der Parameter aus selectedDates ist ein Array ausgewählter Daten, daher nehmen wir das erste Element ein.
window.alert() mit dem Text "Please choose a date in the future" . Wenn Sie auf das Skript "Start" klicken, sollte einmal eine Sekunde berechnet werden, wie viel Zeit am angegebenen Datum überlassen ist, und die Timer -Schnittstelle aktualisieren, wobei vier Ziffern: Tage, Stunden, Minuten und Sekunde in xx:xx:xx:xx angezeigt werden.
00:00:00:00 :Wir werden nicht komplizieren. Wenn der Timer ausgeführt wird, um ein neues Datum auszuwählen und neu zu starten, müssen Sie die Seite neu starten.
Verwenden Sie zur Berechnung der Werte die Fertigfunktion convertMs , wobei ms die Differenz zwischen dem endgültigen und dem aktuellen Datum in Millisekunden ist.
function convertMs ( ms ) {
// Number of milliseconds per unit of time
const second = 1000 ;
const minute = second * 60 ;
const hour = minute * 60 ;
const day = hour * 24 ;
// Remaining days
const days = Math . floor ( ms / day ) ;
// Remaining hours
const hours = Math . floor ( ( ms % day ) / hour ) ;
// Remaining minutes
const minutes = Math . floor ( ( ( ms % day ) % hour ) / minute ) ;
// Remaining seconds
const seconds = Math . floor ( ( ( ( ms % day ) % hour ) % minute ) / second ) ;
return { days , hours , minutes , seconds } ;
}
console . log ( convertMs ( 2000 ) ) ; // {days: 0, hours: 0, minutes: 0, seconds: 2}
console . log ( convertMs ( 140000 ) ) ; // {days: 0, hours: 0, minutes: 2, seconds: 20}
console . log ( convertMs ( 24140000 ) ) ; // {days: 0, hours: 6 minutes: 42, seconds: 20} convertMs() gibt ein Objekt mit einer berechneten Zeit bis zum letzten Datum zurück. Bitte beachten Sie, dass es das Ergebnis nicht formatiert. Das heißt, wenn es 4 Minuten oder eine andere Zeitkomponente der Zeit gibt, wird die Funktion 4 und nicht 04 zurückgegeben. In der Timer -Schnittstelle müssen Sie 0 hinzufügen, wenn es weniger als zwei Zeichen gibt. Schreiben Sie die addLeadingZero(value) -Funktion, die padStart() verwendet und den Wert vor dem Rendering formatieren.
Euen Die folgende Funktionalität ist für die Aufgabe nicht erforderlich, ist aber eine gute zusätzliche Praxis.
DD Zeigt Nachrichten an den Benutzer anstelle von window.alert() an, verwenden Sie die Notiflix -Bibliothek.
Füllen Sie diese Aufgabe in 03-promises.html und 03-promises.js ab. Siehe die Demo-Video des Arbeitsgenerators.
HTML enthält eine Markierung des Formulars, in dem der Benutzer die erste Verzögerung in Millisekunden eingibt, ein Schritt zur Erhöhung der Verzögerung für jeden Cutter nach dem ersten und die Anzahl der zu erzeugenden Maßnahmen.
< form class =" form " >
< label >
First delay (ms)
< input type =" number " name =" delay " required />
</ label >
< label >
Delay step (ms)
< input type =" number " name =" step " required />
</ label >
< label >
Amount
< input type =" number " name =" amount " required />
</ label >
< button type =" submit " > Create promises </ button >
</ form > Schreiben Sie ein Skript, das zum Zeitpunkt der Form der Form die Funktion createPromise(position, delay) so oft wie im Feld amount verursacht. Übergeben Sie während jedes Anrufs position und die Verzögerung, wenn die erste Verzögerung ( delay ) vom Benutzer und Schritt ( step ) eingegeben wurde.
function createPromise ( position , delay ) {
const shouldResolve = Math . random ( ) > 0.3 ;
if ( shouldResolve ) {
// Fulfill
} else {
// Reject
}
} Ergänzen Sie den Funktionscode createPromise , damit er nach delay einen Schnitt oder eine Ablehnung zurückgibt. Der Wert der Seite muss ein Objekt sein, in dem position und die delay mit Werten derselben Parameter. Verwenden Sie den ursprünglichen Funktionscode, um auszuwählen, was Sie mit der Bestrafung durchführen müssen - führen Sie aus oder lehnen sie aus.
createPromise ( 2 , 1500 )
. then ( ( { position , delay } ) => {
console . log ( `✅ Fulfilled promise ${ position } in ${ delay } ms` ) ;
} )
. catch ( ( { position , delay } ) => {
console . log ( ` Rejected promise ${ position } in ${ delay } ms` ) ;
} ) ;
Euen Die folgende Funktionalität ist für die Aufgabe nicht erforderlich, ist aber eine gute zusätzliche Praxis.
Verwenden Sie die Notiflix -Bibliothek, um Nachrichten an den Benutzer anstelle von console.log() anzuzeigen.
Dieses Projekt war ein Sozdan in Parcel. Für die Markierung und Anpassung der Verankerung der Exposition, die zur Dokumentation ausgewählt werden soll.
parcel-project-template Nash Nashmi.npm install .npm start .src/sass -Papquet und werden in den Dateidateien von Seiten importiert. Zum Beispiel heißt index.html die Stildatei index.scss .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. 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.
Der Status eines Einsatzes eines extremen Putsy wird durch die Ikone des Ego des Yoditikators erobert.
Die schmerzhaften detaillierten Informationen über den Status können im Symbol und im Schalter der Windows -Schalter Details überschritten werden.
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 .
main spezielles Skript (GitHub -Aktion) aus der Datei .github/workflows/deploy.yml gestartet.gh-pages . Im gegenüberliegenden Fall wird im Logikskript im Problem angegeben.
