I am using javascript to populate the HTML inside my todo list, but I am struggling to implement a way of storing the data inbetween refreshes of the webpage. I know I should be using localStorage get/set but I’m unsure how best to implement, any guidance would be much appreciated. My HTML and JS are below:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do List</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/bd47ea96a8.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="card">
<div class="title">
<h3>To-Do List</h1>
<i class="fa-solid fa-list-check"></i>
</div>
<div class="list-input">
<input type="text" class="todo-input
" placeholder="Add your task">
<button class="submit-button">Add</button>
</div>
<div class="todo-list hidden">
</div>
<button class="delete-tasks hidden">Mark as Complete</button>
</div>
<script type="module" src="./todo.js"></script>
</body>
</html>
const submitButton = document.querySelector(".submit-button");
const taskInput = document.querySelector(".todo-input");
const listInput = document.querySelector(".list-input");
const checkboxDelete = document.querySelectorAll(".checkbox");
const deleteButton = document.querySelector(".delete-tasks");
let todoList = [];
submitButton.addEventListener("click", () => {
const checkIfhidden = document.querySelector(".todo-list");
const deleteButton = document.querySelector(".delete-tasks");
if (taskInput.value === "") {
window.alert("Please enter a new task before submitting");
} else {
addTodo(taskInput.value);
deleteButton.classList.remove("hidden");
if (checkIfhidden.classList.contains("hidden")) {
checkIfhidden.classList.remove("hidden");
}
}
});
function addTodo(item) {
if (item !== "") {
const todo = {
id: Date.now(),
name: item,
completed: false,
};
todoList.push(todo);
renderTodoList(todo);
taskInput.value = "";
}
}
let todoHTML = "";
function renderTodoList() {
const renderedList = document.querySelector(".todo-list");
renderedList.innerHTML = "";
todoList.forEach((todo) => {
const newListItem = document.createElement("div");
newListItem.classList.add("list-item");
newListItem.innerHTML = `
<label for="item-${todo.id}">${todo.name}</label>
<input type="checkbox" class="checkbox" data-delete-id="${todo.id}">`;
renderedList.appendChild(newListItem);
});
}
deleteButton.addEventListener("click", () => {
const checkboxes = document.querySelectorAll(".checkbox:checked");
checkboxes.forEach((checkbox) => {
const todoId = parseInt(checkbox.getAttribute("data-delete-id"));
todoList = todoList.filter((todo) => todo.id !== todoId);
});
if (todoList.length < 1) {
document.querySelector(".todo-list").classList.add("hidden");
document.querySelector(".delete-tasks").classList.add("hidden");
}
renderTodoList();
});
I’ve tried implementing myself but I believe I am making errors in the placement of my functions and keep getting either HTML duplications or app breakage