I recently worked on an exciting project creating a Note-Taking App with JavaScript from scratch. This simple yet powerful application allows users to jot down notes quickly, view them in an organized list, and manage them efficiently. Below, I’ll take you through the project in detail—from concept to completion and explain the key features and technical choices.
Project Overview
As a developer, I understand how crucial it is to have tools that simplify daily tasks. The note-taking app was designed with this goal in mind: to provide an intuitive and responsive interface for capturing and managing ideas.
Here’s what the app does:
- Add Notes: Users can input a title and description for their notes.
- View Notes: Added notes are displayed in a dynamic, scrollable list.
- Delete Notes: Individual notes can be removed easily.
- Responsive Design: The app looks great on both desktop and mobile devices.
HTML Structure
The HTML provides the basic framework of the app. Key elements include:
- An input field for the note title.
- A textarea for the note description.
- A button to add the note.
- A container to display the list of notes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Note-Taking App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="app-container">
<h1>Note-Taking App</h1>
<div class="note-input">
<input type="text" id="note-title" placeholder="Enter Title">
<textarea id="note-description" placeholder="Enter Description"></textarea>
<button id="add-note">Add Note</button>
</div>
<div id="notes-container">
<p>No notes available</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Styling with CSS
Using CSS, I styled the app to ensure a clean and user-friendly interface. The layout is responsive, with proper spacing and modern design elements.
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: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.note-input {
margin-bottom: 20px;
}
input, textarea {
width: 100%;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
width: 100%;
background-color: #28a745;
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
#notes-container {
border-top: 1px solid #ddd;
padding-top: 10px;
}
.note {
background: #f9f9f9;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 10px;
position: relative;
}
.note button {
position: absolute;
top: 10px;
right: 10px;
background: #dc3545;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.note button:hover {
background: #c82333;
}JavaScript for Functionality
JavaScript is the backbone of the app, providing interactivity and logic. Key functionalities include adding notes, dynamically rendering them, and deleting individual notes.
const addNoteButton = document.getElementById('add-note');
const notesContainer = document.getElementById('notes-container');
addNoteButton.addEventListener('click', () => {
const title = document.getElementById('note-title').value;
const description = document.getElementById('note-description').value;
if (title.trim() === '' || description.trim() === '') {
alert('Both fields are required!');
return;
}
const note = document.createElement('div');
note.classList.add('note');
note.innerHTML = `
<h2>${title}</h2>
<p>${description}</p>
<button class="delete-note">Delete</button>
`;
const deleteButton = note.querySelector('.delete-note');
deleteButton.addEventListener('click', () => {
notesContainer.removeChild(note);
if (notesContainer.children.length === 0) {
notesContainer.innerHTML = '<p>No notes available</p>';
}
});
notesContainer.appendChild(note);
// Clear inputs
document.getElementById('note-title').value = '';
document.getElementById('note-description').value = '';
// Remove placeholder text if notes exist
const placeholder = notesContainer.querySelector('p');
if (placeholder) {
notesContainer.removeChild(placeholder);
}
});Outcome
The final product is a fully functional, visually appealing note-taking app that works seamlessly across devices. By focusing on simplicity and usability, I delivered a solution that users can rely on for their everyday tasks.
Next Steps
To enhance this app further, consider:
- Local Storage: Save notes locally so they persist after a page reload.
- Edit Functionality: Allow users to edit existing notes.
- Search Feature: Add a search bar to filter notes by title.
I’m thrilled with how this project turned out and look forward to expanding its capabilities in the future.