skip to Main Content

I am tasked with creating a to do list form . The User should be able to input their ‘todos’ and then be displayed those todos. The user has the option to remove and cross out each todo. When the user refreshes the page, the local storage should display the todos that the user inputed.

I am able to return all the inputs that are saved in the local storage at first try. However, once I cleared the console I realized my inputs are no longer being saved to the local storage. Every time I insert an input- the input does not save to local storage. enter image description here.

attached is the display browser.

Sorry for the sloppy code. I have just started my code learning. Any help would be appreciated !

const form = document.querySelector("form");
// const li = document.querySelector("li");
const ul = document.querySelector("#todolist");
const input = document.querySelector("#TO-DO");
let todoArray;


if (localStorage.todos) {
  todoArray = JSON.parse(localStorage.todos);
} else {
  todoArray = [];
}

for (let todo of todoArray) {
  addTodo(todo);
}

function addTodo(userInput) {
  const newToDo = document.createElement("li");

  newToDo.innerText = userInput;
  ul.appendChild(newToDo);
  newToDo.addEventListener("click", function (e) {
    if (e.target.tagName === "LI") {
      newToDo.classList.toggle("completed");
    }
  });
  const removeBtn = document.createElement("button");
  removeBtn.innerText = "REMOVE";
  removeBtn.addEventListener("click", function () {
    removeBtn.parentElement.remove();
    removeFromLocalStorage(userInput);
  });
  newToDo.prepend(removeBtn);
}

const userInput = input.value;

ul.addEventListener("click", function (e) {
  
  if (e.target.tagName === "BUTTON") {
    e.target.parentElement.remove();
  } else if (e.target.tagName === "LI") {
  }
});

form.addEventListener("submit", function submit(e) {
  e.preventDefault();

  const newToDo = document.createElement("li");
  const removeBtn = document.createElement("button");
  const userInput = input.value;
  

  removeBtn.innerText = "REMOVE";
  removeBtn.addEventListener("click", function () {
    removeBtn.parentElement.remove();
  });

  newToDo.innerText = userInput;
  input.value =
    ""; /* resetting the input value to be empty after we retieve value */
  ul.append(newToDo);
  newToDo.appendChild(removeBtn);
  newToDo.addEventListener("click", function (e) {
    if (e.target.tagName === "LI") {
      //   console.log("YOU CLICKed lI");
      newToDo.classList.toggle("completed");
    }
  });
});

function addToLocalStorage(userInput) {
  todoArray.push(userInput);
  localStorage.setItem("todos", JSON.stringify(todoArray));
}

function removeFromLocalStorage(userInput) {
  for (let i = 0; i < todoArray.length; i++) {
    if (todoArray[i] === userInput) {
      todoArray.splice(i, 1);
      break;
    }
  }
  localStorage.setItem("todos", JSON.stringify(todoArray));
}

2

Answers


  1. Add string to local storage

    const localString = 'abc'
    
    localStorage.setItem('str', localString)
    

    Get string from local storage

    // gives undefined if item doesn't exist on localStorage
    
    localStorage.getItem('str') 
    

    Add array to local storage

    const localArray = ['one','two','three'] 
    
    /* we will store this as storedItems. For this, we will have 
    to first convert the array into string using JSON.stringify because we can't 
    store array directly in local storage. We can only store strings in it*/
    
    localStorage.setItem('storedItems', JSON.stringify(localArray))
    

    Get array from local storage

    // if storedItems doesn't exist then we will return empty array
    
    JSON.parse(localStorage.getItem('storedItems') || '[]') 
    
    Login or Signup to reply.
  2. It looks like you are not calling your addToLocalStorage(userInput) function anywhere, so that is probably why they are not being written to local storage.

    Try adding addToLocalStorage(userInput) to the end of your addTodo function.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search