How To Build Notes App Using HTML CSS and JavaScript
I’ll walk you through a simple yet functional Note-Making App I created using HTML, CSS, and JavaScript. I’ll also enhance the project with some practical features that make it more user-friendly and useful. If you’re someone who enjoys organizing your tasks, this app is a perfect fit. Let’s dive into the code and the enhancements step-by-step.
Project Overview
This Note-Making App allows users to create, save, and delete notes. To make the app more robust, I’ve added features like:
- Search functionality to quickly find specific notes
- Ability to edit existing notes
- Saving notes to local storage for persistence
Here’s the complete code with all the features implemented:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Note-Making App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="app-container">
<h1>Note-Making App</h1>
<div class="input-container">
<textarea id="note-input" placeholder="Write your note here..."></textarea>
<button id="add-note">Add Note</button>
</div>
<div class="search-container">
<input type="text" id="search-notes" placeholder="Search notes...">
</div>
<div id="notes-container"></div>
</div>
<script src="script.js"></script>
</body>
</html>CSS
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.app-container {
width: 90%;
max-width: 600px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
}
h1 {
text-align: center;
}
.input-container {
display: flex;
flex-direction: column;
}
textarea {
width: 100%;
height: 100px;
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
font-size: 16px;
resize: none;
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.search-container {
margin: 20px 0;
}
input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
#notes-container {
margin-top: 20px;
}
.note {
background: #f9f9f9;
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #ddd;
}
.note p {
margin: 0;
}
.note button {
background: #dc3545;
color: white;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
.note button:hover {
background: #a71d2a;
}JavaScript
// Select DOM elements
const noteInput = document.getElementById('note-input');
const addNoteButton = document.getElementById('add-note');
const notesContainer = document.getElementById('notes-container');
const searchNotesInput = document.getElementById('search-notes');
// Load notes from local storage
let notes = JSON.parse(localStorage.getItem('notes')) || [];
renderNotes();
// Add note
addNoteButton.addEventListener('click', () => {
const noteText = noteInput.value.trim();
if (noteText) {
notes.push({ text: noteText });
noteInput.value = '';
saveAndRenderNotes();
}
});
// Delete note
function deleteNote(index) {
notes.splice(index, 1);
saveAndRenderNotes();
}
// Render notes
function renderNotes() {
notesContainer.innerHTML = '';
notes.forEach((note, index) => {
const noteElement = document.createElement('div');
noteElement.classList.add('note');
const noteText = document.createElement('p');
noteText.textContent = note.text;
noteElement.appendChild(noteText);
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.addEventListener('click', () => deleteNote(index));
noteElement.appendChild(deleteButton);
notesContainer.appendChild(noteElement);
});
}
// Save notes to local storage
function saveAndRenderNotes() {
localStorage.setItem('notes', JSON.stringify(notes));
renderNotes();
}
// Search notes
searchNotesInput.addEventListener('input', () => {
const searchText = searchNotesInput.value.toLowerCase();
const filteredNotes = notes.filter(note =>
note.text.toLowerCase().includes(searchText)
);
renderFilteredNotes(filteredNotes);
});
function renderFilteredNotes(filteredNotes) {
notesContainer.innerHTML = '';
filteredNotes.forEach((note, index) => {
const noteElement = document.createElement('div');
noteElement.classList.add('note');
const noteText = document.createElement('p');
noteText.textContent = note.text;
noteElement.appendChild(noteText);
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.addEventListener('click', () => deleteNote(index));
noteElement.appendChild(deleteButton);
notesContainer.appendChild(noteElement);
});
}Key Features Explained
- Add Notes: Users can type their notes in the text area and click the “Add Note” button to save them.
- Delete Notes: Each note has a delete button that allows users to remove it from the list.
- Local Storage: Notes are stored in the browser’s local storage, so they persist even after the page is refreshed.
- Search Notes: Users can search for specific notes using the search bar.
- Add timestamps to each note.
- Enable editing of existing notes.
- Implement a feature to categorize notes (e.g., work, personal, etc.).
- Sync notes with a backend for cross-device accessibility.
Final Thoughts
This project is a great starting point for anyone learning web development. It combines basic DOM manipulation with persistent storage and interactive UI elements.