Javascript | Challenge - CheckList

[@WeFormYou]

Alors ... Qui a réussi l'exercice ? 😉

[@fbejaoui1]

Moi ! Merci !

[@imedjlassimoussa1100]

Moi aussi 😀

[@nasteemusic]

J'avais compris ce qu'il fallait faire, ma logique était bonne mais je ne connaissais pas par exemple "contains" et d'autres petites choses en syntaxe que je ne connaissais pas. Mais grâce à cet exercice et vos supers cours je m'améliore chaque jour !
Merci beaucoup pour toutes ces vidéos que vous partagez gratuitement, elles méritent bien plus de vues

[@vincentdennemont9902]

Bonjour et un grand merci pour le contenu que tu partages ! J'ai également trouvé une solution, mais en empruntant une méthode un peu différente. Voici le code que j'ai utilisé :
document.querySelectorAll("li").forEach((li) => {
li.addEventListener("click", () => {
let icon = li.querySelector("i.fa-solid.fa-check");
if (icon) {
icon.remove();
} else {
icon = document.createElement("i");
icon.classList.add("fa-solid", "fa-check");
li.appendChild(icon);
}
});
});
Cela a fonctionné pour moi. Merci encore !

[@angepaternenanakadjeu7834]

Très clair et facile à comprendre, vraiment merci

[@babacarsissoko282]

Modèle de cours superbe avec des explications très claires. Vraiment chapeau et bonne continuation!!!

[@WeFormYou]

Merci beaucoup 😄

[@tedzak06]

Je suis tes vidéos et c'est très bien expliqué et pédagogique pour ma part. Je n'avais pas réussi complètement ton exercice car en fait , car je n'avais pas assimilé tous les concepts expliqués en amont ( innerHTML & innerText. Désormais il reste à pratiquer et pratiquer pour s'approprié les méthodes.

[@WeFormYou]

Bonjour Teddy,
Effectivement ce n'est pas si facile de se rappeler de toutes les méthodes. Ça vient en pratiquant et en lisant bcp de code. Après l'essentiel est de comprendre le principe.
Je vais refaire un exercice dans le genre demain ou Lundi. Avant de ré attaquer les autres chapitres, la semaine prochaine.
stay connected 😄 !

[@fbejaoui1]

J'adore tes videos continue.

[@WeFormYou]

Merci 🙂

[@jeannehlig5784]

Bonjour,
Personnellement, je l'ai fait ainsi :
-- CSS : --
.check {
color: green;
}
.cache {
visibility: hidden;
}
-- HTML (dans les ) : --
-- JS : --
let tabLi = document.querySelectorAll('li');
for (let li of tabLi) {
li.addEventListener('click', function () {
this.querySelector('span').classList.toggle('cache');
});
}
Et ça fonctionne aussi.
Mais j'aime bien aussi la méthode de la constante "icone"... Je n'y aurais pas pensé, et ça m'apprend une piste de plus.
Merci.

[@mustch1226]

Merci simple et fluide.

[@martinbrandel8302]

merci pour tout vos challenges :D

[@davidbrot5436]

Chaque vidéo de la formation avec des explications très claires Hâte de continuer et de mettre tout cela en pratique

[@amaurydulaz1691]

Suis-je le seul à commenter cette excellente vidéo ? !!!

[@WeFormYou]

Le premier en tout cas 😄 ! Merci d'avoir regardé !

[@sosinformatique3470]

Bonjour, j'ai pas mal chercher pour avoir finalement une version proche mais de "bric et broc"
*********************JS*************************
let select = document.querySelectorAll('ul li span ');
// ajout d'un ecouteur d'evenement au clic sur toutes les colonnes
for (let span of select){
span.addEventListener('click' , function(){
span.classList.toggle('check');
});
}
****************************CSS**********************
.check{
color: white;
}
/*.check:hover{
color: green;
}*/

[@WeFormYou]

J'aime bien l'idée dans cette solution 😄 ! Pour partir dans ce sens, j'aurai mis en CSS le span en color:transparent, et le .check en color:green.
Ce qui fait que l'on alterne entre le transparent et le vert sur l'icone (qui dans ce cas doit déjà être présente dans le HTML)

[@arnaldo2.027]

Perso
CSS :
span {
margin-left: 5px;
color: green;
font-size: 20px;
display: none;
}
li.check span {
display: inline-block;
}
JS:
let tabLi = document.querySelectorAll('ul li')
for(let li of tabLi){
li.addEventListener('click', function(){
li.classList.toggle('check')
})
}

[@sosinformatique3470]

j'ai mis en pause je retourne au DOM et Evenements et je reviens

[@chinynguema8050]

J'ai reussi, mais j'ai procédé autrement