cba85/app.js

## app.js
function addTaskInDom(task) {
  const taskElement = document.createElement("div");

  const taskCheckbox = document.createElement("input");
  taskCheckbox.type = "checkbox";
  const id = `checkbox-${task.id}`; // const id = "checkbox-" + task.id;
  taskCheckbox.id = id;

  const taskLabelElement = document.createElement("label");
  taskLabelElement.textContent = task.text;
  taskLabelElement.setAttribute("for", id);

  const taskDeleteElement = document.createElement("a");
  taskDeleteElement.href = "#";
  taskDeleteElement.textContent = "Supprimer";

  if (task.done) {
    taskCheckbox.checked = true;
    taskLabelElement.style.textDecoration = "line-through";
  }

  taskElement.appendChild(taskCheckbox);
  taskElement.appendChild(taskLabelElement);
  taskElement.append(" ");
  taskElement.appendChild(taskDeleteElement);

  // Delete a task event
  taskDeleteElement.addEventListener("click", function (e) {
    e.preventDefault();
    taskElement.remove();

    tasks = tasks.filter((t) => {
      return t.id != task.id;
    });

    localStorage.setItem("tasks", JSON.stringify(tasks));

    if (!tasks.length) {
      displayEmptyTasksMessage(true);
    }
  });

  // Update status
  taskCheckbox.addEventListener("change", function (e) {
    e.preventDefault();

    const done = e.currentTarget.checked;

    if (done) {
      taskLabelElement.style.textDecoration = "line-through";
    } else {
      taskLabelElement.style.textDecoration = "none";
    }

    tasks = tasks.filter((t) => {
      if (t.id === task.id) {
        task.done = done;
      }

      return t;
    });

    localStorage.setItem("tasks", JSON.stringify(tasks));
  });

  document.querySelector("#tasks").appendChild(taskElement);
}

function clearInput() {
  document.querySelector("#task").value = "";
}

function addTaskInList(task) {
  tasks.push(task);

  localStorage.setItem("tasks", JSON.stringify(tasks));
}

function displayEmptyTasksMessage(display) {
  const notificationElement = document.querySelector(".empty-notification");

  if (display) {
    notificationElement.style.display = "block";
  } else {
    notificationElement.style.display = "none";
  }
}

function displayErrorMessage() {
  const notificationElement = document.querySelector(".error-notification");

  notificationElement.style.display = "block";
  document.querySelector("#task").style.border = "1px solid red";

  setTimeout(() => {
    notificationElement.style.display = "none";
    document.querySelector("#task").style.border = "none";
  }, 2000);
}

// START
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];

if (tasks.length) {
  for (const task of tasks) {
    addTaskInDom(task);
  }
} else {
  displayEmptyTasksMessage(true);
}

const form = document.querySelector("form");

// Add a task
form.addEventListener("submit", function (e) {
  e.preventDefault();
  const taskInputElement = document.querySelector("#task");
  const taskValue = taskInputElement.value;

  if (!taskValue) {
    displayErrorMessage();
    return;
  }

  const task = { id: Date.now(), text: taskValue, done: false };

  displayEmptyTasksMessage(false);
  addTaskInList(task);
  addTaskInDom(task);
  clearInput();
});

## index.html
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Todolist</title>
    <meta name="description" content="Todolist" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
    />
    <script src="/app.js" defer></script>
    <style>
      .error-notification {
        color: red;
        display: none;
      }
    </style>
  </head>
  <body>
    <h1>Todolist</h1>

    <form>
      <label for="task">Créer une tâche</label>
      <input type="text" id="task" />

      <div class="error-notification">Veuillez entrer une tâche</div>

      <button type="submit">Ajouter</button>
    </form>

    <h2>Liste de tâche</h2>

    <p class="empty-notification" style="display: none">
      🎉 <em>Vous n'avez rien à faire</em>
    </p>

    <div id="tasks"></div>
  </body>
</html>
	function addTaskInDom(task) {
	const taskElement = document.createElement("div");

	const taskCheckbox = document.createElement("input");
	taskCheckbox.type = "checkbox";
	const id = `checkbox-${task.id}`; // const id = "checkbox-" + task.id;
	taskCheckbox.id = id;

	const taskLabelElement = document.createElement("label");
	taskLabelElement.textContent = task.text;
	taskLabelElement.setAttribute("for", id);

	const taskDeleteElement = document.createElement("a");
	taskDeleteElement.href = "#";
	taskDeleteElement.textContent = "Supprimer";

	if (task.done) {
	taskCheckbox.checked = true;
	taskLabelElement.style.textDecoration = "line-through";
	}

	taskElement.appendChild(taskCheckbox);
	taskElement.appendChild(taskLabelElement);
	taskElement.append(" ");
	taskElement.appendChild(taskDeleteElement);

	// Delete a task event
	taskDeleteElement.addEventListener("click", function (e) {
	e.preventDefault();
	taskElement.remove();

	tasks = tasks.filter((t) => {
	return t.id != task.id;
	});

	localStorage.setItem("tasks", JSON.stringify(tasks));

	if (!tasks.length) {
	displayEmptyTasksMessage(true);
	}
	});

	// Update status
	taskCheckbox.addEventListener("change", function (e) {
	e.preventDefault();

	const done = e.currentTarget.checked;

	if (done) {
	taskLabelElement.style.textDecoration = "line-through";
	} else {
	taskLabelElement.style.textDecoration = "none";
	}

	tasks = tasks.filter((t) => {
	if (t.id === task.id) {
	task.done = done;
	}

	return t;
	});

	localStorage.setItem("tasks", JSON.stringify(tasks));
	});

	document.querySelector("#tasks").appendChild(taskElement);
	}

	function clearInput() {
	document.querySelector("#task").value = "";
	}

	function addTaskInList(task) {
	tasks.push(task);

	localStorage.setItem("tasks", JSON.stringify(tasks));
	}

	function displayEmptyTasksMessage(display) {
	const notificationElement = document.querySelector(".empty-notification");

	if (display) {
	notificationElement.style.display = "block";
	} else {
	notificationElement.style.display = "none";
	}
	}

	function displayErrorMessage() {
	const notificationElement = document.querySelector(".error-notification");

	notificationElement.style.display = "block";
	document.querySelector("#task").style.border = "1px solid red";

	setTimeout(() => {
	notificationElement.style.display = "none";
	document.querySelector("#task").style.border = "none";
	}, 2000);
	}

	// START
	let tasks = JSON.parse(localStorage.getItem("tasks")) \|\| [];

	if (tasks.length) {
	for (const task of tasks) {
	addTaskInDom(task);
	}
	} else {
	displayEmptyTasksMessage(true);
	}

	const form = document.querySelector("form");

	// Add a task
	form.addEventListener("submit", function (e) {
	e.preventDefault();
	const taskInputElement = document.querySelector("#task");
	const taskValue = taskInputElement.value;

	if (!taskValue) {
	displayErrorMessage();
	return;
	}

	const task = { id: Date.now(), text: taskValue, done: false };

	displayEmptyTasksMessage(false);
	addTaskInList(task);
	addTaskInDom(task);
	clearInput();
	});
	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Todolist</title>
	<meta name="description" content="Todolist" />
	<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
	/>
	<script src="/app.js" defer></script>
	<style>
	.error-notification {
	color: red;
	display: none;
	}
	</style>
	</head>
	<body>
	<h1>Todolist</h1>

	<form>
	<label for="task">Créer une tâche</label>
	<input type="text" id="task" />

	<div class="error-notification">Veuillez entrer une tâche</div>

	<button type="submit">Ajouter</button>
	</form>

	<h2>Liste de tâche</h2>

	<p class="empty-notification" style="display: none">
	🎉 <em>Vous n'avez rien à faire</em>
	</p>

	<div id="tasks"></div>
	</body>
	</html>