app.js

console.log('hello'); 
showNotes();

//if user adds a note add it to the local storage
var obj=[];
let addbtn=document.getElementById('addBtn');
addbtn.addEventListener("click",function(e){

    let addTxt=document.getElementById("addTxt");
    let notes=localStorage.getItem("notes");
    
    if(notes==null){
        Obj=[];
       // Array.from(obj);
    }
    else{
        Obj=JSON.parse(notes);
    }
  
    obj.push(addTxt.value);
    localStorage.setItem("notes",JSON.stringify(obj));
    addTxt.value="";
    console.log(obj);
    showNotes();
    
});

function showNotes() {
    let notes = localStorage.getItem("notes");
    if (notes == null) {
      notesObj = [];
    } else {
      notesObj = JSON.parse(notes);
    }
    let html = "";
    notesObj.forEach(function(element, index) {
      html += `
              <div class="noteCard my-2 mx-2 card" style="width: 18rem;">
                      <div class="card-body">
                          <h5 class="card-title">Note ${index + 1}</h5>
                          <button id="${index}" onclick="deleteNote(this.id)" class="btn btn-primary">Delete Note</button>
                          <p class="card-text"> ${element}</p>
                      </div>
                  </div>`;
    });
    let notesElm = document.getElementById("notes");
    if (notesObj.length != 0) {
      notesElm.innerHTML = html;
    } else {
      notesElm.innerHTML = `Nothing to show! Use "Add a Note" section above to add notes.`;
    }
  }


  function deleteNote(index) {
   console.log("iam deleting note",index);
   
   let notes = localStorage.getItem("notes");
   if (notes == null) {
     notesObj = [];
   } else {
     notesObj = JSON.parse(notes);
   }
   notesObj.splice(index,1);
   
   localStorage.setItem("notes",JSON.stringify(notesObj));
   showNotes();

  }

  let search=document.getElementById('searchTxt');
  search.addEventListener('input',function () {
    textVal=search.value;
    console.log('input fuction triggered',textVal);
    
    
    let noteCards=document.getElementsByClassName("noteCard ");
    Array.from(noteCards).forEach(function (element) {
      let cardtext=element.getElementsByTagName('p')[0].innerHTML;
      if(cardtext.includes(textVal)){
        element.style.display="block";

      }
      else{
      element.style.display="none";
      }
      //console.log(cardtext )
      
    })




  })