goit js hw 06

Aufgabe 1

HTML enthält eine Liste der 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 >

Schreiben Sie ein Skript, das:

1. Es wird die Anzahl der Kategorien in ul#categories berechnen und in die Konsole bringen, dh Elemente li.item .
2. Für jedes Element von li.item in ul#categories wird er den Text des Element -Headers ( <h2> Tag) und die Anzahl der Elemente in der Kategorie (alle <li> in IT) finden und mitbringen.

Infolgedessen werden die folgenden Nachrichten in der Konsole angezeigt.

Number of categories: 3

Category: Animals
Elements: 4

Category: Products
Elements: 3

Category: Technologies
Elements: 5

Aufgabe 2

HTML enthält eine leere Liste ul#ingredients .

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

JavaScript enthält eine Reihe von Zeilen.

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

Schreiben Sie ein Skript, das für jedes Element ingredients Array:

1. Erstellt ein separates Element <li> . Verwenden Sie unbedingt document.createElement() .
2. Fügt den Namen der Zutat als Textinhalt hinzu.
3. Fügt item hinzu.
4. Fügen Sie danach alle <li> für eine Operation in die Liste ul.ingredients ein.

Aufgabe 3

Schreiben Sie ein Skript, um eine Bildergalerie basierend auf einer Reihe von Daten zu erstellen. HTML enthält eine ul.gallery -Liste.

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

Verwenden Sie ein Array von images , um <img> in <li> eingefügte Elemente zu erstellen. Verwenden Sie zum Erstellen des Markups die Vorlagenzeilen und insertAdjacentHTML() -Methode.

• Alle Elemente der Galerie sollten für eine Operation zum DOM hinzugefügt werden.
• Fügen Sie das minimale Design der Galerie mit Flexboxen oder Stäben über CSS -Klassen hinzu.

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

Aufgabe 4

Der Zähler besteht aus Spannweite und Tasten, die ihren Wert um eins erhöhen und verringern sollten.

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

• Erstellen Sie ein variables counterValue , der den aktuellen Messwert speichert und seinen Wert 0 initialisiert.
• Fügen Sie den Schaltflächen im Inneren Klicks hinzu, die den Zähler erhöhen oder verringern.
• Aktualisieren Sie die Schnittstelle mit einem neuen Wert der counterValue .

Aufgabe 5

Schreiben Sie ein Skript, das beim Eingeben in das Eingabe input#name-input ( input ) den aktuellen Wert in span#name-output ersetzt. Wenn die Eingabe leer ist, sollte die Spanne die "Anonymous" Zeile anzeigen.

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

Aufgabe 6

Schreiben Sie ein Skript, das seinen Inhalt über die richtige Anzahl der eingegebenen Zeichen überprüft, die beim Verlust von Fokus ( blur ) eingegeben wurden.

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

• Wie viele Lächeln sollte sich im In-uput befinden, ist es in seinem Attribut der data-length angezeigt.
• Wenn die korrekte Anzahl von Zeichen eingegeben wird, wird der In -uput border grün, wenn die falsche Zahl rot ist.

Verwenden Sie zum Hinzufügen von Stilen CSS -Klassen valid und invalid , die wir den Startdateien der Aufgabe bereits hinzugefügt haben.

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

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

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

Aufgabe 7

Schreiben Sie ein Skript, das auf die Änderung der input#font-size-control reagiert und den input Stil span#text ändert und die Eigenschaft der font-size aktualisiert. Durch das Ziehen des Schiebereglers ändert sich die Größe des Textes.

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

Aufgabe 8

Schreiben Sie das Skript des Anmeldeformulars.

 < 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 muss gemäß submit -Ereignis verarbeitet werden.
2. Die Seite sollte beim Senden des Formulars nicht neu gestartet werden.
3. Wenn sich in der Form nicht gefüllte Felder befinden, ist die Ausgabe auf die Tatsache alert , dass alle Felder gefüllt werden sollten.
4. Wenn der Benutzer alle Felder gefüllt und das Formular gesendet hat, sammeln Sie die Werte der Felder im Objekt, in dem der Feldname der Eigenschaftsname und der Wert des Feldes ist - der Wert der Eigenschaft. Verwenden Sie elements -Eigenschaften, um auf die Formularelemente zuzugreifen.
5. Bringen Sie das Objekt mit den in die Konsole eingegebenen Daten heraus und reinigen Sie den Wert der Felder des Formulars durch reset .

Aufgabe 9

Schreiben Sie ein Skript, das die Farben des Element-Hintergrunds <body> durch die Inline-Klick auf button.change-color span.color .

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

Verwenden Sie getRandomHexColor , um zufällige Farbe zu erzeugen.

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

Aufgabe 10 (nicht erforderlich)

Schreiben Sie ein Skript zum Erstellen und Reinigen der Sammlung von Elementen. Der Benutzer gibt die Anzahl der Elemente in input ein und klickt auf die Schaltfläche Створити und rendert dann die Sammlung. Wenn Sie auf die Schaltfläche klicken, Очистити , wird die Sammlung von Elementen gereinigt.

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

Erstellen Sie createBoxes(amount) , die einen Parameter akzeptiert - eine Nummer. Die Funktion erzeugt so viel <div> wie in amount angegeben und fügt sie zu div#boxes hinzu.

1. Die Abmessungen der ersten <div> - 30px bis 30px.
2. Jedes Element nach dem ersten sollte breiter und höher sein als das vorherige zu 10px.
3. Alle Elemente müssen eine zufällige Hintergrundfarbe im HEX -Form haben. Verwenden Sie eine ready -hergestellte getRandomHexColor -Funktion, um Farbe zu erhalten.

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

Erstellen Sie die Funktion destroyBoxes() , die div#boxes reinigt und so alle erstellten Elemente entfernen.