How to Build a Note-Taking App with HTML, CSS and JavaScript

Rick Bowen (JavaScript)

11 months ago

How to Build a Note-Taking App with HTML, CSS and JavaScript

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.