Hi,

Today in this article I will share a project with you. This is a Project Made with Bootstrap and Javascript It is very good for Parctice Javascript for those developers who were new in Javascript or programming.

About this Project:

Name: Notes APP

Made with: Bootstrap and Javascript.

Made By: Team_amaos

Programming Languages Used: BOOTSTRAP and JAVASCRIPT. 

Features / Topics Covered

  • Bootstrap 
  1. Beautiful design 
  2. Userfriendly 
  3. Easy to Use
  • Javascript
  1. Search Filter
  2. localstorage

Description:

This project is good for those Javascripts learner who are currently learning localStorage topic in Javascript Because in this project we mostly  focus on localStorage topic.

Pictures of the Project:



Copy the code or Download directly from button at the end of the post.

  1. Create Index.html file.
Copy the following code. and paste in Index.html file.

<!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 || Single Page Application || By ALI Khan</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="shortcut icon"
        href="img/png-transparent-pad-and-pencil-logo-computer-icons-editing-favicon-edit-notes-icons-miscellaneous-desktop-wallpaper-apple-icon-image-format-thumbnail-removebg-preview.png"
        type="image/x-icon">
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="#">Notes App</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">

                    <hr class="dropdown-divider">
                    </li>
                    <!-- <li><a class="dropdown-item" href="#">Something else here</a></li> -->
                </ul>
                </li>
                <!-- <li class="nav-item">
                        <a class="nav-link disabled">Disabled</a>
                    </li> -->
                </ul>
                <form class="d-flex">
                    <input id="searchTxt"  class="form-control me-2" type="search" placeholder="Search"
                        aria-label="Search">
                    <button class="btn btn-outline-primary" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>
    <div class="container" id="alert"></div>
    <div class="container my-3">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">ADD A NOTE</h5>
                <div class="mb-3">
                    <textarea class="form-control" id="addtxt" rows="3"></textarea>
                </div>
                <button class="btn btn-primary" id="addbtn">ADD NOTE</button>
            </div>
        </div>
        <hr>
        <h1>Your Notes</h1>
        <hr>
        <div id="notes" class="row container-fluid">
            <!-- <div class="my-2 mx-2 card" style="width: 18rem;">
                <div class="card-body">
                  <h5 class="card-title">Your Note</h5>
                  <p class="card-text"></p>
                  <a href="#" class="btn btn-primary">Delete Note</a>
                </div> -->
        </div>
    </div>

    <div class="card text-center">
        <div class="card-header">NOTES APP</div>
        <div class="card-body">
            <h5 class="card-title"></h5>
            <p class="card-text">Hi, I am <b>ALI KHAN </b>Web developer Follow Me On Insta & Twitter</p>
            <a href="https://twitter.com/frontend_tips_" class="btn btn-primary">Join Me On Twitter</a>
            <a href="https://www.instagram.com/frontend_tips_/" class="btn btn-primary">Join Me On Insta</a>

        </div>
        <div class="card-footer text-muted">Made With ❤ By Ali Khan &copy;2022</div>
    </div>
    <!-- Javascript Files Includes................................................................................... -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
        integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
        integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
        crossorigin="anonymous"></script>
    <script src="JS/App.js"></script>
</body>

</html>
  1. Create Javascript file named (app.js)
Copy the Code which is given below and  paste in  Javascript file.

// localStorage.clear()
showNotes()
let addbtn = document.getElementById('addbtn')
addbtn.addEventListener('click' ,function() {
    let addtxt = document.getElementById('addtxt');
    let notes =localStorage.getItem('notes');
    if (addtxt.value == '') {
        let alert = document.getElementById('alert');
        let html = `<div class="alert alert-danger" role="alert">
        Warning! Please Enter Some Text Below!
        </div>`
        alert.innerHTML = html;
        setTimeout(() => {
          alert.innerHTML = '';
        }, 3000);
       
    }
    else{
        notesObj.push(addtxt.value)
        localStorage.setItem('notes', JSON.stringify(notesObj))
        addtxt.value = '';
    }
    if (notes == null) {
        notesObj  = []
    } else {
        notesObj = JSON.parse(notes)
    }
   
    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 += `
        <div class="noteCard my-2 mx-2 card " style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Note ${index + 1}</h5>
          <p class="card-text">${element}</p>
          <button class="btn btn-primary" id="${index}" onclick="deleteNote(this.id)">Delete Note</button>
        </div>
      </div>
        `
    });
    let notesElm = document.getElementById('notes');
    if (notesObj.length != 0) {
        notesElm.innerHTML = html
    }
    else{
        notesElm.innerHTML = `Nothing to Show ! `
    }
}
function deleteNote(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 () {
    let inputVal = search.value;
    // console.log('i f' , inputVal)
    let noteCard = document.getElementsByClassName('noteCard');
    Array.from(noteCard).forEach(function(element) {
        let cardTxt =  element.getElementsByTagName("p")[0].innerText;
// console.log(cardTxt)
     if (cardTxt.includes(inputVal)) {
         element.style.display = "block";
     }    
else{
    element.style.display = "none";

}

    })
})


OR

directly download from button.


Thanks for reading the the article.