To-do List in JavaScript with Local Storage

Hey everyone, I hope you are all fine, let’s talk about creating a to-do list in JavaScript with local storage. A to-do list is a handy tool for organizing tasks and staying productive.

In this article, we’ll explore how to build a simple to-do list application using JavaScript and utilize local storage to save your tasks, ensuring they persist even if you close your browser. Let’s dive in!

before creating a to-do list you have knowledge of HTML, CSS & JS. Why HTML & CSS? Basically, you can use JS to manipulate the HTML Elements, so you must have knowledge about that.

To get started, create a new folder for your project and set up the basic structure. You’ll need an HTML file to define the layout, a CSS file for styling, and a JavaScript file for functionality.

In your HTML file, create a simple structure. You’ll need an input field to add tasks, a button to submit them, and a list to display the tasks. Use CSS to style your to-do list. You can choose colors, fonts, and layout to make it visually appealing and user-friendly.

JavaScript will handle the functionality of your to-do list. You’ll need to:

• Get references to the HTML elements you created.
• Create an event listener for the button to add tasks.
• Store the tasks in an array.
• Display the tasks in the list.
• Allow users to mark tasks as completed and delete them.
• Save the tasks to local storage so they persist across sessions.

To-do List Using Local Storage in Javascript

Local storage is a key-value store that allows you to save data in the user’s browser. In your JavaScript code, you’ll use the localStorage object to save and retrieve tasks. Enhance your to-do list by adding features like marking tasks as complete, sorting tasks, and filtering tasks based on their status (completed or pending).

Let’s look at the codes that help us to build a todo list with JavaScript and Local Storage. First of All, you need to design the application. below you can see the HTML codes.

 <div class="container">
      <div class="content-wrapper">
        <h2><span>T</span>ASK <span>L</span>IST</h2>

        <form id="form">
          <input
            type="text"
            placeholder="Enter Your Task "
            autocomplete="off"
            id="input"
          />
          <button type="button" class="btn-add">Add Task</button>
        </form>
        <ul class="todos" id="todos"></ul>
      </div>

      <p>Right Click to delete the Element!</p>
    </div>

Once you use HTML structure, then you need to use CSS to design the application, I’m going to share with you the codes that I used inside the project.

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Ruda:wght@400;600;700&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: "poppins";
  background: #ddd;
}

.container {
  background: #212f3c;
  max-width: 600px;
  width: 100%;
  border-radius: 10px;
}

.content-wrapper {
  padding: 2rem;
}

.content-wrapper h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin: 2rem 0;
  color: #f39c12;
  letter-spacing: 6px;
  font-family: "ruda";
}

.content-wrapper h2 span {
  font-size: 2.8rem;
}

form {
  margin-top: 1rem;
  position: relative;
}

form input {
  width: 94%;
  padding: 0.8rem 1rem;
  background: #f4f4f4;
  border: 1px solid #ddd;
  outline: none;
  border-radius: 5px;
  font-family: inherit;
  font-size: 1rem;
}

.btn-add {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.88rem 1rem;
  outline: none;
  background: #f39c12;
  border: none;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  font-size: 1rem;
}

#todos li {
  list-style: none;
  display: flex;
  justify-content: space-between;
  background: #34495e;
  align-items: center;
  padding: 0.75rem;
  font-size: 1rem;
  border-radius: 5px;
  margin: 1rem 0;
  color: #fff;
}

.container p {
  text-align: center;
  color: #ddd;
  opacity: 0.4;
  margin: 1rem 0;
}

#todos li.completed {
  text-decoration: line-through;
}

Finally, the cool thing is JS you can use JS codes to perform the operations. So, Let’s look at the codes that which used to manipulate the content.

const formEl = document.getElementById("form");
const inputEl = document.getElementById("input");
const todosUiEl = document.getElementById("todos");
const btnEl = document.querySelector(".btn-add");

// getting data from local storage
//get data from storage
const todos = JSON.parse(localStorage.getItem("todos"));

if (todos) {
  todos.forEach((todo) => addTodo(todo));
}
// step 1
btnEl.addEventListener("click", (e) => {
  e.preventDefault();
  addTodo();
});

// step 2
function addTodo(todo) {
  let todoText = inputEl.value;

  //if i will pass the parameter inside the function
  if (todo) {
    todoText = todo.text;
  }

  if (todoText) {
    const todEl = document.createElement("li");

    if (todo && todo.completed) {
      todEl.classList.add("completed");
      updatsUi();
    }

    //remove element
    todEl.addEventListener("contextmenu", (e) => {
      e.preventDefault();
      todEl.remove();
      updatsUi();
    });

    todEl.innerText = todoText;

    //task complete
    todEl.addEventListener("click", () => {
      todEl.classList.toggle("completed");
      updatsUi();
    });

    todosUiEl.appendChild(todEl);
    inputEl.value = "";
    updatsUi();
  }
}

function updateLS() {
  const todosEls = document.querySelectorAll("li");
  const todos = [];
  todosEls.forEach((todoEl) => {
    todos.push({
      text: todoEl.innerText,
      completed: todoEl.classList.contains("completed"),
    });
  });

  localStorage.setItem("todos", JSON.stringify(todos));
}

Thoroughly test your to-do list in different browsers to ensure cross-browser compatibility. Use browser developer tools to debug any issues that arise. Consider optimizing your code for performance and adding additional features like due dates, categories, or reminders to make your to-do list even more useful.

To-do List in JavaScript with Local Storage

Provide clear instructions on how to use your to-do list, including how to add, complete, and delete tasks. Create a user-friendly interface with intuitive controls. You can watch the video tutorial If you face any problems inside the Codes. I explained each thing step by step which use to create a to-do list in JavaScript with local storage.

I hope you’ve watched the complete video tutorial, after watching hope you’ve learned something new from this tutorial. you can create different types of to-do lists using local storage javascript like displaying the delete and edit buttons and updating the record in local storage.

Once your to-do list is complete and thoroughly tested, you can deploy it to a web server or a hosting platform of your choice. Share it with others and gather feedback for further improvements.

You May Also Like:

• Quiz App with HTML, CSS, and JavaScript
• How to Create QR Code Generator in JavaScript
• Create an Accordion Using HTML, CSS, and JavaScript
• Form Validation in JavaScript
• How to Make a Password Generator in JavaScript

Conclusion:

Building a to-do list in JavaScript with local storage is a valuable exercise for web developers. It combines essential web technologies, including HTML, CSS, and JavaScript, while introducing the concept of data persistence through local storage. With this project as a foundation, you can explore more advanced features and functionalities to create even more powerful task management applications. Happy coding!