Simple Todo list App
![Simple Todo list App](https://www.kingofjavascript.com/uploads/posts/thumbnails/simple_todo_list_app_1280x720.jpg)
March 03, 2023
Learn How to make Simple Todo list App using JavaScript
today I'm going to teach you how to build todo list with CURD operations using JavaScript.
Step 1) Important links
Example
Please add these links in head section in HTML
<!-- bootstrap 5.0.2 css for design --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <!-- font awesome css for icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Step 2) Add HTML:
Example
<div class="container-fluid"> <div class="container"> <div class="mx-auto mt-5" style="max-width: 700px;"> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Enter Your Name" aria-label="Recipient's username" id="username" aria-describedby="button-addon2"> <button class="btn text-white btn-info" type="button" id="addUser">Add User</button> </div> <div class="display"> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">Your Name</th> <th scope="col">Actions</th> </tr> </thead> <tbody id="records"> <tr> <th scope="row">1</th> <td>King of Javascript</td> <td><i class="btn text-white fa fa-edit btn-info mx-2"></i> <i class="btn btn-danger text-white fa fa-trash"></i></td> </tr> </tbody> </table> </div> </div> </div> </div>
Step 3) Add JavaScript:
Example
const addUserBtn = document.getElementById('addUser'); const btnText = addUserBtn.innerText; const usernameTextField = document.getElementById('username'); const recordsDisplay = document.getElementById('records'); let userArray = []; let edit_id = null; let objStr = localStorage.getItem('users'); if (objStr != null) { userArray = JSON.parse(objStr); } DisplayInfo(); addUserBtn.onclick = () => { //get user's name from text field const name = usernameTextField.value; if (edit_id != null) { //edit action userArray.splice(edit_id, 1, { 'name': name }); edit_id = null; } else { //insert action userArray.push({ 'name': name }); } SaveInfo(userArray); usernameTextField.value = ''; addUserBtn.innerText = btnText; } // store user's name in local storage function SaveInfo(userArray) { let str = JSON.stringify(userArray); localStorage.setItem('users', str); DisplayInfo(); } // display user's name function DisplayInfo() { let statement = ''; userArray.forEach((user, i) => { statement += `<tr> <th scope="row">${i+1}</th> <td>${user.name}</td> <td><i class="btn text-white fa fa-edit btn-info mx-2" onclick='EditInfo(${i})'></i> <i class="btn btn-danger text-white fa fa-trash" onclick='DeleteInfo(${i})'></i></td> </tr>`; }); recordsDisplay.innerHTML = statement; } // edit user's name function EditInfo(id) { edit_id = id; usernameTextField.value = userArray[id].name; addUserBtn.innerText = 'Save Changes'; } //delete user's name function DeleteInfo(id) { userArray.splice(id, 1); SaveInfo(userArray); }