IONIC Section 4 - 4.15 Terminer la logique JavaScript de base

Cliquez içi pour plus de vidéos disponibles sur notre chaine youtube !

Bonjour à tous, ainsi, avec les éléments générés dynamiquement, assurons-nous que lorsque nous ajoutons une dépense, nous effaçons également l’entrée et faisons en sorte que le bouton « effacer » fonctionne. Pour cela, nous allons ajouter une nouvelle fonction dans notre fichier JS, où on va créer une nouvelle constante que je nommerai « clear » et qui sera une fonction dans celle-ci. Donc on saisit « const clear = () => {ReasonInput.value = ;amountInput.value = ;};». Donc concrètement on a défini la valeur avec la méthode « .value » égale à une chaîne vide et identique pour toute entrée de montant et qui les efface fondamentalement, cela supprime toute entrée saisie par l’utilisateur. Cette fonction « clear » doit maintenant être appelée ici, après que nous ayons ajouté notre élément « expensesList », on saisit « clear() » afin que nous puissions faire appelle à cette fonction. On souhaite le faire également lorsque nous cliquons sur le bouton d’annulation. Donc on ajoute notre « cancelBtn.addEventListener(‘click’, clear()); » donc qui portera un évènement clic, lorsque ce bouton sera enfoncé, je pourrai simplement pointer sur « effacer » avec notre « clear ». On va apporter une référence à notre fonction pour que cela soit exécuté de manière dynamique, lorsque ce clic se produit, il exécutera cette fonction pour nous. Donc on sauvegarde notre progression, on retourne sur notre application, et on entre « facture » pour « 15 » et on clique sur « effacer », cela est bien effacer. Parfait, maintenant, assurons-nous d’obtenir une dépense totale en bas de notre application, et pour cela dans notre code HTML, nous pouvons ajouter une nouvelle rangée en dessous de la dernière avec « ion-col » en décrivant votre somme à cet endroit. On peut ajouter tout simplement un paragraphe avec la balise «p», dans lequel nous écrivons « Dépenses totales : » et on va insérer un «span» que nous allons utiliser comme crochet pour rendre nos dépenses totales. On va lui renseigner un id=« total-expenses » afin que nous puissions facilement y accéder à partir de notre code JavaScript. Donc on revient sur notre fichier JS, et on va déclarer « const totalExpensesOutput = document.querySelector (‘#total-expenses’); voilà notre sortie de dépenses totale doit maintenant être mise à jour avec chaque élément ajouté et, par conséquent, je vais ajouter une nouvelle variable avec les dépenses totales. Pour ce faire, on va déclarer « let totalExpenses= 0; » car au départ nous n’avons aucune dépense. Avec chaque élément que nous ajoutons ici, on peut définir les dépenses totales égales à l’ancienne valeur avec le raccourci du signe « += « ce qui donne « totalExpenses += +enteredAmount; » Le « + » juste devant « enteredAmount » sert à convertir cette chaîne, par défaut, pour que toute valeur extraite de notre élément d’insertion donc « input », passe de string, donc de chaine de caractère, en Number donc nombre. Qui est ensuite ajoutée au total des dépenses que nous avions auparavant ce qui permet de mettre à jour les dépenses totales. Et donc après avoir mis à jour, on peut définir ici le contenu textuel de la production totale de dépenses, de manière à ce que celui-ci ne soit pas uniquement stocké en mémoire JavaScript mais également écrit dans le DOM. Ce qui nous donne totalExpensesOutput.textContent = totalExpenses; Donc on recharge notre application, on saisit une facture de 6 euros, puis je suis allé au cinéma ce qui m’a couté 8 euros, et nous avons notre dépense totale qui s’affiche juste en dessous. C’est parfait, maintenant, le style peut être amélioré, en particulier sur les grands écrans, et c’est ce que nous allons voir ensemble dans la prochaine vidéo.