Creating a Todo List App using JavaScript

In this tutorial, we will be creating a simple Todo List app using JavaScript. We will also be using local-storage to store the todo items so that they persist even after the browser is closed.

HTML

First, let’s set up the HTML structure for our todo list app. We will have an input field to add new todo items, a button to add the item, and a list to display the items.

        
            <input type="text" id="todoInput" placeholder="Enter a new todo">
            <button onclick="addTodo()">Add</button>
            <ul id="todoList"></ul>
        
    

JavaScript

Next, we will write the JavaScript code to handle adding todo items and using local-storage to save and retrieve the items.

        
            function addTodo() {
                var input = document.getElementById('todoInput').value;
                if (input === '') {
                    alert('Please enter a todo item');
                } else {
                    var todoList = document.getElementById('todoList');
                    var li = document.createElement('li');
                    li.appendChild(document.createTextNode(input));
                    todoList.appendChild(li);
                    saveTodo(input);
                }
            }

            function saveTodo(todo) {
                var todos = JSON.parse(localStorage.getItem('todos')) || [];
                todos.push(todo);
                localStorage.setItem('todos', JSON.stringify(todos));
            }

            function loadTodos() {
                var todos = JSON.parse(localStorage.getItem('todos')) || [];
                var todoList = document.getElementById('todoList');
                todos.forEach(function(todo) {
                    var li = document.createElement('li');
                    li.appendChild(document.createTextNode(todo));
                    todoList.appendChild(li);
                });
            }

            loadTodos();
        
    

Local Storage

We are using the localStorage API to save and retrieve the todo items. The data is stored as a JSON string, so we use JSON.parse() and JSON.stringify() to convert the data to and from a string.

Conclusion

With just a few lines of JavaScript code, we have created a simple todo list app that uses local-storage to persist the todo items. This is a great example of how powerful JavaScript can be for creating interactive and dynamic web applications.