Skip to content

Instantly share code, notes, and snippets.

@cba85

cba85/dog.html

Last active September 13, 2024 10:27
Show Gist options
  • Save cba85/51eaff348956de4e7d4a8121ab7c7c98 to your computer and use it in GitHub Desktop.
Save cba85/51eaff348956de4e7d4a8121ab7c7c98 to your computer and use it in GitHub Desktop.
Download ZIP
IPI Toulouse - 2024-2025 - IJVS010
Raw
dog.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/mvp.css">
<script src="dog.js" defer></script>
<style>
.error {
background-color: red;
color: white;
font-weight: bold;
padding: 0.5em;
text-align: center;
display: none;
}
</style>
</head>
<body>
<main>
<section>
<h1>Chiens perdus</h1>
</section>
<section>
<form>
<label for="name">Nom du chien</label>
<input type="text" id="name">
<label for="race">Race</label>
<select id="race">
<option value="" disabled selected>Choisir...</option>
<option value="Bouledogue">Bouledogue</option>
<option value="Malinois">Malinois</option>
<option value="Caniche">Caniche</option>
</select>
<label for="location">Lieu</label>
<input type="text" id="location">
<label for="message">Message</label>
<textarea id="message" rows="7"></textarea>
<div class="error">Tous les champs sont obligatoires</div>
<button type="submit">Ajouter</button>
</form>
</section>
<section id="results"></section>
</main>
</body>
</html>
Raw
dog.js
const form = document.querySelector("form");
// Event listener sur l'envoi du formulaire
form.addEventListener("submit", function (event) {
event.preventDefault();
// Récupérer les valeurs du formulaire
//console.log(this.name);
//console.log(form.name);
//console.log(event.target.name);
//console.log(event.currentTarget.name);
const name = form.name.value.trim();
const race = form.race[form.race.selectedIndex].value;
const location = form.location.value.trim();
const message = form.message.value.trim();
// Gérer les erreurs
if (!name || !race || !location || !message) {
document.querySelector(".error").style.display = "block";
return;
}
document.querySelector(".error").style.display = "none";
// Créer l'élement d'affichage du chien perdu
const asideElement = document.createElement("aside");
const h2Element = document.createElement("h2");
h2Element.textContent = name;
const tableElement = document.createElement("table");
tableElement.innerHTML = `<tbody>
<tr>
<th>Race</th>
<td>${race}</td>
</tr>
<tr>
<th>Lieu</th>
<td>${location}</td>
</tr>
</tbody>`;
const pElement = document.createElement("p");
pElement.textContent = message;
// Ajouter dans le DOM
asideElement.appendChild(h2Element);
asideElement.appendChild(tableElement);
asideElement.appendChild(pElement);
document.querySelector("#results").appendChild(asideElement);
// Vider le formulaire
//form.name.value = "";
//form.location.value = "";
//form.message.value = "";
form.reset();
})
Raw
todolist.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta name="description" content="Todolist">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<script src="todolist.js" defer></script>
<style>
.error {
color: red;
font-weight: bold;
display: none;
}
.empty {
display: none;
}
.delete {
margin-left: 0.5em;
}
#count {
font-weight: bold;
}
li {
list-style: none;
}
li:before {
content: "👉 ";
}
</style>
</head>
<body>
<h1>Todolist JS ✅</h1>
<form>
<label for="task">Task</label>
<input type="text" id="task" autofocus>
<button type="submit">➕ Add</button>
</form>
<p class="error"></p>
<p class="empty">🍻 All tasks done!</p>
<p class="counter"><span id="count">0</span> <span id="count-text">tasks</span></p>
<div id="tasks"></div>
</body>
</html>
Raw
todolist.js
let tasks = [];
// Récuperer la liste ul (via l'id)
const list = document.querySelector("#tasks");
// Singular/plural
function pluralize(string, count) {
if (!count || count > 1) {
return `${string}s`;
}
return string;
}
// Display number of tasks
function updateCountTasks(counter) {
const count = document.querySelector("#count");
count.textContent = counter;
const countText = document.querySelector("#count-text");
countText.textContent = pluralize("task", counter);
}
// Toggle empty message
function toggleEmptyMessage(display) {
const emptyElement = document.querySelector(".empty");
const counterElement = document.querySelector(".counter");
const tasksElement = document.querySelector("#tasks");
if (!display) {
emptyElement.style.display = "block";
counterElement.style.display = "none";
tasksElement.style.display = "none";
return;
}
emptyElement.style.display = "none";
counterElement.style.display = "block";
tasksElement.style.display = "block";
}
function createTask(taskObject) {
// Cacher le message "vide"
toggleEmptyMessage(tasks.length);
// Créer un élement checkbox
const divElement = document.createElement("div");
const checkboxElement = document.createElement("input");
checkboxElement.setAttribute("type", "checkbox");
checkboxElement.setAttribute("id", taskObject.id);
const labelElement = document.createElement("label");
labelElement.textContent = taskObject.body;
labelElement.setAttribute("for", taskObject.id);
/*
// Créer un element li
const li = document.createElement("li");
// Créer un element span pour afficher la tâche
const taskText = document.createElement("span");
taskText.textContent = taskObject.body;
*/
// Créer un element "a" pour delete
const deleteElement = document.createElement("a");
deleteElement.textContent = "Delete";
deleteElement.setAttribute("href", "#");
deleteElement.classList.add("delete");
// Mettre la valeur de task dans le text de li
//li.innerHTML = `${value} <a href="#">Delete</a>`;
//li.appendChild(taskText);
//li.appendChild(deleteElement);
labelElement.appendChild(deleteElement);
divElement.appendChild(checkboxElement);
divElement.appendChild(labelElement);
// Ajouter la tâche dans l'élément liste ul
list.prepend(divElement);
deleteElement.addEventListener("click", function (event) {
event.preventDefault();
divElement.remove();
tasks = tasks.filter(function (t) {
if (t.id != taskObject.id) {
return true;
}
});
// Mettre à jour le compteur de tâches
updateCountTasks(tasks.length);
// Toggle le message vide
toggleEmptyMessage(tasks.length);
});
checkboxElement.addEventListener("change", function (event) {
//if (checkboxElement.checked) {
if (event.currentTarget.checked) {
labelElement.style.backgroundColor = "yellow";
} else {
labelElement.style.backgroundColor = "inherit";
}
tasks = tasks.map((t) => {
if (t.id == event.currentTarget.id) {
t.completed = event.currentTarget.checked;
}
return t;
});
});
}
// Initialisation / launch
if (tasks.length) {
updateCountTasks(tasks.length);
for (const task of tasks) {
createTask(task);
}
} else {
// Afficher le message "vide"
toggleEmptyMessage(tasks.length);
}
// Récupérer l'élement "form"
const formElement = document.querySelector("form");
// Récupérer l'élement "div.error"
const errorElement = document.querySelector(".error");
// Créer un évènement "submit" sur le formulaire
formElement.addEventListener("submit", function (event) {
event.preventDefault();
// Récupérer la valeur de l'input du formulaire
const value = formElement.task.value;
// Vérifier si l'input est vide
if (!value.trim()) {
errorElement.textContent = "Please enter a task";
errorElement.style.display = "block";
formElement.task.value = "";
return false;
}
// Cacher le message d'erreur
errorElement.style.display = "none";
// Ajouter la tâche à la liste (tableau)
const t = { id: Date.now(), body: value, completed: false };
tasks.unshift(t);
// Update task counter
updateCountTasks(tasks.length);
// Créer la tâche (comme lors du chargement de la page => function)
createTask(t);
// Vider l'input
formElement.task.value = "";
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment