Question

0

92

Views

ToDo 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:

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-03T19:58:48.007Z

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>