I have developed a task management system where users can create a to-do list for their daily tasks. Upon completion of a task, they can tick the checkbox next to it, which will trigger a strikethrough effect. The completed tasks are then moved from the "uList" unordered list to the "taskCompleted" unordered list. Additionally, I want to give users the ability to move a task back from "taskCompleted" to "uList" by simply double-clicking on it. The task should revert to its original state with no strikethrough and an unchecked checkbox. I have attempted to achieve this using the event object and a for loop, but so far, both attempts have failed. I am eager to receive feedback on this implementation.
var elUlList = document.getElementById("uList");
var btn = document.getElementById("btn");
const elInput = document.getElementById("input");
const footer = document.querySelector("footer");
const message = document.getElementById("message");
const elCounter = document.getElementById("counter");
const taskCompleted = document.getElementById("taskCompleted");
var elements = document.getElementsByTagName("li");
var input = document.getElementsByTagName("input")
function createListItems() {
var inputValue = elInput.value;
if(inputValue === "" || inputValue === null) return
var newLi = document.createElement("li");
newLi.id = Date.now().toString();
var input = document.createElement("input");
input.type = "checkbox";
input.name = "to-do-input";
var newText = document.createTextNode(inputValue);
newLi.appendChild(input);
newLi.appendChild(newText);
elUlList.appendChild(newLi);
elCounter.innerHTML =+ elements.length;
var toDoInput = document.getElementsByTagName("to-do-input");
for(var i = 0; i < toDoInput.length; i++) {
toDoInput[i].addEventListener("change", function(e) {
if(e.target.checked == true) {
e.target.parentNode.remove();
}
})
}
}
btn.addEventListener("click", createListItems, false);
elInput.addEventListener("keyup", function(e) {
if(e.keyCode === 13) {
e.preventDefault();
btn.click()
}
})
elInput.addEventListener("mouseover", emptyField, false)
function emptyField() {
this.value = "";
}
elUlList.addEventListener("change", function(e){
var target = e.target;
var parent = target.parentNode;
alert("are you sure you want to move this item to completed task");
parent.classList.add("taskMoved");
taskCompleted.appendChild(parent);
elCounter.innerHTML =+ elements.length;
});
elUlList.addEventListener("click", strikeOutElement, false);
function strikeOutElement(e) {
var target = e.target;
if(target.matches("input[type=checkbox]")){
target.closest("li").classList.toggle("lineThrough", target.checked);
}
}
var taskMoved = document.getElementsByClassName("taskMoved");
if(taskMoved.length > 0) {
for(var i = 0; i < taskMoved.length; i++) {
taskMoved[i].addEventListener("dblclick", function() {
taskMoved[i].classList.remove("lineThrough");
taskMoved[i].firstElementChild.toggle("lineThrough", target.checked);
taskMoved[i].firstElementChild.checked = false;
elUlList.appendChild(taskMoved[i]);
}, false);
}
}
var date = new Date().toLocaleDateString("en-US")
footer.innerHTML = date
console.log(date).greenColor {
color: green;
}
.redColor {
color: red;
}
.lineThrough {
text-decoration: line-through;
}
li {
list-style-type: none;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Practise App</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="message"class=""></div>
<ul id="uList"></ul>
<button id="btn" type="button" name="button">click here to add items</button><br>
<input id="input" type="text" name="" value="">
<div id="counter" class=""></div>
<p>task Completed</p>
<ul id="taskCompleted"></ul>
<footer></footer>
<script src="index.js" type="text/javascript"></script>
</body>
</html>