Apprendre les bases du Javascript

Tout d'abord, on commence par créer deux variables avec let, qui selectionnent la liste et le bouton :

let tableau = document.querySelector('ul');
let button = document.querySelector('button');

Ici le querySelector permet de retourner le premier élément qui correspond à l'objet correspondant.

button.addEventListener("click", function(){

La méthode addEventListener permet de cibler un élément auquel on y ajoute un déclencheur et une fonction. Ici, le déclencheur est click et la fonction est directement définie.

    tableau.classList.toggle("click");
})

A l'intérieur de la fonction, on sélectionne donc la variable tableau qu'on a définie auparavant, puis on y ajoute classList, qui retourne les attributs de classe de l'éléments sélectionné, ainsi que, toggle qui fait basculer entre vrai ou faux l'existence de la classe.
Voici donc un exemple ci-dessous:

Tout d'abord, on commence par créer une variable avec let, qui selectionne les blocs :

let box = document.querySelectorAll('.random');

Ici le querySelectorAll permet de retourner tout les éléments qui correspondent à l'objet correspondant.

box.forEach(function(item){

La méthode forEach permet permet d'exécuter une fonction donnée sur chaque élément de box.

    item.addEventListener("mouseenter", function(){
        item.classList.add("over");
        

On définit donc la fonction item qui grâce au déclencheur mouseenter, se déclenchera à chaque fois que la souris rentrera dans la zone de l'élément. Ensuite, classList.add permet d'ajouter la classe citée à l'élément.

        item.addEventListener("mouseout", function(){
            item.classList.remove('over');
        })
    })
})

Enfin, on définit la fonction qui a pour déclencheur mouseout, se déclenchera lorsque la souris quittera la zone de l'élément, puis, grâce à classList.remove, la classe précédemment ajoutée est retirée.
Voici donc un exemple ci-dessous:

Tout d'abord, on commence par créer deux variables avec let, qui selectionnent le titre et le sous-titre :

let title = document.querySelector('h1');
let subtitle = document.querySelector('h2');

Ensuite on définit la méthode addEventListener avec comme déclencheur click :

title.addEventListener('click', function(){
    subtitle.insertAdjacentElement('afterend', title);

Ici, insertAdjacentElement permet d'inserer le title après le subtitle, afterend signifiant après .

    subtitle.addEventListener("click", function(){
        title.insertAdjacentElement('afterend', subtitle)
    })
})

Enfin, en inversant title et subtitle, en cliquant sur le subtitle, on retrouve la forme de base.
Voici donc un exemple ci-dessous: