app.js

console.log("Welcome to Magic Notes");

// When the page will reload then it will show the localstorage notes. Which was added previously.
showNotes();

// If User adds a note, add it to localStorage
const addBtn = document.getElementById("addBtn");
addBtn.addEventListener("click", (e) => {
  const addTxt = document.getElementById("addTxt");
  const addTitle = document.getElementById("addTitle");
  const isImportant = document.getElementById("isImportant");

  const notes = localStorage.getItem("notes");
  //   console.log(addTxt);
  //   console.log(notes);
  if (notes == null) {
    //notesObj is a Global Variable.
    notesObj = [];
  } else {
    notesObj = JSON.parse(notes);
  }

  let myObj = {
    title: addTitle.value,
    text: addTxt.value,
    isImp: isImportant.checked,
  };
  if (myObj.title != "" || myObj.text != "") {
    notesObj.push(myObj);
    localStorage.setItem("notes", JSON.stringify(notesObj));
    addTxt.value = "";
    addTitle.value = "";
    document.getElementById("isImportant").checked = false;
  } else {
    alert("Please Write a Note.");
  }
  // console.log(myObj);
  showNotes();
});

// Function to Show Notes
function showNotes() {
  const notes = localStorage.getItem("notes");
  if (notes == null) {
    notesObj = [];
  } else {
    notesObj = JSON.parse(notes);
  }
  let html = "";

  notesObj.forEach(function (element, index) {
    if (element.isImp) {
      html += `
          <div class="noteCard my-2 mx-2 card" style="width: 18rem;">
                  <div class="card-body">
                      <h5 class="card-title importantNote">${element.title} <span class="badge bg-danger impbadge">Important</span></h5>
                      <p class="card-text"> ${element.text}</p>
                      <button id="${index}"onclick="deleteNote(this.id)" class="btn btn-primary">Delete Note</button>
                  </div>
              </div>`;
    } else {
      html += `
            <div class="noteCard my-2 mx-2 card" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">${element.title}</h5>
                        <p class="card-text"> ${element.text}</p>
                        <button id="${index}"onclick="deleteNote(this.id)" class="btn btn-primary">Delete Note</button>
                    </div>
                </div>`;
    }
  });

  let notesElement = document.getElementById("notes");
  if (notesObj.length != 0) {
    notesElement.innerHTML = html;
  } else {
    notesElement.innerHTML = `Nothing to show! Use "Add a Note" section above to add notes.`;
  }
}

// Function to delete a note.
function deleteNote(index) {
  console.log("I am Deleting", index);
  notesObj.splice(index, 1);
  localStorage.setItem("notes", JSON.stringify(notesObj));
  showNotes();
}

const search = document.getElementById("searchTxt");
search.addEventListener("input", function () {
  let inputVal = search.value.toLowerCase();
  console.log("Input event fired!!!!!", inputVal);

  const noteCards = document.getElementsByClassName("noteCard");
  Array.from(noteCards).forEach(function (element) {
    let cardTxt = element.getElementsByTagName("p")[0].innerText.toLowerCase();
    if (cardTxt.includes(inputVal)) {
      element.style.display = "block";
    } else {
      element.style.display = "none";
    }
  });
});