goit js hw 06

Tarefa 1

O HTML contém uma lista de ul#categories .

 < ul id =" categories " >
  < li class =" item " >
    < h2 > Animals </ h2 >
    < ul >
      < li > Cat </ li >
      < li > Hamster </ li >
      < li > Horse </ li >
      < li > Parrot </ li >
    </ ul >
  </ li >
  < li class =" item " >
    < h2 > Products </ h2 >
    < ul >
      < li > Bread </ li >
      < li > Prasley </ li >
      < li > Cheese </ li >
    </ ul >
  </ li >
  < li class =" item " >
    < h2 > Technologies </ h2 >
    < ul >
      < li > HTML </ li >
      < li > CSS </ li >
      < li > JavaScript </ li >
      < li > React </ li >
      < li > Node.js </ li >
    </ ul >
  </ li >
</ ul >

Escreva um script que:

1. Ele calculará e trará para o console o número de categorias nas ul#categories , ou seja, elementos li.item .
2. Para cada elemento de li.item nas ul#categories , ele encontrará e trará o texto do cabeçalho do elemento ( <h2> tag) e o número de elementos na categoria (todos <li> investidos nele).

Como resultado, as seguintes mensagens serão exibidas no console.

Number of categories: 3

Category: Animals
Elements: 4

Category: Products
Elements: 3

Category: Technologies
Elements: 5

Tarefa 2

HTML contém uma lista vazia ul#ingredients .

 < ul id =" ingredients " > </ ul >

JavaScript contém uma matriz de linhas.

 const ingredients = [
  'Potatoes' ,
  'Mushrooms' ,
  'Garlic' ,
  'Tomatos' ,
  'Herbs' ,
  'Condiments' ,
] ;

Escreva um script que para cada elemento da matriz ingredients :

1. Criará um elemento separado <li> . Certifique -se de usar document.createElement() .
2. Adicionará o nome do ingrediente como seu conteúdo textual.
3. Adicionará a classe de item .
4. Depois disso, insira tudo <li> para uma operação na lista ul.ingredients .

Tarefa 3

Escreva um script para criar uma galeria de imagens com base em uma variedade de dados. O HTML contém uma lista ul.gallery .

 < ul class =" gallery " > </ ul >

Use uma matriz de objetos images para criar itens <img> inseridos em <li> . Para criar a marcação, use as linhas de modelo e insertAdjacentHTML() .

• Todos os elementos da galeria devem ser adicionados ao DOM para uma cirurgia.
• Adicione o design mínimo da galeria com caixas flexíveis ou hastes através das classes CSS.

 const images = [
  {
    url : 'https://images.pexels.com/photos/140134/pexels-photo-140134.jpeg?dpr=2&h=750&w=1260' ,
    alt : 'White and Black Long Fur Cat' ,
  } ,
  {
    url : 'https://images.pexels.com/photos/213399/pexels-photo-213399.jpeg?dpr=2&h=750&w=1260' ,
    alt : 'Orange and White Koi Fish Near Yellow Koi Fish' ,
  } ,
  {
    url : 'https://images.pexels.com/photos/219943/pexels-photo-219943.jpeg?dpr=2&h=750&w=1260' ,
    alt : 'Group of Horses Running' ,
  } ,
] ; 

Tarefa 4

O contador consiste em extensão e botões, que devem aumentar e diminuir seu valor em um.

 < div id =" counter " >
  < button type =" button " data-action =" decrement " > -1 </ button >
  < span id =" value " > 0 </ span >
  < button type =" button " data-action =" increment " > +1 </ button >
</ div >

• Crie um counterValue variável, que armazenará o valor do medidor atual e inicializará seu valor 0 .
• Adicione os cliques aos botões dentro que aumentam ou diminuem o contador.
• Atualize a interface com um novo valor da variável counterValue .

Tarefa 5

Escreva um script que, ao digitar na entrada input#name-input ( input ), substitua seu valor atual no span#name-output . Se a entrada estiver vazia, a extensão deve exibir a linha "Anonymous" .

 < input type =" text " id =" name-input " placeholder =" Please enter your name " />
< h1 > Hello, < span id =" name-output " > Anonymous </ span > ! </ h1 > 

Tarefa 6

Escreva um script que verifique seu conteúdo sobre o número correto de caracteres inseridos ao perder o foco ( blur ).

 < input
  type =" text "
  id =" validation-input "
  data-length =" 6 "
  placeholder =" Please enter 6 symbols "
/>

• Quantos smils devem estar no Inuput, ele é indicado em seu atributo de data-length .
• Se o número correto de caracteres for inserido, a border inuput ficará verde se o número errado for vermelho.

Para adicionar estilos, use as classes CSS valid e invalid , que já adicionamos aos arquivos iniciais da tarefa.

 # validation-input {
  border : 3 px solid # bdbdbd ;
}

# validation-input . valid {
  border-color : # 4caf50 ;
}

# validation-input . invalid {
  border-color : # f44336 ;
}

Tarefa 7

Escreva um script que reage à alteração da input#font-size-control e altera o estilo input span#text , atualizando a propriedade do font-size . Como resultado, arrastando o controle deslizante, o tamanho do texto mudará.

 < input id =" font-size-control " type =" range " min =" 16 " max =" 96 " />
< br />
< span id =" text " > Abracadabra! </ span > 

Tarefa 8

Escreva o script do formulário de login.

 < form class =" login-form " >
  < label >
    Email
    < input type =" email " name =" email " />
  </ label >
  < label >
    Password
    < input type =" password " name =" password " />
  </ label >
  < button type =" submit " > Login </ button >
</ form >

1. form.login-form deve ser processado de acordo com o evento submit .
2. A página não deve ser reiniciada ao enviar o formulário.
3. Se houver campos não preenchidos no formulário, a saída será alert para o fato de que todos os campos devem ser preenchidos.
4. Se o usuário preencher todos os campos e enviou o formulário, colete os valores dos campos no objeto em que o nome do campo será o nome da propriedade e o valor do campo - o valor da propriedade. Use a propriedade elements para acessar os elementos do formulário.
5. Retire o objeto com os dados inseridos no console e limpe o valor dos campos do formulário por reset .

Tarefa 9

Escreva um script span.color altere as cores do elemento <body> através do clique em linha no button.change-color .

 < div class =" widget " >
  < p > Background color: < span class =" color " > - </ span > </ p >
  < button type =" button " class =" change-color " > Change color </ button >
</ div >

Use getRandomHexColor para gerar cores aleatórias.

 function getRandomHexColor ( ) {
  return `# ${ Math . floor ( Math . random ( ) * 16777215 ) . toString ( 16 ) } ` ;
} 

Tarefa 10 (não é necessário)

Escreva um script para criar e limpar a coleção de elementos. O usuário insere o número de itens na input e clique no botão Створити e depois renderiza a coleção. Clicando no botão Очистити , a coleção de elementos é limpa.

 < div id =" controls " >
  < input type =" number " min =" 1 " max =" 100 " step =" 1 " />
  < button type =" button " data-create > Create </ button >
  < button type =" button " data-destroy > Destroy </ button >
</ div >

< div id =" boxes " > </ div >

Crie createBoxes(amount) que aceite um parâmetro - um número. O recurso cria tanto <div> quanto é indicado na amount e os adiciona às div#boxes .

1. As dimensões do primeiro <div> - 30px por 30px.
2. Cada elemento após o primeiro deve ser mais largo e maior que o anterior por 10px.
3. Todos os elementos devem ter uma cor de fundo aleatória no formato hexadecimal. Use uma função pronta para obter a função getRandomHexColor para obter cores.

 function getRandomHexColor ( ) {
  return `# ${ Math . floor ( Math . random ( ) * 16777215 ) . toString ( 16 ) } ` ;
}

Crie a função destroyBoxes() que limpa div#boxes , removendo todos os elementos criados.