From e909dccfa37a3ed81eba090e3ed1d12182832b08 Mon Sep 17 00:00:00 2001
From: Shpetim Aliu <106196770+shpetimaliu@users.noreply.github.com>
Date: Sat, 22 Apr 2023 01:35:14 +0200
Subject: [PATCH] todo_list.js

I optimized this code and combined the "add()" and "del()" functions into a single function, which will be called "createListElement()". This would simplify the code structure and make it easier to remember the function used to add and remove elements from the list.

Here, the "createListElement()" function builds the new list element by creating an "li" tag and a "span" tag for each new element added to the list. After this, the function adds the new element to the list and also adds two events that occur when a click happens on the new list element and on the "span" tag to remove the element. Finally, the function clears the text in the input field and adds an event listener to the input field that allows the user to add new elements by pressing the Enter key.
---
 Todo list/todo_list.js | 70 ++++++++++++++++++++++--------------------
 1 file changed, 36 insertions(+), 34 deletions(-)

diff --git a/Todo list/todo_list.js b/Todo list/todo_list.js
index 3d280995..410ccdfe 100644
--- a/Todo list/todo_list.js	
+++ b/Todo list/todo_list.js	
@@ -1,35 +1,37 @@
-myList= document.querySelector('.myList');
-tasks = document.getElementsByTagName('LI');
-for(let i=0; i<tasks.length; i++){
-	var span = document.createElement('span');
-    span.innerHTML = 'Remove';
-    span.className='close';
-  tasks[i].appendChild(span);
-  tasks[i].addEventListener('click',function(){ tasks[i].classList.toggle('checked');
+const myList = document.querySelector('.myList');
+const input = document.getElementById('title');
+
+function createListElement() {
+  const inputText = input.value.trim();
+
+  if (!inputText) {
+    alert("Please enter a task.");
+    return;
+  }
+
+  const li = document.createElement('li');
+  li.textContent = inputText;
+
+  const span = document.createElement('span');
+  span.textContent = 'Remove';
+  span.className = 'close';
+
+  li.appendChild(span);
+  myList.appendChild(li);
+
+  li.addEventListener('click', function() {
+    li.classList.toggle('checked');
   });
-    }
-del();
-function add(){
-	var input = document.getElementById('title');
-    input_text = input.value;
-    if(input_text =="")
-    {alert("EMPTY");
-    //break;
-    }
-    //document.write(input_text);
-    var li =document.createElement('li');
-    li.innerHTML = input_text;
-    var span = document.createElement('span');
-    span.innerHTML = 'Remove';
-    span.className='close';
-    li.appendChild(span);
-    myList.appendChild(li);
-    input.value ="";
-    del();
-    }
-function del(){
-del_keys = document.getElementsByTagName('span');
-for(let i=0; i<del_keys.length; i++){
-	del_keys[i].addEventListener('click', function(){del_keys[i].parentElement.style.display = 'none';});
-    }
-    }
+
+  span.addEventListener('click', function() {
+    li.remove();
+  });
+
+  input.value = '';
+}
+
+input.addEventListener('keypress', function(event) {
+  if (event.key === 'Enter') {
+    createListElement();
+  }
+});