goit js hw 09
1.0.0
Leer en otros idiomas: ucraniano, inglés.
goit-js-hw-09 .GitHub Pages .Prettier . En la carpeta SRC encontrará archivos de inicio con marcas, estilos y scripts conectados para cada tarea. Copiéelos en el proyecto reemplazando completamente la carpeta src en la plantilla de parcelas. Para hacer esto, descargue todo este repositorio como un archivo o use el servicio Downgit para descargar una carpeta separada del repositorio.
Complete esta tarea en 01-color-switcher.html y 01-color-switcher.js . Vea el Video de demostración del interruptor.
HTML contiene botones de "inicio" y "parar".
< button type =" button " data-start > Start </ button >
< button type =" button " data-stop > Stop </ button > Escriba un script que cambie el color del fondo <body> a un valor aleatorio utilizando el estilo en línea después de hacer clic en el botón Inicio. Al hacer clic en el botón "Detener", cambiar el color del fondo debe detenerse.
️ Tenga en cuenta que puede hacer clic en un número interminable de veces en el botón Inicio. Asegúrese de que el cambio se inicie, el botón de inicio estaba inactivo.
Use getRandomHexColor para generar un color aleatorio.
function getRandomHexColor ( ) {
return `# ${ Math . floor ( Math . random ( ) * 16777215 ) . toString ( 16 ) } ` ;
} Complete esta tarea en archivos 02-timer.html y 02-timer.js . Escriba un script de temporizador que verifique el recuento a una fecha determinada. Tal temporizador se puede usar en blogs y tiendas en línea, páginas de registro de eventos, mantenimiento y más. Ver el Video de demostración del temporizador.
HTML contiene un temporizador listo para usar, los campos de selección de campo y un botón en el clic en el que debe iniciarse el temporizador. Agregue la interfaz mínima.
< 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 >flatpickrUse la biblioteca FlatPickr para permitir que el usuario elija la fecha y hora de finalización en un elemento de interfaz. Para conectar el código de la biblioteca CSS al proyecto, debe agregar otra importación, excepto como se describe en la documentación.
// Описаний в документації
import flatpickr from 'flatpickr' ;
// Додатковий імпорт стилів
import 'flatpickr/dist/flatpickr.min.css' ; La biblioteca espera que se inicialice en el input[type="text"] , por lo que agregamos input#datetime-picker al documento HTML.
< input type =" text " id =" datetime-picker " /> El segundo argumento de flatpickr(selector, options) puede transmitir un objeto de parámetro opcional. Nos hemos preparado para usted un objeto que se necesita para completar la tarea. Comprenda lo que cada propiedad en la documentación de opciones es responsable y úsela en su código.
const options = {
enableTime : true ,
time_24hr : true ,
defaultDate : new Date ( ) ,
minuteIncrement : 1 ,
onClose ( selectedDates ) {
console . log ( selectedDates [ 0 ] ) ;
} ,
} ; onClose() del objeto de parámetro se llama cada vez que se cierra la interfaz que crea flatpickr . Es necesario procesar la fecha elegida por el usuario. El parámetro selectedDates es una matriz de fechas seleccionadas, por lo que tomamos el primer elemento.
window.alert() con el texto "Please choose a date in the future" . Al hacer clic en el script "Inicio" debe calcularse una vez un segundo, cuánto tiempo queda a la fecha especificada y actualizar la interfaz del temporizador, mostrando cuatro dígitos: días, horas, minutos y segundo en xx:xx:xx:xx .
00:00:00:00 .No lo complicaremos. Si el temporizador se ejecuta para seleccionar una nueva fecha y reiniciarla, debe reiniciar la página.
Para calcular los valores, use los convertMs la función terminada, donde ms es la diferencia entre la fecha final y actual en milisegundos.
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() devuelve un objeto con un tiempo calculado restante a la fecha final. Tenga en cuenta que no formatea el resultado. Es decir, si hay 4 minutos o cualquier otro componente del tiempo, entonces la función devolverá 4 , no 04 . En la interfaz del temporizador, debe agregar 0 si hay menos de dos caracteres. Escriba la función addLeadingZero(value) que usa padStart() y formatea el valor antes de representar.
️ La siguiente funcionalidad no es necesaria para la tarea, pero será una buena práctica adicional.
DD Muestra mensajes al usuario en lugar de window.alert() , use la biblioteca Notiflix.
Complete esta tarea en 03-promises.html y 03-promises.js . Ver el Video de demostración del generador de trabajo.
HTML contiene una marca del formulario en el que el usuario ingresará el primer retraso en milisegundos, un paso para aumentar el retraso para cada cortador después del primero y el número de medidas a crear.
< 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 > Escriba un script que en el momento de la forma de la forma cause la función createPromise(position, delay) tantas veces como se ingresó en el campo amount . Durante cada llamada, pase position que se crea y el retraso, dado el primer retraso ( delay ) ingresado por el usuario y el paso ( step ).
function createPromise ( position , delay ) {
const shouldResolve = Math . random ( ) > 0.3 ;
if ( shouldResolve ) {
// Fulfill
} else {
// Reject
}
} Complementa el código de función createPromise para que devuelva un corte o rechazar después delay . El valor del lado debe ser un objeto en el que position y delay con valores de los mismos parámetros. Use el código de función original para elegir lo que necesita hacer con el castigo: realizar o rechazar.
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 siguiente funcionalidad no es necesaria para la tarea, pero será una buena práctica adicional.
Para mostrar mensajes al usuario, en lugar de console.log() , use la biblioteca Notiflix.
Este proyecto fue un Sozdan en el paquete. Para el marcado y ajuste del anclaje de exposición que se seleccionará para la documentación.
parcel-project-template nash nashmi.npm install terminal.npm start .src/sass y se importan en los archivos de archivos de páginas. Por ejemplo, para index.html , el archivo de estilo se llama index.scss .src/images . El corusiano los optimiza, pero solo con la deploración de la versión del proyecto del proyecto. Todo entra en la vista de su computadora, ya que puede ser mucho tiempo en los autos débiles. Para ajustar el proyecto Depaza, es necesario dibujar muchos pelusas adicionales en la configuración de su repositorio. Vamos en Settings y en las subsecaciones Actions seleccione el elemento General .
Deslice la trama a la post -Secia, en la que la opacia se toma en la pista en el rastro de la imagen y el bien de Save . Sin estos tunks en las primeras, habrá una molestia para automatizar el proceso de implementación.
La versión del proyecto del proyecto será automática y se detendrá en las páginas de GitHub, en la página gh-pages , el tiempo de la COGD se actualiza main . Por ejemplo, una pipa recta o una pipa retirada de la piscina o un empuje recto. Para esto, debe presentar una homepage y build de script de archivo package.json , amortiguó your_username y your_repo_name para el suyo, y envíe el nombre en GitHub.
"homepage" : " https://your_username.github.io/your_repo_name/ " ,
"scripts" : {
"build" : " parcel build src/*.html --public-url /your_repo_name/ "
}, Casi vaya a la sintonización de Repository GitHub ( Settings > Pages ) y dibujará la producción de archivo de archivo desde la carpeta /root de gh-pages , si esto no es muy automático.
El estado de un despliegue de un commuty extremo es conquistado por el ícono del ego del yoditicador.
La dolorosa información detallada sobre el estado se puede empapar en el icono y en el interruptor de ventanas superior en Details .
Debido al tiempo, un par de flotas, vivo la trama, puedes hervir a fuego lento en la dirección indicada en homepage . Por ejemplo, vivo un mand para este repositorio https://goitacademy.github.io/parcel-project-semplate.
Si se abre una parcela del desierto, para matar Console de la NOR a la vista de los paquetes incorporados de archivos del proyecto CSS y JS ( 404 ). Digüe todo en Taby Irregular significado de homepage o build script en el archivo package.json .
main script especial (acción de GitHub) del archivo .github/workflows/deploy.yml .gh-pages . En el caso opuesto, en el script lógico se dará en el problema.
