app/script.js

@@ -17,13 +17,13 @@ function tri_duree_descend(table) {
 
 //définition de l'objet tâche
 class Tache {
-
+        //Identifiant de la tâche - integer
+        identifiant = 0;
         //Nom de la tâche - chaîne de caractères
         nom = "default";
         //Durée en heures - float
         duree = 0.0;
         //Date de début - date
-        //par défaut, c'est la date du jour
         datedebut;
         //Date de fin - date
         datefin;
@@ -33,12 +33,14 @@ class Tache {
         //Priorité - integer
         priorite = 0;
 
-    //l'utilisateur définit le nom de la tâche et sa durée
+    //l'utilisateur définit le nom de la tâche et sa durée + 
+    //crée un identifiant unique aléatoire entre 0 et 9999
     constructor(nom, duree, datedebut, datefin) {
         this.nom = nom;
         this.duree = duree;
         this.datedebut = datedebut;
         this.datefin = datefin;
+        this.identifiant = Math.floor(Math.random()*10000);
     }
 
     //fonction qui ajoute une date de début ou de fin en fonction des inputs disponibles
@@ -64,6 +66,7 @@ function update_postit(table) {
     //parcours le tableau de tâches et récupère les variables
     var longueur = table.length;
     for (let i = 0; i < longueur; i++ ) {
+        let displayid = table[i].identifiant;
         let displayname = table[i].nom;
         let displayduration = table[i].duree;    
         let displaystartdate = table[i].datedebut;    
@@ -79,6 +82,7 @@ function update_postit(table) {
             titre.classList.add("titre_tache");
             //on ajoute le titre à la page HTML dans la div conteneur
             balise.appendChild(titre);
+
             //puis on rajoute un séparateur
             let separator = document.createElement("hr");
             balise.appendChild(separator);
@@ -99,7 +103,17 @@ function update_postit(table) {
                 paragraph.classList.add("corps_tache")
                 //ajoute l'élément au corps de texte de la tâche
                 balise.appendChild(paragraph);
-            }            
+            }
+
+            // en bas, on ajoute l'îcone de suppression de la tâche
+            let poubelle = document.createElement("img");
+            poubelle.src="ico/poubelle.png";
+            poubelle.classList.add("poubelle");
+            poubelle.addEventListener('click',remove_task);
+            balise.appendChild(poubelle);
+            
+        //ajout l'identifiant unique comme id à la div de la tâche
+        element.setAttribute('id', displayid);
 
         //ajoute la div de la tâche au conteneur
         element.appendChild(balise);
@@ -132,4 +146,13 @@ function createtask(){
     //update de l'affichage de la liste des tâches en HTML
     update_postit(tableau_taches);
     
+}
+// fonction de suppression de la tâche courante
+function remove_task(id) {
+    //trouve l'index de la tâche du tableau grâce à son id
+    let taskindex = tableau_taches.findIndex(item => item.identifiant === id);
+    //retire la tâche du tableau des tâches
+    tableau_taches.splice(taskindex, 1);
+    //on update l'affichage
+    update_postit(tableau_taches);
 }

app/style.css

@@ -6,7 +6,7 @@
 
 body{
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-    background-image: url(https://t3.ftcdn.net/jpg/09/18/51/88/360_F_918518811_e0Wh732g7nIS9hsyi7ox9wWhguruEEgx.jpg);
+    background-image: url('img/liege.jpg');
     background-size: 500px;
     font-weight: 400;
     display: flex;
@@ -43,7 +43,7 @@ nav{
     min-height: 100vh;
     text-align: center;
     padding:15px;
-    background-image: url('https://img.freepik.com/free-photo/yellow-sponge-rubber-texture-background_1373-524.jpg?semt=ais_hybrid');
+    background-image: url('img/nav.avif');
     background-size: 300px;
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 
@@ -118,6 +118,15 @@ button:hover{
     -o-transform: rotate(2deg);
     -ms-transform: rotate(2deg);
     transform: rotate(2deg);
+    transition: all 300ms;
+}
+
+.tache:hover{
+    rotate:(0deg);
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
 }
 
 .titre_tache{
@@ -131,4 +140,15 @@ button:hover{
     margin: 0;
     padding: 5px;
 
+}
+
+.poubelle{
+    width: 20px;
+    opacity: 50%;
+    transition: all 500ms;
+    margin-top: 5px;
+}
+
+.poubelle:hover{
+    opacity: 90%;
 }