Examples

Question 1

From JS, creating an html element AND display on html webpage

Answer 1

1. Create the element using document.createElement.
2. (Optional) Set properties/content of new element
3. Append the element to the desired parent in the DOM. (document.getElementByID.appendChild()

Question 2

How to create an input, which needs to be appended as a list (appendChild) inside unordered list

Answer 2

1. Create the input element
2. Optionally, set properties or attributes for the input element
3. Create a list item which will contain the input element
4. Append the input element to the list item
5. Append the list item to the unordered list

Question 3

Store each input value as a separate key-value pair in local storage, rather than overwriting the previous value each time the “Save” button is clicked.

To achieve this, you can append a unique identifier to each key in local storage. One way to do this is to generate a unique identifier for each input element, such as an index or timestamp, and use it as part of the key name in local storage.

Here’s how you can modify your code to store each input value separately in local storage:

Question 4

let x = document.querySelector(“input”).value
let y =localStorage.setItem(“key”, x)

If I want to console.log, should i do console.log(x) or (y)?

Answer 4

console.log(x)

the localStorage.setItem() method itself doesn’t return anything meaningful; it simply sets the item in the localStorage.

Question 5

function persist() {
let y = localStorage.getItem(“key”)
document.querySelector(“input”).value = y
}

on the last code why y is on the right side , not left side?

Answer 5

In JS, right side of the assignment operator (=) is the value and left side is variable or property.

I need to assign the value of y to the value property of the <input></input> element