Javascript | Challenge - Galerie Photos

[@patgyver34]

Tout fonctionne parfaitement si on suis correctement le tuto et que l'on fait pas de faute de frappe, simple et efficace, merci beaucoup !

[@MohamedELHAKIKI]

awesome content I loved it

[@WeFormYou]

Merci 😀

[@aurelienamadon7684]

Bonjour,je suis bloqué sur un détail en ayant voulu pousser le challenge. La space bar fera play and pause count = document.querySelector('.counter'); //div invisible pour stocker une valeur document.onkeydown = function(e) { let key = e.keyCode; //space bar nbClick = 0; if (key == 32) { nbClick++; function clicked (){ if (nbClick == 1) { if (count.innerHTML == 1){ clearInterval(interval); count.innerHTML = 2; } else{ setInterval(next,300); count.innerHTML = 1; } } } clicked(); } } le changement de chiffre s'opere bien mais pas le clearInterval. Quelqu'un à une solution à proposer?

[@WeFormYou]

Bonjour Aurélien Le setInterval doit etre stocké dans une variable globale pour pouvoir le clear plus tard. 1. Définir la variable globalement : let interval; 2. Stocker l’intervalle dans cette variable : interval = setInterval(next,300); 3. Supprimer l’intervalle pour l’arrêter : clearInterval(interval); Pour ce qui est du code je vois bien la logique et il doit s'en doute fonctionner mais je le trouve très complexe. Quelques explications : - La variable nbClick ne sert pas puisque elle permet de rentrer dans un SI qui sera par définition toujours vrai. - La fonction clicked devrait être définie au niveau global pour pouvoir s'en resservir quand on clic sur les boutons je suppose ? - Pour le coté performance on pourrait stocker le fait que la vidéo soit en cour de lecture ou non dans une variable booléenne globale en JS, plutôt que de lui faire écrire et lire un chiffre depuis le HTML (ce qui implique beaucoup d'actions de la part du navigateur). J’espère être assez explicite 😄 ... C'est super de voir que la formation donne envie d'aller plus loin en tout cas !

[@aurelienamadon7684]

@@WeFormYou merci pour le retour maintenant ça fonctionne il me manquait simplement l'etape 2 dans la function. Je me doute bien qu'il doit y avoir un procédé plus simple mais je n'ai pas trouvé comment vérifier la lecture du diapo,je n'ai trouvé que des choses faites pour la video avec la methode play et pause. Peut être un futur projet? Je n'ai pas pensé a me servir de la fonction clicked pour les boutons,je voulais simplement controler le play et pause via la spacebar comme pour les lecteurs video. C'est pour cela que j'ai mis en place ce scenario me permettant d'avoir une condition fausse.Au départ je voulais récuperer le nombre de fois qu'on appuyait sur la space bar,pas réussi.

[@teamchicken1353]

@@aurelienamadon7684 tu pourrais utiliser des key press event

[@yayoo67]

super cour merci :)

[@last_name935]

Enorme merci. Mais t'as pas fait le bouton lecture @aléatoire

[@imedjlassimoussa1100]

Salut Gaël De mon avis c était mieux de debugue à chaque fois que le code ne marche pas juste pour montrer à tes élèves que le débug c'est la vie 😀

[@aurelienamadon7684]

Bonjour,tout d'abord félicitation pour ces vidéos gratuite de qualité qui valent largement des formations payante. Je ne trouve pas le moyen de vous faire un retour globale de cette formation,difficulté perçue.... Alors ma question pour ce tuto: imaginons que l'on souhaite mettre une class active sur la premiere img et ajouté la class hidden en js. Pourquoi ce code retourne une erreur? const images = document.getElementsByTagName('img'); images.classList.add('hidden'); images.classList is undefined... j'ai essayé aussi images[ ].classList.add('hidden'); Ce qui voudrait dire que soit il faut obligatoirement passé par une boucle ou alors créer une ligne par index souhaité,c'est ça?

[@WeFormYou]

Bonjour, Je n'ai pas besoin de donner la réponse du coup ! 😀 ... On doit obligatoirement passer par une boucle. Car getElementsByTagName('img') récupère toutes les img de la page et nous donne un tableau en retour (Meme si il n'y avait qu'une seule image dans la page). Il nous faut donc parcourir ce tableau afin d'ajouter la class à chaque élément souhaité.