the following code is my html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="icons/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="css/theme-light.css" id="theme-link">
<link rel="stylesheet" href="css/style.css">
<title>Todos Mananger | ❤️</title>
</head>
<body>
<div id="main">
<h2>Things <span style="color: royalblue;">you</span> want to do...</h2>
<div class="todos-container">
</div>
<div id="info-input">
<input type="text" placeholder="Add New Task" maxlength="20" minlength="1">
<button class="adder-button"><i class="bi bi-plus"></i></button>
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>
and the js file is here:
const $ = document;
function _id(idName) {
return $.getElementById(idName);
}
function _query(queryName) {
return $.querySelector(queryName);
}
function _class(className) {
return $.getElementsByClassName(className);
}
const todosList = _query(".todos-container");
const info = _query("input");
const adder = _query(".adder-button");
const icon = `<i class="bi bi-trash"></i>`;
let trashIcons;
let todos;
let todoToHandle = -1;
let todoBoxes;
let newTodo;
function trashIconHandler() {
trashIcons = $.querySelectorAll(".bi-trash");
trashIcons.forEach(function (trashIcon) {
trashIcon.addEventListener("click", function (event) {
event.target.parentElement.remove();
todos = JSON.parse(localStorage.getItem("todos"));
todos.splice(
todos.findIndex((todo) => {
return todo.name == event.target.parentElement.textContent;
}),
1
);
localStorage.setItem("todos", JSON.stringify(todos));
});
});
}
function todoBoxesSelector() {
todoBoxes = $.querySelectorAll(".todo");
// changing the status to "completed or vice versa"
todoBoxes.forEach((todoBox) => {
todoBox.addEventListener("click", (e) => {
if (e.target.style.background != "#057719") {
e.target.style.background = "#057719";
todos = JSON.parse(localStorage.getItem("todos"));
todoToHandle = todos.findIndex((todo) => {
return todo.name == e.target.textContent;
});
todos[todoToHandle].completed = true;
localStorage.setItem("todos", JSON.stringify(todos));
} else if (e.target.style.background == "#057719") {
e.target.style.background = "#041a48";
todos = JSON.parse(localStorage.getItem("todos"));
todoToHandle = todos.findIndex((todo) => {
return todo.name == e.target.textContent;
});
todos[todoToHandle].completed = true;
localStorage.setItem("todos", todos);
}
});
});
}
todoBoxesSelector();
trashIconHandler();
window.addEventListener("load", () => {
info.value = "";
if (localStorage.getItem("todos") !== null) {
todos = JSON.parse(localStorage.getItem("todos"));
// adding existing todos to the todo container
todos.forEach(function (todo) {
newTodo = $.createElement("div");
newTodo.className = "todo";
newTodo.style.background = "#041a48";
if (todo.completed == true) {
newTodo.style.background = "#057719";
}
newTodo.innerHTML = todo.name + icon;
todosList.append(newTodo);
});
} else {
localStorage.setItem("todos", JSON.stringify([]));
}
trashIconHandler();
todoBoxesSelector();
});
// todo adder
adder.addEventListener("click", () => {
if (info.value.trim() != "" && info.value.trim().length <= 20) {
newTodo = $.createElement("div");
newTodo.className = "todo";
newTodo.style.background = "#041a48";
newTodo.innerHTML = info.value.trim() + icon;
todos = JSON.parse(localStorage.getItem("todos"));
todos.push({ name: info.value.trim(), completed: false });
localStorage.setItem("todos", JSON.stringify(todos));
todosList.append(newTodo);
}
trashIconHandler();
todoBoxesSelector();
});
the problem is that todos[todoHandler] is basically undefined and that the completed property could not be recognized. So it could not be changed during the assignment process.
Does anyone have a solution for it?
i’d be grateful
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate sunt odio rem! Consequatur aliquam saepe voluptatum quam aspernatur error! Facilis, vero modi quis nulla accusamus officia nemo eius quasi nesciunt, minus assumenda saepe temporibus nam iste delectus dolor, ipsum tempora nisi illo expedita id architecto vitae consequuntur hic. Modi, facere.