<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" id="OnlineNotes" href="#">Online Notes 📝 </a>
        <h6 id="TotalNotes"></h6>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">

            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" id="searchTxt" type="search" placeholder="Search"
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

    <div class="container my-3">
        <h1>Welcome To Online Notes</h1>
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Add a note</h5>
                <div class="form-group">
                    <textarea class="form-control" id="addTxt" rows="3" placeholder="Write some notes.."></textarea>
                <button class="btn btn-primary" id="addBtn" onclick="relode()">Add Note</button>
                <button class="btn btn-primary" id="ClearAll" onclick="ClearAll()">Clear All</button>
        <h1>Your Notes</h1>


        <div id="notes" class="row container-fluid"></div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"



body {
        font-family: Ubuntu;

    #TotalNotes {
        color: white;
        position: relative;
        top: 10px;


    #OnlineNotes:hover {
        color: #ecebeb;
        cursor: pointer;

let addBtn = document.getElementById('addBtn');

addBtn.addEventListener('click', function () {


    //! this function will fire 🔥 when some on will click on it 🖱️

    let addTxt = document.getElementById('addTxt'); //*  Grabbing the text area
    let notes = localStorage.getItem('notes');      //*Grabbing notes form local storage

    if (notes === null) notesObj = []; //* if the local storage  is empty than print a blank array 

    else notesObj = JSON.parse(notes) // * Otherwise print the note of the user to the console and convert it from string to array

    notesObj.push(addTxt.value);   // *pushing text of user to our local storage

    // here in LocalStorgae we will add a key and value respectivley notes and notesObj.the data type of notesObj  will be string  

    localStorage.setItem("notes", JSON.stringify(notesObj));//? now we are settting the key to 'notes'  and  the value to  note of the user

    // !Removing the written note of the user when submite/save the note
    addTxt.value = '';

    // ! Displaying notes to our DOM

    * In order to display your notes to you Dom. you have to create a function 
    * and name whatever you want but here i will name Shownote and   

    // * run the fucntion named showNotes()
    showNotes() // TODO: you can also remove this beacuse we have the same function claiing it above 


function showNotes() {
    // here we will use the same code which we have previously used whern we are cheaking the notes 

    let notes = localStorage.getItem("notes");
    if (notes == null) notesObj = [];
    else notesObj = JSON.parse(notes);
    // ? Now we will add our Html and CSS to each and every box which is popped out when the user add a new note

    // TODO: Note
    // *  in my   case there is no css beacuse i are use bootstrap but
    // *  you can always add a style tag inside the html.if you are
    //  * using your own style

    // ! Now we will use for each loop because user can add as many notes as he/she want 

    // ?here we will crete a blank variable name html 
    let html = ""; // undefine 

    // ? first we will grabe the note of the user 
    // ? than we will fire 🔥 for each loop 
    // ? than give it two parameter  (element and index)
    // ? and then we will finally run our function
    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>
            <p id="demo" class="card-text"> ${element}</p>
             <button id="${index}"onclick="deleteNote(this.id)" class="btn btn-primary">Delete Note</button>

    // !if there is no notes than display the following message otherwise sidplay nothing
    let notesElm = document.getElementById("notes");

    if (notesObj.length == 0) notesElm.innerHTML = `Nothing to show!  <strong>  Use "Add a Note" Button to add notes.</strong>`;
    else notesElm.innerHTML = html;

// !when some body click on 'Clear All' than clear the whole local storgae. 

let ClearAll = document.getElementById('ClearAll');
ClearAll.addEventListener('click', ClearAllFunction);

function ClearAllFunction() {
    let confirming = confirm('Are you sure')
    if (confirming === true) {

// ! function to delete a sepcific note

function deleteNote(index) {

    let notes = localStorage.getItem('notes');

    if (notes === null) DeletingSpecificNotesArray = [];
    else DeletingSpecificNotesArray = JSON.parse(notes)

    // and finally we will ask the user he/She is sure or note
    let confirmingForSpecificNotes = confirm('Are you sure')
    if (confirmingForSpecificNotes === true) {
        // ? here index is the specife note of the user and 1 specifies that we wnat ot delete only one note
        DeletingSpecificNotesArray.splice(index, 1)

        // ?Now i will finallly set the notes to the localstorgae
        localStorage.setItem("notes", JSON.stringify(DeletingSpecificNotesArray))

        // ? show notes will show the remaining notes


// ! Totol number of notes by the user
let TotalNotes = document.getElementById('TotalNotes');
TotalNotes.innerText = `Total Number of Notes = ${notesObj.length}🙂`;
if (notesObj.length === 0)
    TotalNotes.innerText = `No notes Yet 😔 `;

// ! filter Search 

// so to so we will use input event listiner

let search = document.getElementById('searchTxt');

search.addEventListener('input', function () {
    let inputVal = search.value.toLowerCase(); // Grabbbing the search box
    let noteCard = document.getElementsByClassName('noteCard'); // Grabbing the note by the user/Grabbing all the classes from NoteCards 
    let HighLight = document.getElementById('demo')
    Array.from(noteCard).forEach(function (document) {
        let cardTxt = document.getElementById("demo").innerText;
        // if the serach include the same text than dispaly it otherwise dont display it 
        if (cardTxt.includes(inputVal)) {
            document.style.display = "block";
            HighLight.style.background = "orange";
        else document.style.display = "none"


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.