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

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  style="width: 344px;">
                    <div >
                        Featured
                    </div>
                    <div >
                        <h5 >Note ${index   1}</h5>
                        <p > ${element}</p>
                        <button id="${index}" onclick="deleteNote(this.id)" >Delete Note</button>
                    </div>
                    <div >
                        ${(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  style="width: 1130px;">
        <div ><b>Message For You!</b></div>
        <div >
            <p ><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();
    }
})

CodePudding user response：

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  style="width: 344px;">
                    <div >
                        Featured
                    </div>
                    <div >
                        <h5 >Note ${index   1}</h5>
                        <p > ${element.text}</p>
                        <button id="${index}" onclick="deleteNote(this.id)" >Delete Note</button>
                    </div>
                    <div >
                        ${(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  style="width: 1130px;">
        <div ><b>Message For You!</b></div>
        <div >
            <p ><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();
    }
})

CodePudding user response：

Adding Date like this format dd/mm/yyyy

have to add ${i.value = new Date(element.date).toLocaleTimeString([], {year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' })}

// 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();
    }
})

// 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) {
        html  = `

        <div  style="width: 344px;">
                <div >
                    Featured
                </div>
                <div >
                    <h5 >Note ${index   1}</h5>
                    <p > ${element.text}</p>
                    <button id="${index}" onclick="deleteNote(this.id)" >Delete Note</button>
                </div>
                <div >
                    ${i.value = new Date(element.date).toLocaleTimeString([], 
                        {year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
                </div>
            </div>`;
    });
    let notesElm = document.getElementById('notes');
    if (notesObj.length != 0) {
        notesElm.innerHTML = html;
    }
    else {
        notesElm.innerHTML = `
        <div  style="width: 1130px;">
    <div ><b>Message For You!</b></div>
    <div >
        <p ><h3>Nothing to show! Use "Add a Note" section above to add notes.</h3> </p>
    </div>
    </div>`
    }

}