Building a Note-Taking App with JavaScript
Building a Note-Taking App with JavaScript: Introduction
If you want to build a note-taking app with JavaScript, you’re in the right place.
Creating a simple note-taking application is a fantastic way to sharpen your JavaScript skills.
It provides a practical project to apply concepts you may have already learned.
TL;DR: How to Build a Note-Taking App with JavaScript
Use the following steps to build a note-taking app with JavaScript:
// HTML Structure
Note-Taking App
// CSS (styles.css)
body {
font-family: Arial, sans-serif;
}
#app {
width: 300px;
margin: 0 auto;
}
#note-list {
list-style-type: none;
padding: 0;
}
.note-item {
background: #f0f0f0;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
}
// JavaScript (app.js)
const noteInput = document.querySelector('#note-input');
const addNoteButton = document.querySelector('#add-note');
const noteList = document.querySelector('#note-list');
addNoteButton.addEventListener('click', () => {
const noteText = noteInput.value;
if (noteText.trim() !== '') {
const listItem = document.createElement('li');
listItem.className = 'note-item';
listItem.textContent = noteText;
noteList.appendChild(listItem);
noteInput.value = '';
}
});
This app consists of an HTML file, a CSS file, and a JavaScript file.
The HTML structure includes an input field for the note, a button to add the note, and an unordered list to display notes.
The CSS file styles the app for better visual appearance.
The JavaScript file adds functionality to the app, enabling users to add notes and display them.
Understanding the HTML Structure
The HTML file sets up the basic structure of the app.
It includes a text input field for entering notes, a button for adding notes, and an unordered list to display the notes.
Here’s a more detailed look at the HTML structure:
Note-Taking App
The div with the id app contains the main components of the application.
The input field with the id note-input is used for note entry.
The button with the id add-note is used to add the note to the list.
The unordered list with the id note-list displays the notes.
Styling with CSS
The CSS file styles the app, making it visually appealing.
Here is how the CSS file looks:
// CSS (styles.css)
body {
font-family: Arial, sans-serif;
}
#app {
width: 300px;
margin: 0 auto;
}
#note-list {
list-style-type: none;
padding: 0;
}
.note-item {
background: #f0f0f0;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
}
The body selector sets the font for the entire document to Arial.
The #app selector centers the app in the browser window.
The #note-list selector removes the default list styles and padding.
The .note-item selector styles individual notes with a background color, margins, padding, and rounded corners.
Adding JavaScript Functionality
The JavaScript file adds interactivity to the note-taking app.
It handles the click event on the add note button, creates new list items, and appends them to the note list.
Here is the JavaScript code:
// JavaScript (app.js)
const noteInput = document.querySelector('#note-input');
const addNoteButton = document.querySelector('#add-note');
const noteList = document.querySelector('#note-list');
addNoteButton.addEventListener('click', () => {
const noteText = noteInput.value;
if (noteText.trim() !== '') {
const listItem = document.createElement('li');
listItem.className = 'note-item';
listItem.textContent = noteText;
noteList.appendChild(listItem);
noteInput.value = '';
}
});
The document.querySelector method retrieves the elements with the specified selectors.
The addNoteButton.addEventListener method attaches a click event listener to the add note button.
The noteText variable stores the value entered in the input field.
If noteText is not empty, a new list item is created and appended to the note list.
The input field is then cleared for the next note entry.
Adding Notes with JavaScript
To add notes using JavaScript, we need to capture the value from the input field and append it as a list item in the unordered list.
Here’s how to achieve this:
First, select the required elements using the document.querySelector method.
Then, add an event listener to the add note button to handle click events.
Inside the event listener function, retrieve the value from the input field.
Create a new li element and set its class name and text content.
Append the new list item to the unordered list.
Handling Edge Cases
Handling edge cases is an important part of building a robust application.
One common edge case is ensuring that empty notes are not added to the list.
This can be achieved by checking if the note text is not empty before creating the list item.
Use the trim method to remove any leading or trailing whitespace from the input value before performing the check.
If the note text is empty, simply return from the event listener function without creating the list item.
Editing and Deleting Notes
Adding editing and deleting features will make the note-taking app more functional.
To implement these features, we need to update our JavaScript code.
First, add edit and delete buttons to each note item.
Then, attach event listeners to handle the edit and delete actions.
// JavaScript (app.js)
const noteInput = document.querySelector('#note-input');
const addNoteButton = document.querySelector('#add-note');
const noteList = document.querySelector('#note-list');
addNoteButton.addEventListener('click', () => {
const noteText = noteInput.value.trim();
if (noteText !== '') {
const listItem = document.createElement('li');
listItem.className = 'note-item';
listItem.innerHTML = `${noteText} `;
noteList.appendChild(listItem);
noteInput.value = '';
}
});
noteList.addEventListener('click', (e) => {
if (e.target.classList.contains('edit-note')) {
const listItem = e.target.parentElement;
noteInput.value = listItem.textContent.replace('EditDelete', '').trim();
noteList.removeChild(listItem);
}
if (e.target.classList.contains('delete-note')) {
const listItem = e.target.parentElement;
noteList.removeChild(listItem);
}
});
We added two buttons—Edit and Delete—to each note item.
The Edit button retrieves the note text and places it back in the input field for editing.
The Delete button removes the note item from the list.
Implementing Local Storage
Local storage allows the app to remember notes even after the page is refreshed.
We can use the browser’s local storage to store and retrieve notes.
Update the JavaScript code to save notes to local storage when they are added or removed.
// JavaScript (app.js)
const noteInput = document.querySelector('#note-input');
const addNoteButton = document.querySelector('#add-note');
const noteList = document.querySelector('#note-list');
document.addEventListener('DOMContentLoaded', loadNotes);
addNoteButton.addEventListener('click', () => {
const noteText = noteInput.value.trim();
if (noteText !== '') {
addNoteToDOM(noteText);
addNoteToLocalStorage(noteText);
noteInput.value = '';
}
});
noteList.addEventListener('click', (e) => {
if (e.target.classList.contains('edit-note')) {
const listItem = e.target.parentElement;
noteInput.value = listItem.textContent.replace('EditDelete', '').trim();
removeNoteFromLocalStorage(listItem.textContent.replace('EditDelete', '').trim());
noteList.removeChild(listItem);
}
if (e.target.classList.contains('delete-note')) {
const listItem = e.target.parentElement;
removeNoteFromLocalStorage(listItem.textContent.replace('EditDelete', '').trim());
noteList.removeChild(listItem);
}
});
function addNoteToDOM(noteText) {
const listItem = document.createElement('li');
listItem.className = 'note-item';
listItem.innerHTML = `${noteText} `;
noteList.appendChild(listItem);
}
function addNoteToLocalStorage(noteText) {
let notes = getNotesFromLocalStorage();
notes.push(noteText);
localStorage.setItem('notes', JSON.stringify(notes));
}
function getNotesFromLocalStorage() {
return localStorage.getItem('notes') ? JSON.parse(localStorage.getItem('notes')) : [];
}
function removeNoteFromLocalStorage(noteText) {
let notes = getNotesFromLocalStorage();
notes = notes.filter(note => note !== noteText);
localStorage.setItem('notes', JSON.stringify(notes));
}
function loadNotes() {
let notes = getNotesFromLocalStorage();
notes.forEach(note => addNoteToDOM(note));
}
The addNoteToDOM function adds a note to the DOM.
The addNoteToLocalStorage function saves a note to local storage.
The getNotesFromLocalStorage function retrieves notes from local storage.
The removeNoteFromLocalStorage function removes a note from local storage.
The loadNotes function loads notes from local storage and displays them.
Improving User Experience
To enhance the user experience, we can add some additional features.
Consider adding a character count for the note input field.
This feature helps users know the length of their notes.
// JavaScript (app.js)
const noteInput = document.querySelector('#note-input');
const charCount = document.createElement('div');
charCount.id = 'char-count';
document.querySelector('#app').appendChild(charCount);
noteInput.addEventListener('input', () => {
charCount.textContent = `${noteInput.value.length} characters`;
});
We created a character count element and added it to the DOM.
An event listener updates the character count as the user types.
FAQs
Why is local storage important in a note-taking app?
Local storage ensures notes are saved even after a page refresh.
How do you handle invalid input in the note-taking app?
Use the trim method to avoid adding empty notes.
Can I style my app differently?
Absolutely. Customize the CSS to match your preferred style.
How do I handle long notes?
Add CSS rules to handle word wrapping or truncation.
Can I add more features to my app?
Yes. Consider adding search functionality, categories, or tagging.
Shop more on Amazon
