From 504714b49f94e3c1569a3d485f171dac721f58dd Mon Sep 17 00:00:00 2001
From: Mitchell Adel <mitchelladel11@gmail.com>
Date: Mon, 8 Dec 2025 11:02:54 +0100
Subject: [PATCH] to do list empty list feedback

---
 projects/to-do-list/script.js | 207 ++++++++++++++++------------------
 1 file changed, 98 insertions(+), 109 deletions(-)

diff --git a/projects/to-do-list/script.js b/projects/to-do-list/script.js
index 826e9682..18030232 100644
--- a/projects/to-do-list/script.js
+++ b/projects/to-do-list/script.js
@@ -1,122 +1,111 @@
-// Create a "close" button and append it to each list item
-var myNodelist = document.getElementsByTagName('LI');
-var i;
-for (i = 0; i < myNodelist.length; i++) {
-    var division = document.createElement('div');
-    var span = document.createElement('SPAN');
-    var txt = document.createTextNode('\u00D7');
-    var editSpan = document.createElement('SPAN');
-    editSpan.innerHTML = ('&#9998');
-    division.appendChild(span);
-    division.appendChild(editSpan);
-    editSpan.className = 'edit';
-    editSpan.onclick = function () {
-        editList(this);
-    };
-    span.className = 'close';
-    span.appendChild(txt);
-    myNodelist[i].appendChild(division);
+// Check if list is empty
+function updateEmptyMessage() {
+  const list = document.getElementById("myUL");
+  const message = document.getElementById("emptyMessage");
+  message.style.display = list.children.length === 0 ? "block" : "none";
 }
 
-// Click on a close button to hide the current list item
-var close = document.getElementsByClassName('close');
-var i;
-for (i = 0; i < close.length; i++) {
-    close[i].onclick = function () {
-        var div = this.parentElement.parentElement;
-        div.style.display = 'none';
-    };
+// Attach close and edit buttons
+function attachCloseAndEdit(li) {
+  var division = document.createElement("div");
+
+  var span = document.createElement("SPAN");
+  var txt = document.createTextNode("\u00D7");
+
+  var editSpan = document.createElement("SPAN");
+  editSpan.innerHTML = "&#9998";
+
+  division.appendChild(span);
+  division.appendChild(editSpan);
+
+  editSpan.className = "edit";
+  editSpan.onclick = function () {
+    editList(this);
+  };
+
+  span.className = "close";
+  span.appendChild(txt);
+  li.appendChild(division);
+
+  span.onclick = function () {
+    this.parentElement.parentElement.remove();
+    updateEmptyMessage();
+  };
 }
 
-// Add a "checked" symbol when clicking on a list item
-var list = document.querySelector('ul');
-list.addEventListener('click', function (ev) {
-    console.log('clicked on ' + ev.target.tagName);
-    if (ev.target.tagName === 'DIV') {
-        ev.target.parentElement.classList.toggle('checked');
-    }
-    if (ev.target.tagName === 'LI') {
-        ev.target.classList.toggle('checked');
-    }
-}, false);
-
-// Create a new list item when clicking on the "Add" button
-function newElement () {
-    var li = document.createElement('li');
-    var division = document.createElement('div');
-    var inputValue = document.getElementById('myInput').value;
-    var t = document.createTextNode(inputValue);
-    li.appendChild(t);
-    if (inputValue === '') {
-        alert('You must write something!');
-    } else {
-        document.getElementById('myUL').appendChild(li);
+// Mark checked
+var list = document.querySelector("ul");
+list.addEventListener(
+  "click",
+  function (ev) {
+    if (ev.target.tagName === "DIV") {
+      ev.target.parentElement.classList.toggle("checked");
     }
-    document.getElementById('myInput').value = '';
-    var item = document.createElement('div');
-    item.classList.add('val');
-    item.appendChild(t);
-    var span = document.createElement('SPAN');
-    var txt = document.createTextNode('\u00D7');
-    var editSpan = document.createElement('SPAN');
-    editSpan.innerHTML = ('&#9998');
-    division.appendChild(span);
-    division.appendChild(editSpan);
-    editSpan.className = 'edit';
-    editSpan.onclick = function () {
-        editList(this);
-    };
-    span.className = 'close';
-    span.appendChild(txt);
-    li.appendChild(item);
-    li.appendChild(division);
-
-    for (i = 0; i < close.length; i++) {
-        close[i].onclick = function () {
-            var div = this.parentElement.parentElement;
-            div.style.display = 'none';
-        };
+    if (ev.target.tagName === "LI") {
+      ev.target.classList.toggle("checked");
     }
-var currentDate = new Date();
-var formattedDate = formatDate(currentDate);
-var dateElement = document.createElement('span');
-dateElement.textContent = formattedDate;
-li.appendChild(dateElement);
+  },
+  false
+);
+
+// Add item
+function newElement() {
+  var inputValue = document.getElementById("myInput").value;
+  if (!inputValue) {
+    alert("You must write something!");
+    return;
+  }
+
+  var li = document.createElement("li");
+  li.appendChild(document.createTextNode(inputValue));
+  document.getElementById("myUL").appendChild(li);
+  document.getElementById("myInput").value = "";
+
+  attachCloseAndEdit(li);
+
+  // Date
+  var dateElement = document.createElement("span");
+  dateElement.textContent = formatDate(new Date());
+  li.appendChild(dateElement);
+
+  updateEmptyMessage();
 }
 
-//Edit the list whenever the pencil icon is clicked
-function editList (division) {
-    var editButtons = document.getElementsByClassName('editBtn');
-    for (let i = 0; i < editButtons.length; i++) {
-        editButtons[i].style.display = 'none';
-    }
-    var item = division.parentElement.parentElement.firstElementChild;
-    console.log(item);
-    var inputDivision = document.getElementById('myInput');
-    inputDivision.value = item.innerHTML;
-    var addBtn = document.getElementsByClassName('addBtn');
-    addBtn[0].style.display = 'none';
-    var myDiv = document.getElementById('myDIV');
-    var editBtn = document.createElement('span');
-    editBtn.innerHTML = 'Edit';
-    editBtn.classList.add('editBtn');
-    myDiv.appendChild(editBtn);
-    editBtn.onclick = function () {
-        item.innerHTML = inputDivision.value;
-        inputDivision.value = '';
-        editBtn.remove();
-        addBtn[0].style.display = 'block';
-    };
+// Edit item
+function editList(division) {
+  var item = division.parentElement.parentElement.firstChild;
+  var inputDivision = document.getElementById("myInput");
+  inputDivision.value = item.textContent;
+
+  var addBtn = document.getElementsByClassName("addBtn")[0];
+  addBtn.style.display = "none";
+
+  var myDiv = document.getElementById("myDIV");
+  var editBtn = document.createElement("span");
+  editBtn.innerHTML = "Edit";
+  editBtn.classList.add("editBtn");
+  myDiv.appendChild(editBtn);
+
+  editBtn.onclick = function () {
+    item.textContent = inputDivision.value;
+    inputDivision.value = "";
+    editBtn.remove();
+    addBtn.style.display = "inline-block";
+  };
 }
-document.getElementById('myInput').addEventListener('keyup', function(event) {
-    if (event.key === 'Enter') {
-        newElement();
-    }
+
+// Enter key
+document.getElementById("myInput").addEventListener("keyup", function (event) {
+  if (event.key === "Enter") newElement();
 });
-document.getElementById('myInput').value = '';
+
+// Format date
 function formatDate(date) {
-    const options = { year: 'numeric', month: 'long', day: 'numeric' };
-    return date.toLocaleDateString(undefined, options);
+  return date.toLocaleDateString(undefined, {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
 }
 
-// Add this code inside your `newElement` function, after creating the `t` variable.
+updateEmptyMessage();