electropositron/pangloss
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

création post-it fonctionnel

Browse source
This commit is contained in:
electro positron 2024-11-09 02:38:20 +01:00
parent 7f3a3178bd
commit 34fc78ad15
3 changed files with 110 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/index.html
View file

@ -7,7 +7,7 @@
<script src="script.js"></script> <script src="script.js"></script>
</head> </head>
<body> <body>
<div> <div id="commandes">
<label for="nom">Nom de la tâche</label> <label for="nom">Nom de la tâche</label>
<input type="text" id="nom" name ="nom"/> <input type="text" id="nom" name ="nom"/>
</div> </div>
@ -16,5 +16,11 @@
<input type="number" id="duree" name ="duree"/> <input type="number" id="duree" name ="duree"/>
</div> </div>
<button type="button" onclick="createtask()">Créer</button> <button type="button" onclick="createtask()">Créer</button>
<div id = "conteneur">
<!-- Les tâches sont ajoutées ici via javascript -->
</div>
</body> </body>
</html> </html>

76
app/script.js
View file

@ -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 //définition de l'objet tâche
class Tache { class Tache {
//PROPRIETES DE LA CLASSE
//Nom de la tâche - chaîne de caractères //Nom de la tâche - chaîne de caractères
nom = "default"; nom = "default";
//Durée en heures - float //Durée en heures - float
duree = 0.0; duree = 0.0;
//Date de début - date //Date de début - date
//par défaut, c'est la date du jour
date_debut; date_debut;
//Date de fin - date //Date de fin - date
date_fin; date_fin;
//Tache à faire avant la tâche courante - instance de classe //Tache à faire avant la tâche courante - instance de classe
//TODO implémenter cette fonctionnalité
est_bloque_par; est_bloque_par;
//Priorité - integer //Priorité - integer
priorite = 0; priorite = 0;
//INITIALISATION DE LA CLASSE
//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
constructor(nom, duree) { constructor(nom, duree) {
this.nom = nom; this.nom = nom;
this.duree = duree; 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(){ function createtask(){
//on récupère l'input de l'utilisateur.ice //on récupère l'input de l'utilisateur.ice
let taskname = document.getElementById("nom").value; let taskname = document.getElementById("nom").value;
let taskduration = document.getElementById("duree").value; let taskduration = document.getElementById("duree").value;
//on instancie une tâche avec les valeurs de l'utilisateur.ice //on instancie une tâche avec les valeurs de l'utilisateur.ice
let tache = new Tache(taskname, taskduration); 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);
} }

36
app/style.css
View file

@ -1,8 +1,40 @@
body{ 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(https://t3.ftcdn.net/jpg/09/18/51/88/360_F_918518811_e0Wh732g7nIS9hsyi7ox9wWhguruEEgx.jpg);
background-size: 500px; background-size: 500px;
font-weight: 300;
} }
.papier{ #conteneur{
background-color: whitesmoke; 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;
} }