ArticleZip > Create A To Do App With Local Storage Zero Dependencies

Create A To Do App With Local Storage Zero Dependencies

Want to build a lightweight To Do app without the burden of external dependencies? Look no further! In this guide, I'll walk you through the step-by-step process of creating your very own To Do application using local storage and zero dependencies.

### Setting Up Your Project Environment

Before diving into coding, it's crucial to set up your project environment properly. You don't need any fancy tools or libraries for this project. Just a simple text editor and a web browser will do the trick. Start by creating a new directory for your project and opening it in your preferred text editor.

### HTML Markup

The first step in building our To Do app is to create the structure of our HTML file. We'll need an input field to add tasks and a list to display them. Here's a basic template to get you started:

Html

<title>My To-Do App</title>


    <h1>My To-Do List</h1>
    
    <ul id="taskList"></ul>

### JavaScript Logic

Now, let's dive into the JavaScript part of our To Do app. We'll be using the localStorage API to store our tasks locally. Below is a simple script to get you started:

Javascript

const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');

taskInput.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
        const taskValue = taskInput.value.trim();

        if (taskValue) {
            const li = document.createElement('li');
            li.textContent = taskValue;
            taskList.appendChild(li);

            // Save to localStorage
            const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
            tasks.push(taskValue);
            localStorage.setItem('tasks', JSON.stringify(tasks));

            taskInput.value = '';
        }
    }
});

// Load tasks from localStorage
document.addEventListener('DOMContentLoaded', function() {
    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks.forEach(function(task) {
        const li = document.createElement('li');
        li.textContent = task;
        taskList.appendChild(li);
    });
});

### Testing Your To Do App

To see your app in action, simply open your HTML file in a web browser. You can add tasks, refresh the page, and even close the browser – your tasks will persist thanks to the magic of localStorage.

### Wrapping Up

Congratulations on building your very own To Do app with local storage and zero dependencies! You've learned how to create a simple yet powerful application using straightforward HTML and vanilla JavaScript. Feel free to expand on this project by adding features like task deletion, editing, or categorization.

Now it's your turn to customize and enhance your To Do app further. Happy coding!

Related posts:

×