118 lines
4.0 KiB
JavaScript
118 lines
4.0 KiB
JavaScript
// Fonction pour ajouter une tâche
|
|
function ajoutTache() {
|
|
// Récupérer la valeur de la tâche entrée
|
|
var tache = document.getElementById("tacheInput").value;
|
|
|
|
// Vérifier si la tâche n'est pas vide
|
|
if (tache === "") {
|
|
alert("Veuillez saisir une tâche.");
|
|
return;
|
|
}
|
|
|
|
// Créer un élément <div> pour la nouvelle tâche
|
|
var tacheDiv = document.createElement("div");
|
|
tacheDiv.className = "task"; //mise en forme css
|
|
|
|
// Créer une checkbox pour marquer la tâche comme terminée
|
|
var checkbox = document.createElement("input");
|
|
checkbox.type = "checkbox";
|
|
checkbox.onchange = function () {
|
|
toggleTaskCompletion(tacheDiv, checkbox);
|
|
};
|
|
tacheDiv.appendChild(checkbox);
|
|
|
|
// Créer un élément <span> pour afficher la tâche
|
|
var tacheSpan = document.createElement("span");
|
|
tacheSpan.textContent = tache; //récupère texte saisi dans la zone de texte tacheInput
|
|
tacheDiv.appendChild(tacheSpan); //pour afficher à la suite
|
|
|
|
// Ajouter un bouton "Supprimer"
|
|
var suppButton = document.createElement("button");
|
|
suppButton.textContent = "Supprimer";
|
|
suppButton.className = "supp";
|
|
suppButton.onclick = suppTache; // Associer la fonction de suppression
|
|
tacheDiv.appendChild(suppButton);
|
|
|
|
// Ajouter un bouton "Modifier"
|
|
var modifButton = document.createElement("button");
|
|
modifButton.textContent = "Modifier";
|
|
modifButton.className = "modif";
|
|
modifButton.onclick = function () {
|
|
modifTache(tacheDiv, tacheSpan);
|
|
};
|
|
tacheDiv.appendChild(modifButton);
|
|
|
|
// Ajouter la tâche au conteneur
|
|
document.getElementById("listeTache").appendChild(tacheDiv);
|
|
|
|
// Réinitialiser le champ de saisie
|
|
document.getElementById("tacheInput").value = "";
|
|
}
|
|
|
|
// Fonction pour supprimer une tâche
|
|
function suppTache() {
|
|
var tacheDiv = this.parentElement;
|
|
tacheDiv.remove();
|
|
}
|
|
|
|
// Fonction pour marquer une tâche comme terminée (avec la checkbox)
|
|
function toggleTaskCompletion(tacheDiv, checkbox) {
|
|
if (checkbox.checked) {
|
|
tacheDiv.classList.add("completed");
|
|
} else {
|
|
tacheDiv.classList.remove("completed");
|
|
}
|
|
}
|
|
|
|
// Fonction pour modifier une tâche
|
|
function modifTache(tacheDiv, tacheSpan) {
|
|
// Créer un champ de texte pour modifier la tâche
|
|
var modifInput = document.createElement("input");
|
|
modifInput.type = "text";
|
|
modifInput.value = tacheSpan.textContent;
|
|
|
|
// Créer un bouton "Enregistrer"
|
|
var saveButton = document.createElement("button");
|
|
saveButton.textContent = "Enregistrer";
|
|
saveButton.className = "save";
|
|
|
|
// Remplacer le texte et les boutons actuels par le champ de texte et le bouton "Enregistrer"
|
|
tacheDiv.innerHTML = ""; // Supprime tout le contenu de la tâche
|
|
tacheDiv.appendChild(modifInput);
|
|
tacheDiv.appendChild(saveButton);
|
|
|
|
// Fonction pour enregistrer la modification
|
|
saveButton.onclick = function () {
|
|
if (modifInput.value === "") {
|
|
alert("Veuillez saisir une tâche valide.");
|
|
return;
|
|
}
|
|
tacheSpan.textContent = modifInput.value; // Mettre à jour le texte de la tâche
|
|
tacheDiv.innerHTML = ""; // Vider l'élément <div> à nouveau
|
|
tacheDiv.appendChild(checkbox); // Restaurer la checkbox
|
|
tacheDiv.appendChild(tacheSpan); // Restaurer la tâche modifiée
|
|
tacheDiv.appendChild(suppButton); // Restaurer le bouton "Supprimer"
|
|
tacheDiv.appendChild(modifButton); // Restaurer le bouton "Modifier"
|
|
};
|
|
|
|
// Re-créer les boutons de suppression et de modification après la sauvegarde
|
|
var suppButton = document.createElement("button");
|
|
suppButton.textContent = "Supprimer";
|
|
suppButton.className = "supp";
|
|
suppButton.onclick = suppTache;
|
|
|
|
var modifButton = document.createElement("button");
|
|
modifButton.textContent = "Modifier";
|
|
modifButton.className = "modif";
|
|
modifButton.onclick = function () {
|
|
modifTache(tacheDiv, tacheSpan);
|
|
};
|
|
|
|
// Restaurer la checkbox après modification
|
|
var checkbox = document.createElement("input");
|
|
checkbox.type = "checkbox";
|
|
checkbox.onchange = function () {
|
|
toggleTaskCompletion(tacheDiv, checkbox);
|
|
};
|
|
}
|