Creating a task management system using HTML, CSS, and JavaScript that utilizes local

Question

Creating a task management system using HTML, CSS, and JavaScript that utilizes local

I have been extensively researching how to create a to-do list using JavaScript with local storage, but unfortunately, I have not been able to find exactly what I am looking for.

Is there a way for me to set up a to-do list and input data before actually entering any tasks? The image below shows that currently no tasks have been added:

https://i.sstatic.net/6KYxg.png

javascript html css local-storage

Answer 1

Answer №1

To begin, retrieve the data from the localStorage. In the demonstration provided, a data array is used because localStorage cannot be utilized on Stackoverflow. After that, loop through the array and generate a new list element for each item, then add it to your todo list.

example in action

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>

Answer 2

To begin, retrieve the data from the localStorage. In the demonstration provided, a data array is used because localStorage cannot be utilized on Stackoverflow. After that, loop through the array and generate a new list element for each item, then add it to your todo list.

example in action

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>

Creating a task management system using HTML, CSS, and JavaScript that utilizes local

Answer №1

Similar questions

Automatic Refresh and Search Functionality on PHP Page

Inject pure HTML code into a react div

Is there a way to adjust the background hues of a React component when a click event is triggered?

To dismiss the Div, simply click on any area outside of it. Leveraging the power of SVG, D3

Inability to successfully upload batch data within specified criteria using a keyword and conditional statement

Storing customer information securely on the server with the help of Node.js

I encountered a height discrepancy when attempting to style an unordered list to resemble a table

Get rid of the add to cart message and modify the button that says "add to cart" on Woocommerce

Is there a more efficient method than creating a separate variable for the navbar on each individual page where it is being utilized?

Is there a way for me to use an ajax xmlhttprequest to submit all the selected values from my radio buttons?

Using Javascript to dynamically retrieve accordion content from a dynamically generated ID

JavaScript libraries are not required when using the .append function to add HTML elements

JavaScript EasyBitConverter

Installing global confusion with NPM

Having an issue with ng-model not functioning correctly in md-menu with AngularJS material

Adjusting the background width results in the container position being altered as well

Send form data using ajax technology

Submitting data with ajax in MVC when an option is chosen in a dropdown menu

Adjusting the transparency of each segment within a THREE.LineSegments object

Reactjs is failing to display the page