Exercice 15 - Flexbox Cheatsheet (Optionnel)

Dans cette exercice on va reproduire la mise en page et la disposition de la section justify-content du site suivant : https://yoksel.github.io/flex-cheatsheet/#section-justify-content

Quand on clique sur un des boutons sous le ligne hypertexte, la valeur de la propriété justify-content va se modifier selon le bouton. Vous pouvez modifier le style d'un élément HTML en Javascript avec la propriété style associé à l'élément et suivi de la propriété css à modifier.

let maDiv = document.querySelector(".madiv");
maDiv.style.justifyContent = "center";

Quand on va cliquer sur le bouton Ajouter un item, on va ajouter un item dans la boite "résultat" à la suite des autres. Sélectionnez l'élément dans lequel vous voulez ajouter l'item, ensuite créer le avec document.createElement() et associez-lui la même classe que les autres items qui s'occupe du formatage. Ensuite ajouter l'élément créé dans l'élément que vous avez sélectionné auparavant avec append().

// madiv est la division qui contient les items
let maDiv = document.querySelector(".madiv");
// les items sont des divs, alors j'en crée une
let newItem = document.createElement("div");
// J'ajoute à cet nouvel item ma classe qui fait le formatage des items
newItem.classList.add("item");
// J'ajoute l'item à la suite des autres
maDiv.append(newItem);

Essayez ensuite d'inscrire dans l'item ajouté le nombre du dernier item avant l'ajout+ 1 (ex dans l'image plus haut si on ajoute un item il portera le texte 5). Une idée pour le faire, allez chercher le dernier item dans la div, il y a un sélecteur css pour le faire. Ensuite allez chercher le texte de cet item, convertissez le en int avec parseInt et additionnez 1. Modifier finalement le texte de nouvel item avec cette valeur.

let conteneur = document.querySelector(".conteneur");
let lastItem = conteneur.querySelector("div:last-child");
let newItem = document.createElement("div");
// lastItem est le dernier item de la div et newItem est l'item qu'on vient de créer
newItem.innerHTML = parseInt(lastItem.innerHTML) + 1;

Quand on clique sur un item, supprimez le du dom avec la fonction remove(). Vous devrez ajouter un événement à tous les items qui appelle une fonction quand on clique sur eux. Vous devrez aussi ajouter ce même événement lors de la création d'un nouvel item.

// Sélection de tous les items par défaut
let listeItems = document.querySelectorAll('.item');
// Lie l'événement clique d'un item à la fonction supprimeItem
listeItems.forEach(item => {
    item.addEventListener('click', supprimeItem)
});

function supprimeItem(e) {
    // e.target représente l'élément qui a lancé l'événement
    e.target.remove();
}

Pour aller plus loin

Amusez-vous à reproduire d'autres propriétés Flexbox en vous inspirant de ce site : https://yoksel.github.io/flex-cheatsheet