index.js

//Add note

let formContainer = document.querySelector("#container");
let noInput = document.querySelector("#noInputText");
let noteInput = document.getElementById("note");

noteInput.addEventListener("click", function () {
  noInput.classList.remove("show");
});


formContainer.addEventListener("submit", event => {
  event.preventDefault()
  let noteobj = [];
  let addtxt = document.getElementById("note");
  let notes = localStorage.getItem("notes");

  if (notes == null) {
    noteobj = []
  }
   else {
    noteobj = JSON.parse(localStorage.getItem("notes"));
    console.log('noteobj', noteobj);
  }

  if (addtxt.value != "") {
    noteobj.push(addtxt.value);
  } 
  else {
    noInput.classList.add("show");
  }

  localStorage.setItem("notes", JSON.stringify(noteobj));
  noteInput.value = ""

  showNotes();

});

function showNotes() {
  let notesobj = JSON.parse(localStorage.getItem("notes"));
  console.log(notesobj);

  if (notesobj == null) {
    notesobj = [];
  } 
  else {
    notesobj = JSON.parse(localStorage.getItem("notes"));
  }

  let html = "";
  notesobj.forEach(function (element, index) {
    html += `
      <div class="box" id="box-${index}" >
        <h5>NOTE :${index + 1}</h5>
        <div class="swappable">
          <p>${element.toUpperCase()}</p>
        </div>
        <button id=delete onclick=deleted(${index})>Delete note</button>
      </div>
    `;
  });

  let box = document.getElementById("mainbox");
  box.innerHTML = html;

}

function deleted(index) {
  let notes = localStorage.getItem("notes");

  if (notes == null) {
    noteobj = [];
  } 
  else {
    noteobj = JSON.parse(localStorage.getItem("notes"));
  }
  noteobj.splice(index, 1);
  localStorage.setItem("notes", JSON.stringify(noteobj));
  showNotes();
  
}