JavaScript, define a date for each created item, working with notes

Issue

I want time and date function in my Notes which will be saved by user. I tried but it will change for every notes whenever user try to add new note so the previous notes time is also changed. So what should i do ?

Here is my code:

// function to show notes from local storage
function showNotes() {
  let notes = localStorage.getItem("notes");
  if (notes == null) {
    notesObj = [];
  } else {
    notesObj = JSON.parse(notes);
  }

  let html = "";
  notesObj.forEach(function (element, index, i, dayValue) {
    html += `
    
            <div class="noteCard card text-center mr-3 mb-3 border-dark" style="width: 344px;">
                    <div class="card-header bg-dark text-light">
                        Featured
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">Note ${index + 1}</h5>
                        <p class="card-text"> ${element}</p>
                        <button id="${index}" onclick="deleteNote(this.id)" class="btn btn-outline-danger my-4">Delete Note</button>
                    </div>
                    <div class="card-footer text-light bg-secondary">
                        ${(i.value = new Date().toLocaleTimeString([], {
                          hour: "2-digit",
                          minute: "2-digit"
                        }))}
                    </div>
                </div>`;
  });
  let notesElm = document.getElementById("notes");
  if (notesObj.length != 0) {
    notesElm.innerHTML = html;
  } else {
    notesElm.innerHTML = `
            <div class="card text-light bg-dark mb-3" style="width: 1130px;">
        <div class="card-header text-dark bg-warning"><b>Message For You!</b></div>
        <div class="card-body">
            <p class="card-text"><h3>Nothing to show! Use "Add a Note" section above to add notes.</h3> </p>
        </div>
        </div>`;
  }
}

// If user adds a note, add it to the localStorage
let addBtn = document.getElementById('addBtn');
addBtn.addEventListener('click', function (e) {

    let addTxt = document.getElementById("addTxt");
    if (addTxt.textLength == 0) {
        alert("Please write something in text box first!")
    }
    else {
        let notes = localStorage.getItem("notes");
        if (notes == null) {
            notesObj = [];
        }
        else {
            notesObj = JSON.parse(notes);
        }
        notesObj.push({text: addTxt.value, date : new Date()});
        localStorage.setItem("notes", JSON.stringify(notesObj));
        addTxt.value = "";
        // console.log(notesObj);
        showNotes();
    }
})

Solution

For this to work, you need to change each note from being a string (the input text) to an object with a text field and a date field. The text will be the input text and the date, its creation time. Then the code for formatting and showing the date would be new Date(element.date).toLocaleTimeString... instead of new Date().toLocaleTimeString...

Working Codepen here and the code below:

function showNotes() {
  let notes = localStorage.getItem("notes");
  if (notes == null) {
    notesObj = [];
  } else {
    notesObj = JSON.parse(notes);
  }
console.log( notesObj)
  let html = "";
  notesObj.forEach(function (element, index, i, dayValue) {
    html += `
    
            <div class="noteCard card text-center mr-3 mb-3 border-dark" style="width: 344px;">
                    <div class="card-header bg-dark text-light">
                        Featured
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">Note ${index + 1}</h5>
                        <p class="card-text"> ${element.text}</p>
                        <button id="${index}" onclick="deleteNote(this.id)" class="btn btn-outline-danger my-4">Delete Note</button>
                    </div>
                    <div class="card-footer text-light bg-secondary">
                        ${(i.value = new Date(element.date).toLocaleTimeString([], {
                          hour: "2-digit",
                          minute: "2-digit"
                        }))}
                    </div>
                </div>`;
  });
  let notesElm = document.getElementById("notes");
  if (notesObj.length != 0) {
    notesElm.innerHTML = html;
  } else {
    notesElm.innerHTML = `
            <div class="card text-light bg-dark mb-3" style="width: 1130px;">
        <div class="card-header text-dark bg-warning"><b>Message For You!</b></div>
        <div class="card-body">
            <p class="card-text"><h3>Nothing to show! Use "Add a Note" section above to add notes.</h3> </p>
        </div>
        </div>`;
  }
}

// If user adds a note, add it to the localStorage
let addBtn = document.getElementById('addBtn');
addBtn.addEventListener('click', function (e) {

    let addTxt = document.getElementById("addTxt");
    if (addTxt.textLength == 0) {
        alert("Please write something in text box first!")
    }
    else {
        let notes = localStorage.getItem("notes");
        if (notes == null) {
            notesObj = [];
        }
        else {
            notesObj = JSON.parse(notes);
        }
        notesObj.push({text: addTxt.value, date : new Date()});
        localStorage.setItem("notes", JSON.stringify(notesObj));
        addTxt.value = "";
        // console.log(notesObj);
        showNotes();
    }
})

Answered By - yousoumar