goit js hw 06

Tarea 1

HTML contiene una 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 >

Escribe un guión que:

1. Calculará y traerá a la consola el número de categorías en ul#categories , es decir, elementos li.item .
2. Para cada elemento de li.item en ul#categories , encontrará y traerá el texto del encabezado del elemento ( <h2> etiqueta) y el número de elementos en la categoría (todos <li> invertidos en él).

Como resultado, los siguientes mensajes se mostrarán en la consola.

Number of categories: 3

Category: Animals
Elements: 4

Category: Products
Elements: 3

Category: Technologies
Elements: 5

Tarea 2

HTML contiene una lista vacía ul#ingredients .

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

JavaScript contiene una variedad de filas.

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

Escriba un script que para cada elemento de ingredients :

1. Creará un elemento separado <li> . Asegúrese de usar document.createElement() .
2. Agregará el nombre del ingrediente como su contenido textual.
3. Agregará la clase item .
4. Después de eso, inserte todo <li> para una operación en la lista ul.ingredients .

Tarea 3

Escriba un script para crear una galería de imágenes basada en una variedad de datos. HTML contiene una lista ul.gallery .

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

Use una matriz de objetos images para crear elementos <img> insertados en <li> . Para crear el marcado, use las líneas de plantilla y insertAdjacentHTML() .

• Todos los elementos de la galería deben agregarse al DOM para una cirugía.
• Agregue el diseño mínimo de la galería con Flexboxes o varillas a través de clases 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' ,
  } ,
] ; 

Tarea 4

El contador consiste en el tramo y los botones, lo que debería aumentar y disminuir su valor en uno.

 < 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 >

• Cree un counterValue Variable, que almacenará el valor del medidor actual e inicializará su valor 0 .
• Agregue los clics a los botones dentro de los cuales aumentan o disminuyen el contador.
• Actualice la interfaz con un nuevo valor de la variable counterValue .

Tarea 5

Escriba un script que, al escribir en la input#name-input ( input ), sustituye su valor actual en span#name-output . Si la entrada está vacía, el tramo debe mostrar la línea "Anonymous" .

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

Tarea 6

Escriba un script que verifique su contenido sobre el número correcto de caracteres ingresados ​​al perder el enfoque ( blur ).

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

• Cuántos SMIL debe haber en el Inuput, se indica en su atributo del data-length .
• Si se ingresa el número correcto de caracteres, el border de Inuput se vuelve verde si el número incorrecto es rojo.

Para agregar estilos, use clases CSS valid e invalid , que ya hemos agregado a los archivos iniciales de la tarea.

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

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

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

Tarea 7

Escriba un script que reaccione al cambio de input#font-size-control y cambia el estilo input span#text , actualizando la propiedad del font-size . Como resultado, al arrastrar el control deslizante, el tamaño del texto cambiará.

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

Tarea 8

Escriba el script del formulario de inicio de sesión.

 < 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 debe procesarse de acuerdo con el evento submit .
2. La página no debe reiniciarse al enviar el formulario.
3. Si hay campos sin rellenar en el formulario, la salida está alert al hecho de que todos los campos deben llenarse.
4. Si el usuario ha llenado todos los campos y ha enviado el formulario, recopile los valores de los campos en el objeto donde el nombre del campo será el nombre de la propiedad y el valor del campo: el valor de la propiedad. Use la propiedad elements para acceder a los elementos del formulario.
5. Saque el objeto con los datos ingresados ​​en la consola y limpie el valor de los campos del formulario por reset .

Tarea 9

Escriba un script que cambie los colores del fondo del elemento <body> a través de la línea en línea Haga clic en button.change-color y genera valor de color en span.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 generar un color aleatorio.

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

Tarea 10 (no requerida)

Escriba un script para crear y limpiar la colección de elementos. El usuario ingresa el número de elementos en input y haga clic en el botón Створити , y luego representa la colección. Al hacer clic en el botón Очистити , se limpia la colección de elementos.

 < 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 >

Crear createBoxes(amount) que acepta un parámetro: un número. La característica crea tanto <div> como se indica en amount y las agrega a div#boxes .

1. Las dimensiones de la primera <div> - 30px por 30px.
2. Cada elemento después del primero debe ser más ancho y más alto que el anterior por 10px.
3. Todos los elementos deben tener un color de fondo aleatorio en formato hexadecimal. Use una función getRandomHexColor hecha lista para obtener color.

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

Crear función destroyBoxes() que limpia div#boxes , eliminando así todos los elementos creados.