goit js hw 09
1.0.0
Leia em outros idiomas: Ucraniano, inglês.
goit-js-hw-09 foi criado.GitHub Pages .Prettier . Na pasta SRC, você encontrará arquivos de partida com marcas, estilos e scripts conectados para cada tarefa. Copie-os no projeto substituindo completamente a pasta src no Pedro-Project-Template. Para fazer isso, faça o download de todo esse repositório como um arquivo ou use o serviço de downgit para baixar uma pasta separada do repositório.
Preencha esta tarefa no 01-color-switcher.html e 01-color-switcher.js . Veja a demonstração do troca.
HTML contém botões "Start" e "Stop".
< button type =" button " data-start > Start </ button >
< button type =" button " data-stop > Stop </ button > Escreva um script que altere a cor do plano de fundo <body> para um valor aleatório usando o estilo embutido depois de clicar no botão Iniciar. Clicar no botão "Parar" Altere a cor do plano de fundo deve parar.
️ Lembre -se de que você pode clicar em um número infinito de vezes no botão Iniciar. Verifique se a alteração é iniciada, o botão Iniciar estava inativo.
Use getRandomHexColor para gerar cores aleatórias.
function getRandomHexColor ( ) {
return `# ${ Math . floor ( Math . random ( ) * 16777215 ) . toString ( 16 ) } ` ;
} Conclua esta tarefa nos arquivos 02-timer.html e 02-timer.js . Escreva um script de timer que verifique a contagem até uma determinada data. Esse cronômetro pode ser usado em blogs e lojas on -line, páginas de registro de eventos, manutenção e muito mais. Veja a demonstração do temporizador.
O HTML contém um cronômetro pronto, os campos de seleção de campo e um botão no clique no qual o temporizador deve iniciar. Adicione a interface 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 a biblioteca Flatpickr para permitir que o usuário escolha a data e a hora de término em um elemento de interface. Para conectar o código da biblioteca CSS ao projeto, você precisa adicionar outra importação, exceto conforme descrito na documentação.
// Описаний в документації
import flatpickr from 'flatpickr' ;
// Додатковий імпорт стилів
import 'flatpickr/dist/flatpickr.min.css' ; A biblioteca espera que ela seja inicializada no input[type="text"] , por isso adicionamos input#datetime-picker ao documento HTML.
< input type =" text " id =" datetime-picker " /> O segundo argumento do flatpickr(selector, options) pode transmitir um objeto de parâmetro opcional. Preparamos para você um objeto necessário para concluir a tarefa. Entenda o que toda propriedade na documentação das opções é responsável e use -a em seu código.
const options = {
enableTime : true ,
time_24hr : true ,
defaultDate : new Date ( ) ,
minuteIncrement : 1 ,
onClose ( selectedDates ) {
console . log ( selectedDates [ 0 ] ) ;
} ,
} ; onClose() do objeto de parâmetro é chamado sempre que a interface que cria flatpickr é fechada. É necessário processar a data escolhida pelo usuário. O parâmetro selectedDates é uma matriz de datas selecionadas, por isso pegamos o primeiro elemento.
window.alert() com o texto "Please choose a date in the future" . Clicando no script "Iniciar" deve ser calculado uma vez um segundo, quanto tempo resta até a data especificada e atualizar a interface do timer, mostrando quatro dígitos: dias, horas, minutos e segundo em xx:xx:xx:xx .
00:00:00:00 .Não vamos complicar. Se o timer estiver em execução para selecionar uma nova data e reiniciá -la, você precisará reiniciar a página.
Para calcular os valores, use as convertMs da função final, onde ms é a diferença entre a data final e atual em milissegundos.
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() retorna um objeto com um tempo calculado restante para a data final. Observe que ele não formate o resultado. Ou seja, se houver 4 minutos ou qualquer outro componente do tempo, a função retornará 4 , não 04 . Na interface do timer, você deve adicionar 0 se houver menos de dois caracteres. Escreva o recurso addLeadingZero(value) que usa padStart() e formate o valor antes de renderizar.
️ A seguinte funcionalidade não é necessária para a tarefa, mas será uma boa prática extra.
DD Exibir mensagens para o usuário em vez de window.alert() , use a biblioteca notiflix.
Conclua esta tarefa em 03-promises.html e 03-promises.js . Veja a demonstração do gerador de trabalho.
O HTML contém uma marcação da forma em que o usuário inserirá o primeiro atraso em milissegundos, uma etapa para aumentar o atraso para cada cortador após o primeiro e o número de medidas a serem criadas.
< 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 > Escreva um script que, no momento da forma do formulário, causa a função createPromise(position, delay) quantas vezes forem inseridos no campo amount . Durante cada chamada, passe position criado e o atraso, dado o primeiro atraso ( delay ) inserido pelo usuário e pela etapa ( step ).
function createPromise ( position , delay ) {
const shouldResolve = Math . random ( ) > 0.3 ;
if ( shouldResolve ) {
// Fulfill
} else {
// Reject
}
} Complementar o código da função createPromise para que ele retorne um corte ou rejeição após delay . O valor do lado deve ser um objeto no qual position e delay com valores dos mesmos parâmetros. Use o código de função original para escolher o que você precisa fazer com a punição - execute ou rejeite.
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` ) ;
} ) ;
️ A seguinte funcionalidade não é necessária para a tarefa, mas será uma boa prática extra.
Para exibir mensagens para o usuário, em vez de console.log() , use a biblioteca notiflix.
Este projeto foi um Sozdan em Parcel. Para a marcação e ajuste da ancoragem da exposição, a ser selecionada para documentação.
parcel-project-template Nash Nashmi.npm install do terminal.npm start .src/sass e são importados nos arquivos de arquivos das páginas. Por exemplo, para index.html , o arquivo de estilo é chamado de index.scss .src/images . O corusiano os otimiza, mas apenas com a deploração da versão do projeto do projeto. Tudo vai à vista do seu computador, para que possa demorar muito tempo nos carros fracos. Para ajustar o projeto DePaza, é necessário desenhar muitas folhas adicionais na configuração do seu repositório. Venha na guia Settings e, nas subescações Actions , selecione o item General .
Deslize o enredo para o post -secia, no qual a Opacia é levada na pista no traço da imagem e o bem de Save . Sem esses tunks nas conchas, haverá sem receita para automatizar o processo de implantação.
A versão do projeto do projeto será automática e parada nas páginas do Github, no molhado gh-pages , o tempo do cogd é atualizado main molhado. Por exemplo, um pusha reto ou um pusha retendido na piscina ou um pusha reto. Para isso, você precisa arquivar uma homepage do arquivo package.json e build um script, abafar your_username e your_repo_name para o seu próprio e enviar o nome no github.
"homepage" : " https://your_username.github.io/your_repo_name/ " ,
"scripts" : {
"build" : " parcel build src/*.html --public-url /your_repo_name/ "
}, Quase vá para o ajuste do Github-Repository ( Settings > Pages ) e desenhará a produção de arquivo de arquivo da pasta /root das gh-pages , se isso não for muito automático.
O status de uma implantação de uma comutação extrema é conquistada pelo ícone do ego do Yoditicator.
As informações detalhadas dolorosas sobre o status podem ser embebidas no ícone e no excedente do interruptor do Windows nos Details .
Por causa do tempo, duas frotas, eu moro na trama, você pode ferver no endereço indicado homepage . Por exemplo, eu vivo um MAND para este repositório https://goitacademy.github.io/parcel-project-template.
Se um gráfico do deserto for aberto, para matar Console da visão dos pacotes incorporados de arquivos de projeto CSS e JS ( 404 ). Cegonha tudo com significado irregular de Taby homepage ou build um script no arquivo package.json .
main script especial (ação do github) do arquivo .github/workflows/deploy.yml é iniciado.gh-pages . No caso oposto, no script lógico será apresentado no problema.
