goit js hw 06

Task 1

HTML contains a list of 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 >

Write a script that:

1. It will calculate and bring to the console the number of categories in ul#categories , ie elements li.item .
2. For each element of li.item in ul#categories , he will find and bring the text of the element header ( <h2> tag) and the number of elements in the category (all <li> invested in it).

As a result, the following messages will be displayed in the console.

Number of categories: 3

Category: Animals
Elements: 4

Category: Products
Elements: 3

Category: Technologies
Elements: 5

Task 2

HTML contains an empty list ul#ingredients .

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

Javascript contains an array of rows.

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

Write a script that for each element of ingredients array:

1. Will create a separate element <li> . Be sure to use document.createElement() method.
2. Will add the name of the ingredient as its textual content.
3. Will add item class.
4. After that, insert all <li> for one operation into the ul.ingredients list.

Task 3

Write a script to create an image gallery based on an array of data. HTML contains a ul.gallery list.

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

Use an array of images objects to create <img> items inserted into <li> . To create the markup, use the template lines and insertAdjacentHTML() method.

• All elements of the gallery should be added to the DOM for one surgery.
• Add the minimal design of the gallery with flexboxes or rods through CSS classes.

 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' ,
  } ,
] ; 

Task 4

The counter consists of span and buttons, which should increase and decrease its value by one.

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

• Create a variable counterValue , which will store the current meter value and initialize its value 0 .
• Add clicks to the buttons inside which increase or decrease the counter.
• Update the interface with a new value of counterValue variable.

Task 5

Write a script that, when typing in the Input input#name-input ( input ), substitutes its current value in span#name-output . If the input is empty, the span should display the "Anonymous" line.

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

Task 6

Write a script that checks its contents about the correct number of characters entered when losing focus ( blur ).

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

• How many smils should be in the inuput, it is indicated in its attribute of data-length .
• If the correct number of characters is entered, the inuput border becomes green if the wrong number is red.

To add styles, use CSS classes valid and invalid , which we have already added to the starting files of the task.

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

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

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

Task 7

Write a script that reacts to the change of input#font-size-control and changes the input style span#text , updating the property of font-size . As a result, by dragging the slider, the size of the text will change.

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

Task 8

Write the script of the login form.

 < 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 must be processed according to submit event.
2. The page should not be restarted when sending the form.
3. If there are unfilled fields in the form, the output is alert to the fact that all fields should be filled.
4. If the user has filled all the fields and sent the form, collect the values ​​of the fields in the object where the field name will be the property name and the value of the field - the value of the property. Use elements property to access the form elements.
5. Bring out the object with the data entered into the console and clean the value of the fields of the form by reset .

Task 9

Write a script that changes the colors of the element background <body> through the inline click on button.change-color and outputs color value in 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 to generate random color.

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

Task 10 (not required)

Write a script for creating and cleaning the collection of elements. The user enters the number of items into input and click the Створити button, and then renders the collection. Clicking on the button Очистити , the collection of elements is cleaned.

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

Create createBoxes(amount) function that accepts one parameter - a number. The feature creates as much <div> as it is indicated in amount and adds them to div#boxes .

1. The dimensions of the first <div> - 30px by 30px.
2. Each element after the first should be wider and higher than the previous one by 10px.
3. All elements must have a random background color in Hex format. Use a ready -made getRandomHexColor function to get color.

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

Create destroyBoxes() function that cleanses div#boxes , thus removing all the elements created.