ikramagic / interactive_js_project

We're moonwalking through the world of the Document Object Model (DOM), hand-in-glove with our smooth operator, JavaScript. What's our stage? A pre-built HTML page. And here's the thriller - our job is to transform it into an interactive eruption. We’re going to use JavaScript to hit the beat and make this page so interactive, it defies gravity.

Just... read it, read it, read it, read it... ♪

Introduction : mise en pratique sur Javascript

Ce repository contient des exercices JavaScript et des exemples de manipulation du DOM pour développer des fonctionnalités spécifiques sur une page HTML.

Fonctionnalités implémentées :

1. Click & Count

• Utilisation de addEventListener pour détecter le clic.
• Quand tu cliques sur le footer, un message avec le décompte s'affiche en console.

Mais dis donc Miki, que fais-tu exactement ?

---> On séléctionne le footer.
---> On initie le compteur de clics.
---> On incrémente à chaque event (click).
---> On affiche le résultat en console (console.log).

2. Toggle Toggle Toggle by Json Decodo

• Utilisation de classList.toggle pour le toggle.
• Quand tu cliques sur le menu hamburger (les trois lignes), la classe "collapse" est ajoutée ou supprimée de l'élément avec l'ID "navbarHeader".

Mais dis donc Miki, que fait .toggle exactement ?

navHead a la classe ("collapse") ?
---> classe supprimée (= menu caché)
navHead n'a pas la classe ("collapse") ?
---> classe ajoutée (= menu affiché)

3. REDit button

• Utilisation de style.color pour changer la couleur du texte.
• Quand tu cliques sur le bouton edit de la première card, il devient et reste rouge.

Mais dis donc Miki, que fais-tu exactement ?

---> On séléctionne la card et le bouton correspondant avec leurs classes et index respectifs
---> On lie l'event click sur le editBtn à une modification de la couleur du texte sur firstCard
---> Pas de possibilité d'annuler le changement car pas de conditions comme ici bas (if/else)

4. Green Green Green Washing!

• Utilisation de style.color et une alternance soumise à condition.
• Quand tu cliques sur le bouton edit de la deuxième card, il devient vert, si tu recliques, il reprend sa couleur d'origine.

Mais dis donc Miki, que fais-tu exactement ?

---> Même démarche qu'avant avec index[] pour la selection
--> On lie l'event click a une fonction qui va s'executer au click (le changement de couleur)

Mais dis donc Miki, pourquoi un "" vide ?

---> Une fois event click :
---> Verifie si la couleur est "green" ?
---> Si oui, ("") réinitialise la couleur du texte à la couleur par défaut (du CSS ou du browser)
---> Si non, définit la couleur en "green"

5. Boot-Strip

• Utilisation de addEventListener avec dblclick.
• Au double-clic sur la navbar, le lien vers Bootstrap est désactivé ou réactivé.

Mais dis donc Miki, que fais-tu exactement ?

---> Je sélectionne le lien de mon Bootstrap par son attribut stylesheet.
---> Je sélectionne la zone où je souhaite que l'action s'effectue (le header), et je la stocke dans une variable.
---> On applique l'eventListener sur un doubleclick sur le header.
---> Si bootstraplink existe, alors...
---> Bascule l'état du lien entre activé et désactivé avec bootstrapLink.disabled = !bootstrapLink.disabled;

6. Cards kaléidoscopiques

• Utilisation de style.transform, style.transition, et style.opacity avec mouseover et mouseout
• En passant le curseur de la souris sur le bouton view, la taille des cards et des images diminue (20% pour les cards, 80% pour les images).
• Un effet de transition est appliqué, et le texte des cartes disparaît et réapparaît également.

Mais dis donc Miki, que fais-tu exactement ?

---> Sélectionne tous les boutons avec la classe "btn-success", les stocke dans la variable.
---> Pareil, mais pour les cards.
---> On lance une boucle, avec button et index comme paramètres.

On écoutera l'event (survol du curseur) et selon le mouvement :

card [élément sélectionné par index]	action [mouseover]
Modifications	- La carte sera redimensionnée à 80%. - L'image sera redimensionnée à 20%. - Une transition d'animation d'une durée de 0.5s sera appliquée. - L'opacité du texte sera réduite à 0, le rendant invisible.

card [élément sélectionné par index]	action [mouseout]
Annulations	- La carte reprendra sa taille d'origine (100%). - L'image reprendra sa taille d'origine. - L'opacité du texte sera rétablie à 1, le rendant visible.

---

C'est tout. Oui, je me suis amusée à le faire. Non, je ne suis pas fan de Michael Jackson.