création post-it fonctionnel
This commit is contained in:
parent
7f3a3178bd
commit
34fc78ad15
|
|
@ -7,7 +7,7 @@
|
|||
<script src="script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<div id="commandes">
|
||||
<label for="nom">Nom de la tâche</label>
|
||||
<input type="text" id="nom" name ="nom"/>
|
||||
</div>
|
||||
|
|
@ -16,5 +16,11 @@
|
|||
<input type="number" id="duree" name ="duree"/>
|
||||
</div>
|
||||
<button type="button" onclick="createtask()">Créer</button>
|
||||
|
||||
|
||||
<div id = "conteneur">
|
||||
<!-- Les tâches sont ajoutées ici via javascript -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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);
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
||||
}
|
||||
Loading…
Reference in a new issue