Exercice : Liste de courses

On peut aussi réaliser une interface dynamique permettant à l'utiliser de gérer une liste de course qui sera stockée dans ses cookies. Pour cela on peut créer un tableau vide en HTML :

<table>
    <thead>
        <tr>
            <th>Produit</th>
            <th>Prix</th>
            <th>Quantité</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

On peut ensuite ajouter des balises input pour rentrer le nom d'un produit, son prix et sa quantité, ainsi qu'un bouton "ajouter" pour l'ajouter à la liste, ce qui l'ajoutera à nos cookies et ajoutera sa ligne dans le tableau, pour que l'utilisateur puisse visualiser sa liste de courses. Il y a énormément de moyens de faire cela en JavaScript, dans l'exemple suivant, nous allons le faire de la manière la plus intelligente, c'est à dire en créant une fonction d'actualisation du tableau en fonction de la valeur du cookie, au lieu de modifier le tableau directement à la pression du bouton d'ajout. Ainsi, il n'y aura jamais d'erreur de représentation du cookie dans le tableau HTML. Notre HTML devient alors :

<table>
    <thead>
        <tr>
            <th>Produit</th>
            <th>Prix</th>
            <th>Quantité</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<input type="text" name="produit" value=""/>
<input type="number" step=".01" name="prix" value=""/>
<input type="number" name="quantite" value=""/>
<button id="ajouter" type="button">Ajouter</button>
<button id="vider" type="button">Vider</button>

Voici un exemple de code JavaScript pour réaliser cette liste de course dynamique. (On utilisera des fonctions d'ajout et de suppression de cookies qui ont été codées auparavant)

//On créé la fonction de synchronisation du tableau HTML 
//avec le cookie
function syncTable(){
    //on récupère le tableau HTML
    var htmlTab = document.getElementsByTagName("table")[0];
    //on récupère le cookie qui est une string en JSON sous forme de tableau JS.
    var liste = JSON.parse(getCookie("liste"));
    //on vide le tableau HTML
    htmlTab.querySelector("tbody").innerHTML = "";
    //on parcourt la liste en cookie pour ajouter les lignes au tableau HTML
    for(var i = 0; i < liste.length; i++){
        //on créé l'élément de notre future balise tr
        var ligne = document.createElement("tr");
        //on récupère la liste dans le cookie
        if(getCookie("liste") == "" || getCookie("liste") == undefined || getCookie("liste") == null){
    	    //si le cookie n'existe pas encore, alors on prend un tableau vide.    
            var liste = [];
        }
        else{
    	    var liste = JSON.parse(getCookie("liste"));
        }
        //on ajoute nos td
        var produit = document.createElement("td");
        produit.innerHTML = liste[i]["produit"];
        var prix = document.createElement("td");
        prix.innerHTML = liste[i]["prix"];
        var quantite = document.createElement("td");
        quantite.innerHTML = liste[i]["quantite"];
        ligne.appendChild(produit);
        ligne.appendChild(prix);
        ligne.appendChild(quantite);
        //on ajoute ensuite notre ligne tr dans le DOM
        htmlTab.querySelector("tbody").appendChild(ligne);
    }
}

//On écoute les clics sur le bouton d'ajout et on ajoute au cookie l'élément
document.getElementById("ajouter").addEventListener("click", function(){
    //on récupères les informations du produit indiqués dans les input
    var produit = document.getElementsByName("produit")[0].value;
    var prix = document.getElementsByName("prix")[0].value;
    var quantite = document.getElementsByName("quantite")[0].value;
    //on créé le tableau associatif que l'on va ajouter à la suite du tableau
    //du cookie.
    var elem = new Object();
    elem["produit"] = produit;
    elem["prix"] = prix;
    elem["quantite"] = quantite;
    //on récupère le tableau du cookie
    if(getCookie("liste") == "" || getCookie("liste") == undefined
     || getCookie("liste") == null){
         //si le cookie n'existe pas encore, alors on prend un tableau vide.
    	var liste = [];
    }
    else{
    	var liste = JSON.parse(getCookie("liste"));
    }
    //on ajoute le produit dans le tableau
    liste.push(elem);
    //on update le cookie qui restera 365 jours, parce que pourquoi pas ?
    setCookie("liste", JSON.stringify(liste), 365);
    //On actualise notre tableau HTML pour l'utilisateur
    syncTable();
});
//on écoute le clic pour vider la liste
document.getElementById("vider").addEventListener("click", function(){
    //on vide la liste
    setCookie("liste", "[]", 365);
    //On actualise notre tableau HTML pour l'utilisateur
    syncTable();
});
//on affiche le tableau pour le premier chargement de la page.
syncTable();

Contrairement à l'exercice précédent, celui-ci peut être copié collé tel quel dans un fichier HTML, il fonctionnera parfaitement.