From 34fc78ad15bc5b4388608e4ce61db95123dbb65f Mon Sep 17 00:00:00 2001 From: electro positron Date: Sat, 9 Nov 2024 02:38:20 +0100 Subject: [PATCH] =?UTF-8?q?cr=C3=A9ation=20post-it=20fonctionnel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/index.html | 8 +++++- app/script.js | 76 +++++++++++++++++++++++++++++++++++++++++++++----- app/style.css | 36 ++++++++++++++++++++++-- 3 files changed, 110 insertions(+), 10 deletions(-) diff --git a/app/index.html b/app/index.html index a0093ff..9e58851 100644 --- a/app/index.html +++ b/app/index.html @@ -7,7 +7,7 @@ -
+
@@ -16,5 +16,11 @@
+ + +
+ + +
\ No newline at end of file diff --git a/app/script.js b/app/script.js index c09b983..ef2b337 100644 --- a/app/script.js +++ b/app/script.js @@ -1,37 +1,99 @@ +//-----BACKEND----- + +//création du tableau qui contiendra toutes les tâches +var tableau_taches = []; + +function tri_duree_descend(table) { + //De base, la fonction sort() transforme les éléments en chaîne + //de caractère pour les comparer + //On force la comparaison sur des chiffres avec la syntaxe + //"function comparaison" + table.sort((b,a) => { + return a.duree - b.duree + }); + return table; +} + + //définition de l'objet tâche class Tache { - //PROPRIETES DE LA CLASSE //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 date_debut; //Date de fin - date date_fin; //Tache à faire avant la tâche courante - instance de classe + //TODO implémenter cette fonctionnalité est_bloque_par; //Priorité - integer priorite = 0; - //INITIALISATION DE LA CLASSE //l'utilisateur définit le nom de la tâche et sa durée constructor(nom, duree) { this.nom = nom; this.duree = duree; } - - //COMPARAISON DES TACHES - //appellé à la création d'une nouvelle tâche - } +//-----FRONTEND----- + +//ajoute le contenu du tableau dans des div correspondant chacune +//à un postit +function update_postit(table) { + + //identifie la div qui contient les tâches + var element = document.getElementById("conteneur"); + //supprime les post-it existants de la balise div id "conteneur" + while (element.firstChild){ + element.removeChild(element.firstChild); + } + //parcours le tableau de tâches et récupère les variables + var longueur = table.length; + for (let i = 0; i < longueur; i++ ) { + let displayname = table[i].nom; + let displayduration = table[i].duree; + //crée une div qui contient les éléments de la tâche + let balise = document.createElement("div"); + balise.classList.add("tache"); + //titre de la tâche (son nom) + let titre = document.createElement("h3"); + let textetitre = document.createTextNode(displayname); + titre.appendChild(textetitre); + titre.classList.add("titre_tache"); + + //corps de la tâche + let corps = document.createElement("p"); + let textecorps = document.createTextNode("durée " + displayduration + "h"); + corps.appendChild(textecorps); + corps.classList.add("corps_tache") + + //on ajoute le contenu au div de la tâche + balise.appendChild(titre); + balise.appendChild(corps); + //ajoute la div de la tâche au conteneur + element.appendChild(balise); + } +} + +//-----INTERRACTIVITÉ------ + function createtask(){ //on récupère l'input de l'utilisateur.ice let taskname = document.getElementById("nom").value; let taskduration = document.getElementById("duree").value; //on instancie une tâche avec les valeurs de l'utilisateur.ice let tache = new Tache(taskname, taskduration); - alert(tache.nom); + //on ajoute la nouvelle tâche à la fin au tableau de tâches + tableau_taches.push(tache); + //appel de la fonction qui trie les tâches dans le tableau + // de la plus longue à la plus courte + tri_duree_descend(tableau_taches); + //update de l'affichage de la liste des tâches en HTML + update_postit(tableau_taches); + } \ No newline at end of file diff --git a/app/style.css b/app/style.css index cda5ddf..974fd9f 100644 --- a/app/style.css +++ b/app/style.css @@ -1,8 +1,40 @@ 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-size: 500px; + font-weight: 300; } -.papier{ - background-color: whitesmoke; +#conteneur{ + margin: 20px; +} + +#commandes{ + background-color: rgba(255, 255, 255, 0.171); + +} + +.tache{ + display: flex; + margin:10px; + flex-direction: column; + align-items: center; + width: 200px; + height : 100px; + background-color: gold; + box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; +} + +.titre_tache{ + margin:0; + padding-top:10px; + text-transform:uppercase; + font-weight: 400; + text-align: center; + +} + +.corps.tache{ + margin: 0; + } \ No newline at end of file