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
- Beautiful design
- Userfriendly
- Easy to Use
- Javascript
- Search Filter
- 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.
- Create 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 ©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>
- Create Javascript file named (app.js)
// 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.
.png)
 ){kind=link}
0 Comments