goit js hw 06
1.0.0
HTML contient une liste 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 >Écrivez un script qui:
ul#categories , c'est-à-dire des éléments li.item .li.item dans ul#categories , il trouvera et apportera le texte de l'en-tête d'élément ( <h2> tag) et le nombre d'éléments dans la catégorie (tous <li> y investi).Par conséquent, les messages suivants seront affichés dans la console.
Number of categories: 3
Category: Animals
Elements: 4
Category: Products
Elements: 3
Category: Technologies
Elements: 5 HTML contient une liste vide ul#ingredients .
< ul id =" ingredients " > </ ul >JavaScript contient un tableau de lignes.
const ingredients = [
'Potatoes' ,
'Mushrooms' ,
'Garlic' ,
'Tomatos' ,
'Herbs' ,
'Condiments' ,
] ; Écrivez un script qui pour chaque élément du tableau ingredients :
<li> . Assurez-vous d'utiliser document.createElement() .item .<li> pour une opération dans la liste ul.ingredients . Écrivez un script pour créer une galerie d'images basée sur un tableau de données. HTML contient une liste ul.gallery .
< ul class =" gallery " > </ ul > Utilisez un tableau d' images d'images pour créer des éléments <img> insérés dans <li> . Pour créer le balisage, utilisez les lignes de modèle et insertAdjacentHTML() .
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' ,
} ,
] ; Le comptoir se compose d'une portée et de boutons, ce qui devrait augmenter et diminuer sa valeur de un.
< 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 >counterValue variable, qui stockera la valeur actuelle du compteur et initialisera sa valeur 0 .counterValue . Écrivez un script qui, lors de la saisie de l'entrée input#name-input ( input ), remplace sa valeur actuelle dans span#name-output . Si l'entrée est vide, la portée doit afficher la ligne "Anonymous" .
< input type =" text " id =" name-input " placeholder =" Please enter your name " />
< h1 > Hello, < span id =" name-output " > Anonymous </ span > ! </ h1 > Écrivez un script qui vérifie son contenu sur le nombre correct de caractères entrés lors de la perte de focus ( blur ).
< input
type =" text "
id =" validation-input "
data-length =" 6 "
placeholder =" Please enter 6 symbols "
/>data-length .border inuput devient verte si le mauvais numéro est rouge. Pour ajouter des styles, utilisez des classes CSS valid et invalid , ce que nous avons déjà ajouté aux fichiers de démarrage de la tâche.
# validation-input {
border : 3 px solid # bdbdbd ;
}
# validation-input . valid {
border-color : # 4caf50 ;
}
# validation-input . invalid {
border-color : # f44336 ;
} Écrivez un script qui réagit au changement d' input#font-size-control et modifie le style input span#text , mettant à jour la propriété de font-size . En conséquence, en faisant glisser le curseur, la taille du texte changera.
< input id =" font-size-control " type =" range " min =" 16 " max =" 96 " />
< br />
< span id =" text " > Abracadabra! </ span > Écrivez le script du formulaire de connexion.
< 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 >form.login-form doit être traité en fonction de l'événement submit .alert au fait que tous les champs doivent être remplis.elements pour accéder aux éléments de formulaire.reset . Écrivez un script span.color modifie les couleurs de l'arrière-plan de l'élément <body> via le clic en ligne sur button.change-color .
< div class =" widget " >
< p > Background color: < span class =" color " > - </ span > </ p >
< button type =" button " class =" change-color " > Change color </ button >
</ div > Utilisez getRandomHexColor pour générer une couleur aléatoire.
function getRandomHexColor ( ) {
return `# ${ Math . floor ( Math . random ( ) * 16777215 ) . toString ( 16 ) } ` ;
} Écrivez un script pour créer et nettoyer la collection d'éléments. L'utilisateur entre dans le nombre d'éléments dans input et cliquez sur le bouton Створити , puis rend la collection. En cliquant sur le bouton Очистити , la collection d'éléments est nettoyée.
< 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 > Créer createBoxes(amount) qui accepte un paramètre - un nombre. La fonctionnalité crée autant <div> que celle indiquée en amount et les ajoute aux div#boxes .
<div> - 30px par 30px.getRandomHexColor prête pour obtenir la couleur. function getRandomHexColor ( ) {
return `# ${ Math . floor ( Math . random ( ) * 16777215 ) . toString ( 16 ) } ` ;
} Créez une fonction destroyBoxes() qui nettoie div#boxes , supprimant ainsi tous les éléments créés.
