CODEWITHSUNDEEP
javascript
Salman
Salman

Reputation: 309

To do list simple program

I'm trying to do a simple program "To Do List".

After running the program, the list in localStorage will load in the page.

This Is great, but adding more in the list, the list will show twice.

So, I don't how to fix it.

const div = document.createElement("div");
const icon = document.createElement("img");
const input = document.createElement("input");
const h1 = document.createElement("h1");

div.style.cssText =
  "display: flex; flex-direction: column; align-items: center;";
h1.innerHTML = `Ye Olde To Do List`;
icon.src = `./to-do-list.png`;
icon.style.cssText = `width: 50px; height: 50px; padding-bottom: 20px`;

let arrayValue = JSON.parse(localStorage.getItem("list")) || [];
console.log(arrayValue)

input.addEventListener("blur", () => {
  if (input.value.length > 0) {
    arrayValue.push(input.value);
    window.localStorage.setItem("list", JSON.stringify(arrayValue));
  }
  getTasks()
});

function getTasks() {
  for (let i = 0; i < arrayValue.length; i++) {
    const myMenu = document.createElement("ul");
    const myList = document.createElement("li");
    myMenu.appendChild(myList);
    div.appendChild(myMenu);
    myList.innerHTML = arrayValue[i];
    
  }
}
div.appendChild(h1);
div.appendChild(icon);
div.appendChild(input);

getTasks();

document.body.appendChild(div);

Upvotes: 0

Views: 82

Answers (2)

George Fotheringham
George Fotheringham

Reputation: 41

Your list is duplicating on the page because of the getTasks() call within input.addEventListener.

There are several solutions to this problem, such as setting getTasks() to run on page load, and then refresh the page at the end of input.addEventListener.

Or better yet, you could create a second function that will add the new objects to the DOM without calling getTasks() again. And as long as the values are also updated in local storage they will maintain between sessions.

Editing the below in response to comment

Try adding two functions.

Create a function addTaskToLocalStorage(task) which takes a new task as an argument and adds it to local storage. This will be called when the user inputs a new task, and should not impact the page.

Then, create another function addTaskToDOM(task) which takes the same task and appends it to the bottom of the already loaded tasks.

I would also change the name of getTasks() to something like loadLocalStorageTasksOntoPage(), for clarity although this ideally would be separated into two functions as well.

Your app should then be able to do three separate things.

  1. On page load takes all tasks from local storage and appends to DOM
  2. Takes inputted task and adds it to local storage array (for the next time the page is loaded).
  3. Appends the same task from step two to the DOM.

Keeping the functions separate and simple like this allows you to reuse and plug them in where needed.

Upvotes: 1

Chris G
Chris G

Reputation: 2110

  • Create each element just once outside of any function so you don't have to do it multiple times or every function call
  • Call your function getTasks() once after you declared your array to avoid errors
  • getTasks() what this function does now is it will run a for loop to iterate thru the array and clone the li element that you created earlier, in the 1st iteration it will just assign the first li element with the 1st value from the array, while further iterations it will clone the 1st li element, append to your ul and assign it the next value stored in your array. That's all it will do and this will run only once.
  • Your second function is the input.addEventListener("blur", () => { this will keep some of the original code you made but after pushing the new value to the array and saving it in the storage it will make yet another clone of the li element, appendChild to your ul and assign your newest value to it. This way it will make a new clone for every new element present in your array
const icon = document.createElement("img");
const input = document.createElement("input");
const h1 = document.createElement("h1");
const myMenu = document.createElement("ul");
const myList = document.createElement("li");


div.style.cssText =
  "display: flex; flex-direction: column; align-items: center;";
h1.innerHTML = `Ye Olde To Do List`;
icon.src = `./to-do-list.png`;
icon.style.cssText = `width: 50px; height: 50px; padding-bottom: 20px`;

let arrayValue = JSON.parse(localStorage.getItem("list")) || [];
//console.log(arrayValue)
getTasks();


input.addEventListener("blur", () => {
  if (input.value.length > 0) {
    arrayValue.push(input.value);
    window.localStorage.setItem("list", JSON.stringify(arrayValue));
    console.log(arrayValue);
    
    let clone = myList.cloneNode(true);
    myMenu.appendChild(clone).innerHTML=input.value;
    div.appendChild(myMenu);
  }
});

function getTasks() {
    for (let i = 0; i < arrayValue.length; i++) {
    if(i==0){
        myMenu.appendChild(myList).innerHTML=arrayValue[i];
    } else {
        let li_clone = myList.cloneNode(true);
      myMenu.append(li_clone);
      div.append(myMenu);
      myList.innerHTML = arrayValue[i];
    }
  }
  div.appendChild(h1);
  div.appendChild(icon);
  div.appendChild(input);
  div.appendChild(myMenu);

  document.body.appendChild(div);
}

//window.localStorage.clear(arrayValue);//uncomment this to clear storage```

Upvotes: 1

Related Questions