diff --git a/app/index.html b/app/index.html
index e6fa52b..2f95b67 100644
--- a/app/index.html
+++ b/app/index.html
@@ -14,8 +14,19 @@
               <hr>
             <label for="nom">Nom de la tâche</label>
             <input type="text" id="nom" name ="nom"/>
+
             <label for="duree">Durée de la tâche (en h)</label>
             <input type="number" id="duree" name ="duree"/>
+
+            <label for="datedebut">Date de début</label>
+            <input type="date" id="datedebut" name ="datedebut"/>
+
+            <label for="datefin">Date de fin</label>
+            <input type="date" id="datefin" name ="datefin"/>
+
+            <div class="separateur"></div>
+
+
             <button type="button" onclick="createtask()">Créer</button>
         
         <div class="separateur"></div>
diff --git a/app/script.js b/app/script.js
index ef2b337..41625af 100644
--- a/app/script.js
+++ b/app/script.js
@@ -24,9 +24,9 @@ class Tache {
         duree = 0.0;
         //Date de début - date
         //par défaut, c'est la date du jour
-        date_debut;
+        datedebut;
         //Date de fin - date
-        date_fin;
+        datefin;
         //Tache à faire avant la tâche courante - instance de classe
         //TODO implémenter cette fonctionnalité
         est_bloque_par;
@@ -34,9 +34,18 @@ class Tache {
         priorite = 0;
 
     //l'utilisateur définit le nom de la tâche et sa durée
-    constructor(nom, duree) {
+    constructor(nom, duree, datedebut, datefin) {
         this.nom = nom;
         this.duree = duree;
+        this.datedebut = datedebut;
+        this.datefin = datefin;
+    }
+
+    //fonction qui ajoute une date de début ou de fin en fonction des inputs disponibles
+    ajoute_date(debut, fin, duree){
+        if (this.debut != None){
+
+        } 
     }
 }
 
@@ -56,7 +65,10 @@ function update_postit(table) {
     var longueur = table.length;
     for (let i = 0; i < longueur; i++ ) {
         let displayname = table[i].nom;
-        let displayduration = table[i].duree;        
+        let displayduration = table[i].duree;    
+        let displaystartdate = table[i].datedebut;    
+        let displayenddate = table[i].datefin;    
+
         //crée une div qui contient les éléments de la tâche
         let balise = document.createElement("div");
         balise.classList.add("tache");
@@ -65,34 +77,57 @@ function update_postit(table) {
             let textetitre = document.createTextNode(displayname);
             titre.appendChild(textetitre);
             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);
             
             //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")
+            let duree = "durée " + displayduration + "h";
+            let datedebut = "du " + displaystartdate;
+            let datefin = "au " + displayenddate;
+            //liste qui contient les éléments à ajouter
+            var liste = [duree, datedebut, datefin];
+            //boucle de création des élémets à ajouter
+            for (let p = 0; p < liste.length; p++){
+                //ajoute le texte courant
+                let chunck = document.createTextNode(liste[p]);
+                let paragraph = document.createElement("p");
+
+                paragraph.appendChild(chunck);
+                paragraph.classList.add("corps_tache")
+                //ajoute l'élément au corps de texte de la tâche
+                balise.appendChild(paragraph);
+            }            
 
-        //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É------
+//-----INTERACTIVITÉ------
 
 function createtask(){
     //on récupère l'input de l'utilisateur.ice
     let taskname = document.getElementById("nom").value;
     let taskduration = document.getElementById("duree").value;
+    let taskdatedebut = document.getElementById("datedebut").value;
+    let taskdatefin = document.getElementById("datefin").value;
     //on instancie une tâche avec les valeurs de l'utilisateur.ice
-    let tache = new Tache(taskname, taskduration);
+    let tache = new Tache(taskname, taskduration, taskdatedebut, taskdatefin);
     //on ajoute la nouvelle tâche à la fin au tableau de tâches
     tableau_taches.push(tache);
+
+    //on calcule les dates de début et de fin de la tâche en fonction
+    //des inputs envoyés
+    //tache.ajoute_date(taskdatedebut, taskdatefin, taskduration);
+
+    //-----TRI PAR DÉFAUT
     //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);
     
diff --git a/app/style.css b/app/style.css
index b6c5002..5238b6f 100644
--- a/app/style.css
+++ b/app/style.css
@@ -58,7 +58,7 @@ input{
     background-color: lightyellow;
     border: none;
     margin-top: 5px;
-    margin-bottom: 25px;
+    margin-bottom: 5px;
     box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
 }
 
@@ -127,7 +127,8 @@ button:hover{
 
 }
 
-.corps.tache{
+.corps_tache{
     margin: 0;
+    padding: 5px;
 
 }
\ No newline at end of file