0
258
ViewsToDo list html css js with localstorage
I searched a lot about to-do list js with local storage but I didn't find what I want.
How can I build a to-do list and put data before I write anything? In this photo, I didn't put anything and show task:
·
Juan Pablo Isaza
1 answers
Answer question0
First you need to fetch data from localStorage. In the example below i use a data array because i cant use in Stackoverflow the localStorage. Then iterate the array and create for every row a new list element and appended to your todo list.
working example
const form = document.querySelector("form");
const input = document.querySelector("#input");
const list = document.querySelector("ul");
const data = ["task 1", "task 2"];
function init() {
data.forEach(e => {
let li = document.createElement('li');
li.innerHTML = e;
const delBtn = document.createElement("button");
delBtn.innerText = 'x'
li.append(' ',delBtn);
list.append(li)
})
}
init();
///
form.addEventListener("submit", function(e) {
e.preventDefault();
toDoLine();
input.value = "";
});
list.addEventListener('click', function(e){
if (e.target.nodeName === 'BUTTON') {
e.target.closest('LI').remove();
}
})
function toDoLine() {
if (input.value !== '') {
const toDo = input.value;
const newLi = document.createElement("li");
newLi.innerText = toDo;
const delBtn = document.createElement("button");
delBtn.innerText = 'x'
newLi.append(' ', delBtn);
list.append(newLi);
} else {
alert('add something to the list!')
}
}body {
text-align: center;
}
#list {
display: inline-block;
}
li {
text-align: left;
}<h1>To Do List</h1>
<div>
<form>
<input action ='/test' id="input" type="text" placeholder="task">
<button id='submit'>submit</button>
</form>
</div>
<div id='listdiv'>
<ul id="list"></ul>
</div>
·
Juan Pablo Isaza
Report
Answer question