Hey, developers welcome to Day 51 of our 90Days 90Projects challenge. And in Day 51 we are going to Create a simple note-taking Web application with HTML, CSS JS.
So to run this code you just need to copy the HTML and CSS code and run it into your code Editor.
Preview
![note taking app with local storage, html css javascript projects, notes app using local storage, notes webb app project, how to make a note taking web app note taking app with local storage, html css javascript projects, notes app using local storage, notes webb app project, how to make a note taking web app](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3tKC5TKo_-0LUX3xoXzE_lyWWP-1umv0cWprtVVKL0T7emhSF6HcUAI14BPnqEFf51QbbfLEfkCNIG3QWDqdVjxV0stdUqahOH1DoKVExmVAfusFbEYu8aqFRsGJ_Ik2nGY-RNBF55tzjhJdIE9mDDbu3phgJ-Fyy8s3iEwyvdsQio0pu1r0TyVAo/s16000/Create%20a%20simple%20note%20taking%20web%20application%20with%20html%20css%20js.png)
HTML Code
<!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> Geeks Notes App </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="nav">
<div>
<a class="logo" href="#"> Geeks Note </a>
</div>
</nav>
<div class="container">
<h1 class="heading">Welcome to Geeks Help Notes App </h1>
<hr>
<div class="input">
<div class="card-body">
<h2 class="card-title">Add Note</h2>
<div>
<textarea class="form-control" rows="5" id="addTxt"></textarea>
</div>
<button href="#" class="primary-btn" id="addBtn">Add Note</button>
</div>
</div>
<h1 class="notes-heading">Your Notes</h1>
<hr>
<div id="notes" class="output-container"> </div>
</div>
<script src="app.js"></script>
</body>
</html>
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Sofia+Sans:wght@700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.nav {
padding: 2rem 0;
text-align: center;
}
.logo {
font-size: 2rem;
color: #e65b00;
font-weight: bold;
text-align: center;
text-decoration: none;
}
.container {
width: 90%;
padding: 10px;
margin: 1rem auto;
}
.heading {
font-size: 1.8rem;
margin-bottom: 0.6rem;
font-family: sans-serif;
}
.input {
padding: 10px;
}
.card-title {
font-size: 1.2rem;
margin-bottom: 0.6rem;
}
textarea {
width: 100%;
resize: none;
padding: 8px;
outline: none;
border-radius: 4px;
color: rgb(72, 66, 66);
}
.primary-btn {
border: none;
color: white;
font-size: 1rem;
cursor: pointer;
padding: 5px 10px;
border-radius: 5px;
background-color: blue;
}
.primary-btn:hover {
background-color: rgb(36, 211, 27);
}
hr {
margin: 10px auto;
}
.notes-heading {
font-size: 1.4rem;
}
.delete-btn {
border: none;
font-size: 12px;
color: white;
cursor: pointer;
padding: 5px 10px;
border-radius: 2px;
background-color: red;
}
.output-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.delete-btn:hover {
background-color: #000;
}
.noteCard {
width: 250px;
margin: 1rem;
padding: 8px;
border-radius: 6px;
border: 1px solid black;
}
.card-text {
margin: 10px 0;
}
JavaScript
showNotes();
let addBtn = document.getElementById('addBtn');
addBtn.addEventListener('click', function () {
let addTxt = document.getElementById('addTxt');
let notes = localStorage.getItem('notes');
if (notes == null) {
notesObj = [];
}
else {
notesObj = JSON.parse(notes);
}
notesObj.push(addTxt.value);
localStorage.setItem('notes', JSON.stringify(notesObj));
addTxt.value = '';
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">
<div class="card-body">
<h5 class="card-title">Note ${index + 1}</h5>
<p class="card-text">${element}</p>
<button href="#" class="delete-btn" 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 = `No, notes! Click on Add Note Section to add Notes!`;
}
}
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.toLowerCase;
let noteCards = document.getElementsByClassName('noteCard');
Array.from(noteCards).forEach(function (element) {
let cardTxt = element.getElementsByTagName('p')[0].innerText;
if (cardTxt.includes(inputVal)) {
element.style.display = "block";
}
else {
element.style.display = "none";
}
});
});