In this project i am making a notes taking website..It is like a webpage which can make notes for you.. *features like we can give title to our notes , we can delete any note if we don't want that note now , we can search our note by typing the note title only..* 

Index.html
 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Notes app</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
     
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Magic Notes</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            
          </ul>
          <form class="d-flex">
            <input
            id="searchtext"
              class="form-control me-2"
              type="search"
              placeholder="Search"
              aria-label="Search"
            />
            <button class="btn btn-outline-success" type="submit">
              Search
            </button>
          </form>
        </div>
      </div>
    </nav>

    <div class="container my-3">
      <h1>  Welcome To Magic Notes</h1>
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">Title</h4>
            <input
            id="addtitle"
              class="form-control me-2"
              type="text"
              placeholder="Add title"
              aria-label="text"
            />
          <div class="mb-3">
            <label for="exampleFormControlTextarea1" class="form-label"></label>
            <textarea class="form-control" id="addtext" rows="3"></textarea>
          </div>
          <button class="btn btn-primary" id="addbtn">Add note</a>
        </div>
      </div>
      <hr>
      <h3>Your Notes</h3>
      <hr>
      <div class="container-fluid row" id="notes">
          </div>
     
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
   <script src="js/app.js"></script>
  </body>
</html>




 App.js
 

console.log('hey guys! Welcome to notes app');
shownotes();
//if ab user adds a note, then add it to a local storage.

let addbtn = document.getElementById('addbtn');
addbtn.addEventListener("click", function (e){
    let addtitle = document.getElementById('addtitle');
    let addtext = document.getElementById('addtext');
    let notes = localStorage.getItem("notes");
    if (notes == null) {
        notesobj = [];
    }
    else {

        notesobj = JSON.parse(notes);
    } 
    let myobj = {
        title: addtitle.value,
        text: addtext.value,
    }
    notesobj.push(myobj);
    localStorage.setItem("notes", JSON.stringify(notesobj));
    addtext.value = "";
    addtitle.value = "";
    // console.log(notesobj);
    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 += `
        

        

          
${element.title}

          
${element.text}

          
        

      
 `;
    });
    let noteElm = document.getElementById('notes');
    if (notesobj.length != 0) {
        noteElm.innerHTML = html;
    }
    else {
        noteElm.innerHTML = `Nothing to show! use "Add a note" section above to add note.`;
    }
}
//function to delete a note.
function deleteNote(index) {
    // console.log("it is deleting", index);
    let notes = localStorage.getItem("notes");
    if (notes == null) {
        notesobj = [];
    }
    else {
        notesobj = JSON.parse(notes);
    }
    notesobj.splice(index, 1);     //splice fun. is used to insert or remove values.
    localStorage.setItem("notes", JSON.stringify(notesobj));
    shownotes();
}
let search = document.getElementById('searchtext');
search.addEventListener("input", function () {
    let inputval = search.value.toLowerCase();
    // console.log("input event fired", inputval);
    let notecards = document.getElementsByClassName('notecard');
    Array.from(notecards).forEach(function (element) {
        let cardTxt = element.getElementsByTagName("h5")[0].innerText;
        if (cardTxt.includes(inputval)) {
            element.style.display = "block";
        }
        else {
            element.style.display = "none";
        }
    })
})