goit js hw 09
1.0.0
Lisez dans d'autres langues: ukrainien, anglais.
goit-js-hw-09 a été créé.GitHub Pages .Prettier . Dans le dossier SRC, vous trouverez des fichiers de démarrage avec des marquages, des styles et des scripts connectés prêts pour chaque tâche. Copiez-les dans le projet en remplaçant complètement le dossier src dans Parcel-Project-Template. Pour ce faire, téléchargez tout ce référentiel comme archive ou utilisez le service DownGit pour télécharger un dossier séparé du référentiel.
Terminez cette tâche dans 01-color-switcher.html et 01-color-switcher.js . Voir le démo video de l'interrupteur.
HTML contient des boutons "start" et "stop".
< button type =" button " data-start > Start </ button >
< button type =" button " data-stop > Stop </ button > Écrivez un script qui modifie la couleur de l'arrière-plan <body> en une valeur aléatoire en utilisant le style en ligne après avoir cliqué sur le bouton Démarrer. En cliquant sur le bouton "Arrêter", Changer la couleur de l'arrière-plan doit s'arrêter.
️ Gardez à l'esprit que vous pouvez cliquer sur un nombre infini de fois sur le bouton Démarrer. Assurez-vous que le changement est démarré, le bouton Démarrer était inactif.
Utilisez getRandomHexColor pour générer une couleur aléatoire.
function getRandomHexColor ( ) {
return `# ${ Math . floor ( Math . random ( ) * 16777215 ) . toString ( 16 ) } ` ;
} Terminez cette tâche dans les fichiers 02-timer.html et 02-timer.js . Écrivez un script de minuterie qui vérifie le compte à une certaine date. Une telle minuterie peut être utilisée dans les blogs et les magasins en ligne, les pages d'enregistrement des événements, la maintenance et plus encore. Voir le démo video de la minuterie.
HTML contient une minuterie prête, les champs de sélection des champs et un bouton sur le clic sur lequel le temporisateur doit démarrer. Ajoutez l'interface minimale.
< 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 >flatpickrUtilisez la bibliothèque FlatPickr pour permettre à l'utilisateur de choisir la date et l'heure de fin dans un élément d'interface. Afin de connecter le code de la bibliothèque CSS au projet, vous devez ajouter une autre importation, sauf comme décrit dans la documentation.
// Описаний в документації
import flatpickr from 'flatpickr' ;
// Додатковий імпорт стилів
import 'flatpickr/dist/flatpickr.min.css' ; La bibliothèque s'attend à ce qu'elle soit initialisée sur l' input[type="text"] , nous avons donc ajouté input#datetime-picker au document HTML.
< input type =" text " id =" datetime-picker " /> Le deuxième argument de flatpickr(selector, options) peut transmettre un objet de paramètre facultatif. Nous avons préparé pour vous un objet nécessaire pour terminer la tâche. Comprenez ce que chaque propriété dans la documentation des options est responsable et utilisez-la dans votre code.
const options = {
enableTime : true ,
time_24hr : true ,
defaultDate : new Date ( ) ,
minuteIncrement : 1 ,
onClose ( selectedDates ) {
console . log ( selectedDates [ 0 ] ) ;
} ,
} ; onClose() de l'objet de paramètre est appelée chaque fois que l'interface qui crée flatpickr est fermée. Il est nécessaire de traiter la date choisie par l'utilisateur. Le paramètre selectedDates est un tableau de dates sélectionnées, nous prenons donc le premier élément.
window.alert() avec le texte "Please choose a date in the future" . En cliquant sur le script "Démarrer" doit être calculé une fois par seconde, combien de temps reste à la date spécifiée et mettez à jour l'interface de la minuterie, montrant quatre chiffres: jours, heures, minutes et seconde en xx:xx:xx:xx .
00:00:00:00 .Nous ne compliquerons pas. Si la minuterie est en cours d'exécution pour sélectionner une nouvelle date et la redémarrer, vous devez redémarrer la page.
Pour calculer les valeurs, utilisez les convertMs de fonction finis, où ms est la différence entre la date finale et actuelle en millisecondes.
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() renvoie un objet avec une heure calculée restant à la date finale. Veuillez noter qu'il ne formate pas le résultat. Autrement dit, s'il y a 4 minutes ou tout autre composant du temps, alors la fonction retournera 4 , pas 04 . Dans l'interface de la minuterie, vous devez ajouter 0 s'il y a moins de deux caractères. Écrivez la fonction addLeadingZero(value) qui utilise padStart() et formatez la valeur avant le rendu.
️ La fonctionnalité suivante n'est pas requise pour la tâche, mais sera une bonne pratique supplémentaire.
DD Affiche les messages à l'utilisateur au lieu de window.alert() , utilisez la bibliothèque Notiflix.
Terminez cette tâche dans 03-promises.html et 03-promises.js . Voir le Demo-video du générateur de travail.
HTML contient un marquage du formulaire dans lequel l'utilisateur entrera dans le premier retard en millisecondes, une étape pour augmenter le retard pour chaque coupeur après le premier et le nombre de mesures à créer.
< 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 > Écrivez un script qui, au moment de la forme de la forme, provoque la fonction createPromise(position, delay) autant de fois que saisie dans le champ amount . Au cours de chaque appel, passez position créé et le retard, étant donné le premier retard ( delay ) entré par l'utilisateur et l'étape ( step ).
function createPromise ( position , delay ) {
const shouldResolve = Math . random ( ) > 0.3 ;
if ( shouldResolve ) {
// Fulfill
} else {
// Reject
}
} Complétez le code de fonction createPromise afin qu'il renvoie une coupe ou rejetant après delay . La valeur du côté doit être un objet dans lequel position et delay avec des valeurs des mêmes paramètres. Utilisez le code de fonction d'origine pour choisir ce que vous devez faire avec la punition - effectuer ou rejeter.
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` ) ;
} ) ;
️ La fonctionnalité suivante n'est pas requise pour la tâche, mais sera une bonne pratique supplémentaire.
Pour afficher des messages à l'utilisateur, au lieu de console.log() , utilisez la bibliothèque Notiflix.
Ce projet était un Sozdan chez Parcel. Pour le marquage et l'ajustement de l'ancrage de l'exposition à sélectionner pour la documentation.
parcel-project-template nash nashmi.npm install .npm start .src/sass et sont importés dans les fichiers de pages. Par exemple, pour index.html , le fichier de style est appelé index.scss .src/images . Le chorus les optimise, mais uniquement avec la déploration de la version du projet du projet. Tout va à la vue de votre ordinateur, donc cela peut être beaucoup de temps sur les voitures faibles. Pour ajuster le projet Depaza, il est nécessaire de dessiner beaucoup de shags supplémentaires sur le réglage de votre référentiel. Venez Settings et dans les sous-secteurs Actions Sélectionnez l'élément General .
Faites glisser le tracé vers le post -secia, dans lequel l'Opacia est prise sur la piste sur la trace de l'image et le plaisir de Save . Sans ces tuns dans les scoops, il n'y aura pas de mal à l'automatisation du processus de déployé.
La version du projet du projet sera automatique et arrêtée sur les pages GitHub, dans le gh-pages Wet, le temps du COGD est mis à jour main humide. Par exemple, une pusha droite ou un pusha retesté par la piscine ou une pusha droite. Pour cela, vous devez déposer un package.json Fichier homepage et build Script, étouffé your_username et your_repo_name pour vous et envoyer le nom sur GitHub.
"homepage" : " https://your_username.github.io/your_repo_name/ " ,
"scripts" : {
"build" : " parcel build src/*.html --public-url /your_repo_name/ "
}, Entrez presque dans le réglage GitHub-Repository ( Settings > Pages ) et tirera la production de fichiers de fichiers à partir du dossier /root de gh-pages , si ce n'est pas beaucoup de automatique.
Le statut de déploiement d'un commutateur extrême est conquis par l'icône de l'ego du yoditicator.
Les informations détaillées douloureuses sur le statut peuvent être trempées dans l'icône et dans le dépassement de l'interrupteur Windows sur Details .
En raison du temps, quelques flottes, je vis l'intrigue, vous pouvez mijoter à l'adresse indiquée dans homepage . Par exemple, je vis un mandat pour ce référentiel https://goitacademy.github.io/parcel-project-Template.
Si une parcelle de désert est ouverte, pour tuer Console du NOR à la vue des packs incorporés de fichiers de projet CSS et JS ( 404 ). Stork All in Taby Irregular Signification de homepage ou du script build dans File package.json .
main script spécial (action github) dans le fichier .github/workflows/deploy.yml est lancé.gh-pages . Dans le cas opposé, le script logique sera donné dans le problème.
