OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Best way of implementing localstorage into my todolist app [closed]

  • Thread starter Thread starter Samuel
  • Start date Start date
S

Samuel

Guest
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.

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


Code:
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 = JSON.parse(localStorage.getItem("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 = "";
  }
}

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);
  });

  saveToStorage();
}

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();
});

function saveToStorage() {
  localStorage.setItem("todoList", JSON.stringify(todoList));
}

Code:
<script src="https://kit.fontawesome.com/bd47ea96a8.js" crossorigin="anonymous"></script>
<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>
<p>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.</p>
<p>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</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 = JSON.parse(localStorage.getItem("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 = "";
}
}

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);
});

saveToStorage();
}

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();
});

function saveToStorage() {
localStorage.setItem("todoList", JSON.stringify(todoList));
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://kit.fontawesome.com/bd47ea96a8.js" crossorigin="anonymous"></script>
<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></code></pre>
</div>
</div>
</p>
Continue reading...
 

Latest posts

Top