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
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";
}
});
});
