Sélectionner les éléments

Lien utile:
1. On utilise ici .querySelector(".clear"), ce qui signifie que l'on sélectionne le premier élement avec la classe clear.
2. Pour sélectionner la date on utilise cette fois .getElementById (id="date") .
3. Idem avec list, qui représente la liste des To-Do.
4. Pour finir on récupère l'input, la saise.

Maintenant que nous avons sélectionné nos élements, nous allons pouvoir agir dynamiquement dessus.

Position

Lien utile:

1. Sélectionner l'élément avec l'id "element".
2. Insérer l'élement avec .insertAdjacentHTML, qui à deux parametres: position et text.
3. Bien lire le dessin est comprendre les différentes positions (beforeend, afterbegin...).

"text"

"text" représente le code html de la To-Do.
Pour résumer on insère un code html (ici text) à une certaine position (beforeend).
Je vous invite à cliquer sur l'image et lire les commentaires pour mieux comprendre le code.

Pas d'inquiétude à la fin tout sera plus claire.

Ajouter un To-Do

1. On a récupéré "list", la div qui contient les To-Do.
2. function addToDo qui prend en paramètre To-Do (input).
3. "text" comme vue avant représente le code html de la To-Do. ( ${toDo} )
4. "position", vue précédement.
5. Insere la ToDo en utilisant .inserAdjacentHTML.
6. Fonction est exécuté avec "drink coffee" en paramètre.

Ajouter un To-Do

Lien utile:

1. On récupere l'input (la To-Do).
2. On écoute (.addEvenListener) les touches pressées (keyup) et plus particulièrement "entrer" (keycode:13).
3. Si entrer est pressée "toDo" = l'input
4. On contrôle si on a une "toDo".
5. Si oui, on ajoute la "toDo".
6. On réinitalise "input" à une phrase vide "".

Dés que qu'une touche est pressée la fonction s'exécute et contrôle si la touche est "entrer", le code continue.

Ajouter un To-Do dans tableau d'objet

Tableau d'objet:
var tableau = [];
var objet = {};
Lien utile:

1. Chaque To-Do est stocké dans LIST.
2. "name" = To-Do (l'input).
3. "id" représente l'index.
4. "done": si true le To-Do est effectué.
5. "trash": si true le To-Do est effacé.

Maintenant que nous avons un tableau LIST, stockons nos objects To-Do.

1. Nous allons ajouter un élément à la fin de la liste avec LIST.push, To-Do est ajouté à LIST.
2. Il reste plus qu'à incrémenter l'id avec "id++".

Au début, j'ai eu du mal à comprendre la LIST: tableau d'object, un conseil prendre le temps.

Actualiser un To-Do

Lien utile:
Les 3 premieres constantes représentent les classes utilisées par Front-Awesome pour gérer les logos (poubelle, cercle, etc).

1. La function addToDo prend en paramètre: toDo, id, done, trash.
2. Si "trash = true" on arrête (return).
3. const DONE = done ? CHECK : UNCHECK;
   Est un opérateur ternaire signifie: condition ? siVrai : siFaux;
4. Cela nous permet de gérer les logo par le biais des classes en utilisant "${}".

Trés ingénieux ce système de classe Font-awesome, parfait pour les logos.

To-Do done.

Lien utile:

1. element.classList retourne la classe de notre élement.
2. La fonction completeToDo prend en paramètre élement, elle est appellé dés que l'on clique sur le cercle.
3. Si élement a pour classe CHECK l'effacer , sinon lui donner la class UNCHECK.
4. Si élement a pour classe UNCHECK l'effacer , sinon lui donner la class CHECK.
5. On utilise .parentNode pour accéder à l' élement parent, puis .querySelector(".text") apour accéder à l'element text et lui donner ou enlever la classe LINE_THROUGH.
6. Enfin il faut actualiser le status de notre To-DO dans notre LIST, mais pour le faire nous devons connaitre son "Id".
7. On utilise la condition ternaire.
   Rappel, une condition ternaire se lit ainsi: condition ? siVrai : siFaux;
   
   LIST[element.id].done ? false : true;
   Nous permet donc actualiser le boolean "done" dans notre "LIST" de To-do.

Génial "classList.toggle" une belle découverte.

Effacer To-Do

Lien utile:

1. On doit accéder à l'élement parent de l'élement parent (le grand parent).
   element.parentNode.parentNode
2. Puis on efface l'élement enfant du grand parent.
   .removeChild(element.parentNode)
3. Enfin rappelez-vous il faut actualiser LIST.
   LIST[element.id].trash = true;
4. Parfait To-Do effacé.

Encore une découverte ".parentNode".

Ciblé

Lien utile: Meme sans bouton il est possible d'écouter les clics.

1. Ecouter les clics sur la list et exécuter la fonction avec "event" comme paramètre.
2. Récupèrer la cible des clics (target) avec "let element".
3. Puis on récupère son job attribute (delete ou complete) avec elementJOB.
4. Si elementJOB = complete, alors exécuter la function completeToDo.
5. Sinon elementJOB = delete, alors exécuter la function removeToDo.

Décidement j'aurai beaucoup appris durant ce projet.

Local Data

Maintenant on doit sauvegarder notre LIST dans la mémoire local.
Lien utile:

1. localStorage.setItem('key', 'value); c'est ainsi que l'on enregistre dans la mémoire local.
2. La méthode JSON.stringify() convertit une valeur JavaScript en chaîne JSON.
3. key = ToDo, JSON.stringify(LIST) = value
4. On utilise localStorage.setItem dès que l'on doit mettre à jour (update) notre LIST.

Ah bon c'est possible ? Bien sur !

Local

Lien utile:

1. .getItem("ToDO") nous permet de récupérer notre liste de To-Do, que l'on assigne à data.
2. Si data n'est pas vide.
3. LIST = JSON.parse(data) permet de récupérer la liste enregistrée.
4. Puis on charge la LIST dans l'interface avec loadToDo(LIST).
5. id=LIST.length ce qui nous permet de prévoir l'id du prochain To-Do.
6. Si data est vide, on initailise LIST vide et l'id = 0.
7. La fonction loadToDo(array){}; fait une loop dans notre table de To-Do (LIST) pour récuperer leurs informations (name, id, done, trash).

Elle va être superbe cette App

local storage

Lien utile:

1. const clear nous permet d'accéder à l'élement de classe "clear" (notre logo).
2. Puis on écoute les clics qui déclenchent la fonction.
3. "localSorage.clear" efface le stockage local.
4. Enfin on recharge la page.

Ne pas oublier de recharger la page.

C'est partie !

Lien utile:

1. dateElement représente l'élement avec l'id "date".
2. "options" stock les options d'affichage de la date.
3. Puis on attribue à "today" la date actuelle.
4. Enfin on modifie la date avec dateElement.innertHTML.
5. Et on lui attribue la valeur de la local.

Pensez à changer: "en-US" en "fr-FR".

Félicitation vous avez suivi ce long tuto.

Prenez donc le temps de comprendre le code, de lire les commentaires.
J'espère que ce tuto vous a été utile.
PS: le projet comporte un ajout l'horloge.

Télécharger le projet Final.

Réaliser un tuto et expliquer du code n'est pas toujours facile. C'est la première fois que je m'essaye à l'exercise soyez indulgent.