Simple Todo list App

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>

Try this code

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);

}

Try this code