Still confused on localStorage

Hmm, so this is what I was able to create so far, and I think I’m getting close to cracking it. A Pen by Brandon (codepen.io)

1 Like

I set it to increment itself in the add function so that I can utilize it in the displayTask function so that I can use it in a for loop and replicate the elements in the add function so that they can permanently stay in the DOM

1 Like

Oh gotcha. I don’t know, in my codepen I see it being used. But, anyway, I’m just trying to figure out a way to get the elements I created in the first function to stick around in the last function. Is it possible to return a p element, in another function? I’m currently thinking about utilizing the p element and use a for loop of some kind to save my appended elements to the DOM

Correct, and I’m currently trying to figure out the last step of that. So, regarding my tasks here is my explanation for what I think I should do to accomplish step 7:

  1. Locate the add function.
  2. Create a for in loop of list.
  3. set obj to localstorage (like localstorage.setItem("keys", obj[property]. This will set the values to LS and then be assigned to my created p tag.
  4. return the p tag in the add function.
  5. create a variable in the displayTask function that is assigned to the add function
  6. create a for loop that utilizes the length of the list array, and append the created variable to the DOM

Alright, gotcha. How’s this? A Pen by Brandon (codepen.io)

EDIT: whoops! Looks like it didnt save give me a sec

Thanks for the reply. Alright, I deleted the two lines of code, but I’m not really sure how to update the LS like you said, to be honest.

Sorry if this comes across as me being stubborn, but… idk if I should look at the answer before I solve it. I consider it kind of like cheating, you know? I feel like I learn more if I figure out myself. Anyway this is what I have so far follow your instructions. A Pen by Brandon (codepen.io)



const itemInput = document.getElementById("item");
const submission = document.getElementById("submit-button");
const clear = document.getElementById("clear");
const tasks = document.getElementById("tasks");
const list = JSON.parse(localStorage.getItem('todoList')) || [];


function add(){
  const obj = {
    value: itemInput.value,
  
  };
  list.push(obj)
const p = document.createElement("p");

}
createTaskElement(obj)
}

function createTaskElement(submittedInput){
const psa = document.createElement("p")
tasks.appendChild(psa)
}

function displayTask(){
 for(let i = 0; i < list.length; i++){
  list[i].innerHTML = itemInput.value
 }
}

submission.addEventListener("click", e =>{
  add()
})
displayTask()

Oh in createTaskElement… gotcha. Alright np, I’ll take a look at the replies again.

So the value for the argument of submittedInput will be obj, correct?

Ok great! So currently this is what I have rn

const itemInput = document.getElementById("item");
const submission = document.getElementById("submit-button");
const clear = document.getElementById("clear");
const tasks = document.getElementById("tasks");
const list = JSON.parse(localStorage.getItem('todoList')) || [];


function add(){
  const obj = {
    value: itemInput.value,
  
  };
  list.push(obj)
createTaskElement(itemInput.value)
}

function createTaskElement(submittedInput){
const p = document.createElement("p")
p.innerHTML = submittedInput;
tasks.appendChild(p)
}

function displayTask(){
 for(let i = 0; i < list.length; i++){
  createTaskElement()
 }
}

submission.addEventListener("click", e =>{
  add()
})
displayTask()

I made sure to put the argument as the input’s value as you stated, so what’s next?

Gotcha, and that would be this?

function displayTask(){
 for(let i = 0; i < list.length; i++){
  createTaskElement(itemInput.value)
 }
}
displayTask

will be called at the end of the body. So like the very last thing in the VSCode page

ah, it won’t have a value. So DT will be called in add(), right?

Does list have any data you can display, right? Yes, I believe so. So first you’ll need to loop through list in DT correct? I’m just trying to get all the steps down

1 Like

Sounds good! And that reference will be list? Eer wait no nvm

1 Like

Right, I just realized that. So it’ll be List[i], I believe and it’ll look like this

function displayTask(){
 for(let i = 0; i < list.length; i++){
  createTaskElement(list[i])
 }
}

It’s the list array that we’re iterating over with the i from the for loop since we’re iterating over a specifiic property of the list array

My bad. No, it’s not a string value for the DOM. it would be the value of obj that would need to be added in there since it’s a string value.

They are object data types. So, stringified objects?

I believe it’s value like value: item