pixel facebook
 

Javascript | Checklist

Ce que vous allez Apprendre

Exercice d'application

Nous mettons en pratique nos nouvelles connaissances lors de cette formation Javascript avec la proposition d'un nouveau challenge.

Le but de cette exercice sera de construire une checklist automatisée depuis une liste à puces.

Bon courage à tous !

Commentaires 4


Votre adresse mail ne sera en aucun cas divulguée ou utilisée, elle nous permet de garantir la pertinence des commentaires affichés

Danieldumas - 03/12/2021 16:19:28
Merci pour la clarté des explications. Pour tester ma comprehension j'ai combiné les deux exercices Evènements et Checklist et cela a fonctionné. Donc je continue avec entrain cette formation. Daniel
Répondre
Jonathan surle - 23/07/2020 12:27:24
Pour ma part, je ne sais pas si je ne me suis pas un peu compliqué la vie...

let liItems = document.querySelectorAll('ul li');

for(let liItem of liItems){

const spanCheck = document.createElement('span') ;

spanCheck.style.paddingLeft = "10px";

liItem.addEventListener('click', function(){

this.classList.toggle('active');

if(this.classList.contains('active')){

this.appendChild(spanCheck);

spanCheck.innerHTML = ``; //je me suis abstenu de recréer un élément et de lui affecter une classe

}else{
this.removeChild(spanCheck);
};
});
}
Répondre
Mustafa3m - 05/06/2020 19:36:02
bonjour je stocker this.classList.toggle("active");
avec la variable resultat pour verifier avec avec if(resultat ) et trouve le meme resultat que vous formateur.

//creer une variables qui vas stockent l icones check

const icone = '';

//recuperer la listes avec un tableau

let liTab = document.querySelectorAll("ul li");


//ajouter une classe
for (let li of liTab) {
li.addEventListener("click", function () {

// stocker avec la variable resultat
let resultat = this.classList.toggle("active");


//verifier si elle contient une class avec contains
if (resultat) {
//ajouter le html li et l icone check

this.innerHTML = this.innerText + icone;
} else {
this.innerHTML = this.innerText;
}
});
}
Répondre
Admin - 06/06/2020 09:50:45
Bonjour,
Très bonne solution. C'est vrai que le toggle renvoi vrai/faux selon que l'on ajoute ou que l'on enlève la class.
Bien joué ;)
Répondre
Thibaut - 18/04/2020 01:07:10
je suis tres content d'avoir reussi l'exercice, merci à toi pout ton partage et tes explication
let items = document.querySelectorAll('ul li');

for( let item of items){
item.addEventListener('click', function(){
this.classList.toggle('active');
});
}
Répondre
Thibaut - 18/04/2020 08:53:03
en voulant faire comme exigé dans l'exercice je suis buté, voici mon code
let items = document.querySelectorAll('ul li');

let span = document.createElement('span');
span.classList.toggle('check');

let i = document.createElement('i');
i.classList.toggle('fas' + 'fa-check');

let parent = document.li;

// let first = parent.firstChild;

for(let item of items){
item.addEventListener('click', function(){
this.insertBefore(span+i, this.firstElementChild.nextSibling);
});
}
Répondre