Todo App with HTML,CSS,JS (Backend Part)

Todo App with HTML,CSS,JS (Backend Part)

Part - I

In the current busy world, we have many tasks to be completed daily. Sometimes we forget few tasks to be done.

So, the Todo app has become a part of daily life for people.

In this blog, you will be learning(Backend) how to create a simple Todo App using HTML, CSS & JS.

What is Todo App?

In the Todo app, you can add daily tasks to it and delete them once the task is completed.

Some people use apps like Notion, Onenote, ntask, and so on. (these are used for long-term schedules).

People who have fewer tasks are likely to use simple applications.

Let's Begin with HTML code...

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Notes App</title>
</head>

<body>
    <h1>Welcome to Your Notes :)</h1>
    <hr>
    <textarea name="inputAreas" id="inputArea" cols="30" rows="10" placeholder="write your note here!"></textarea>
    <button id="addNoteBtn">Add note</button>
    <hr>
    <h3>Your Notes</h3>
    <hr>
    <div class="displayNotes">
        <!-- Notes will be displayed from array -->
    </div>
    <div class="pendingTasks"></div>
    <button class="deleteAll">Delete all</button>

    <script src="app.js"></script>

</body>

</html>

If you are using VScode, press ! and hit enter. the boiler-plate for HTML will come.

  • Now add a Heading "Welcome to your notes" with an "h1" tag. And add an "hr" tag so that it divides the section with a horizontal line.
  • For adding the note we need to take input from the user. So add the "textarea" tag and give it a class-name and id named "inputArea".
  • Add a "button" tag, so that when the user clicks on it the note would be added and displayed.
  • Create an empty "div" with class "displayNotes". In this div the content will be displayed from JS code.
  • Again create an empty"div" with class "pendingTasks". This tells the user that how many tasks are left to complete.
  • Add a button to delete all the tasks.
  • Finally now create a JS file named "app.js" and link it to your HTML file.

If you followed all the steps correctly as mentioned above you can see output like this. Screenshot (117).png I know this looks ugly😬but in this part, we are concentrating on the backend.

Time for JavaScript...

  • To access HTML elements, we use document.querySelector()
let addBtn = document.querySelector('#addNoteBtn');
let inputData = document.querySelector('#inputArea');
let displayNotes = document.querySelector('.displayNotes')
let pendingTasks = document.querySelector('.pendingTasks');
let deleteAllBtn = document.querySelector('.deleteAll');
let printDate = document.querySelector('.printDate');
  • Now add an event listener for addBtn.

    addBtn.addEventListener('click', () => {
      //code
    });
    
  • So when the button is clicked, the text entered by the user in the textArea, its value will be taken into userInput variable.

    let userInput = inputData.value;
    
  • If the user tries to add an empty note, ALERT user to enter some text in the note to add it.

    if(userInput == '') return alert('Please enter a Note :)');
    
  • We want to show the notes to the user, even if the user restarts his browser. So to store the data we use localStorage.

Definition: The localStorage object stores data with no expiration date. The data will not be deleted when the browser is closed and will be available the next day, week, or year.

  • By using localStorage.getItem('New todo'), you are getting an item from localStorage and know whether is it present or not.
let getLocalStorage = localStorage.getItem('New todo');
  • Now check whether the getLocalStorage is NULL or not. If it is NULL create an empty array. If NOT NULL then parse(Here parsing means, the string is being transformed into JSON Object) the getLocalStorage and insert it into an array.

    if (getLocalStorage == null) {
          listArr = [];
      }
      else {
          listArr = JSON.parse(getLocalStorage);
      }
    
  • After this, push the userInput value into listArr.

    listArr.push(userInput);
    
  • You have pushed the userInput into the listArr, Now it's time to set the key and value of localStorage. this actually stores the data in the localStorage.

    localStorage.setItem("New todo", JSON.stringify(listArr));
    
  • We use JSON.stringify() to transform the JSON Object into string to store it in the localStorage.

  • When the user clicks on Add note button, the data will be added and from the below code the text in inputArea will be cleared.

    inputData.value = '';
    

    showNotes function

    Using this function we will display all the tasks to the user.

  • As to show the tasks, we need to get the data from localStorage. So

    let getLocalStorage = localStorage.getItem('New todo');
    
  • Again we have to check whether the storage is empty or not.

    if (getLocalStorage == null) {
          listArr = [];
      }
      else {
          listArr = JSON.parse(getLocalStorage);
      }
    
  • Now declare a TagLine. Using this we will display the content to the user(we can use string literals in this).

    let newTagLine = ``;
    
  • Using forEach we will iterate through listArr, which contains data entered by the user and display it.

    listArr.forEach((element, index) => {
          newTagLine += `
          <p>${element}</p>
          <button id="delNoteBtn" onclick="deleteNote(${index})">Delete note</button>
          <hr/>`
      })
    
  • In the above code, we have written some HTML code, which should be displayed in the empty div displayNotes.

    displayNotes.innerHTML = newTagLine;
    
  • Now, let's set the value of pending tasks.

    pendingTasks.innerHTML = `<p>You are left with ${listArr.length} tasks</p>`
    

    deleteNote function(deletes single note)

  • As to delete a note, first we have to check the get the storage and parse the listArr.

    let getLocalStorage = localStorage.getItem('New todo');
    listArr = JSON.parse(getLocalStorage);
    
  • Now to delete a particular note, this function takes an argument index. Using splice method we can delete a note.

    listArr.splice(index, 1);
    
  • After deleting a note, we have to update the listArr and run.

    localStorage.setItem('New todo', JSON.stringify(listArr));
    showNotes();
    

    Deleting all notes at a time

  • Add an eventListener to the deleteAllBtn to reset total array(listArr).

  • In this simply just reset the listArr to an empty array and update the array. It will become empty.
    deleteAllBtn.addEventListener('click', () => {
      listArr = [];
      localStorage.setItem('New todo', JSON.stringify(listArr));
      showNotes()
    })
    
    FULL JS CODE Here👇
let addBtn = document.querySelector('#addNoteBtn');
let inputData = document.querySelector('#inputArea');
let displayNotes = document.querySelector('.displayNotes')
let pendingTasks = document.querySelector('.pendingTasks');
let deleteAllBtn = document.querySelector('.deleteAll');
let printDate = document.querySelector('.printDate');
let listArr;
showNotes();

//Adding NOTE
addBtn.addEventListener('click', () => {

    let userInput = inputData.value;

    //If user press add note without any content it doestn't add empty content
    if(userInput == '') return alert('Please enter a Note :)');

    let getLocalStorage = localStorage.getItem('New todo');

    if (getLocalStorage == null) {
        listArr = [];
    }

    else {
        listArr = JSON.parse(getLocalStorage);
    }

    listArr.push(userInput);
    localStorage.setItem("New todo", JSON.stringify(listArr));
    inputData.value = '';
    showNotes();
})

//deleting all tasks
deleteAllBtn.addEventListener('click', () => {
    listArr = [];
    localStorage.setItem('New todo', JSON.stringify(listArr));
    showNotes()
})

//showing all the notes
function showNotes() {
    let getLocalStorage = localStorage.getItem('New todo');

    if (getLocalStorage == null) {
        listArr = [];
    }
    else {
        listArr = JSON.parse(getLocalStorage);
    }
    let newTagLine = ``;
    listArr.forEach((element, index) => {
        newTagLine += `
        <p>${element}</p>
        <button id="delNoteBtn" onclick="deleteNote(${index})">Delete note</button>
        <hr/>`
    })

    displayNotes.innerHTML = newTagLine;

    pendingTasks.innerHTML = `<p>You are left with ${listArr.length} tasks</p>`
}

function deleteNote(index){
    let getLocalStorage = localStorage.getItem('New todo');
    listArr = JSON.parse(getLocalStorage);
    listArr.splice(index, 1);

    localStorage.setItem('New todo', JSON.stringify(listArr));
    showNotes();
}

Andddddd........Finally, this is it for this part. In the upcoming part, we will be designing the app.

I hope you found the article insightful and informative. Please like/share so that it reaches others as well.

Let's connect ->

SEE YOU IN OTHER PART💗