Notes App Project | HTML, CSS & JavaScript

Notes App with HTML, CSS & JavaScript

10 DAYS 10 PROJECT CHALLENGE

Day #10

Project Overview

The Notes App is a beginner-friendly project involving building a tool that allows a user to create and manage notes. The notes are created on a webpage using HTML, CSS, and JavaScript, and this tool helps to store the information added by the user.

The project is perfect for beginners to learn JavaScript fundamentals and build a functioning web application. It helps the learners to practice and understand how to take user input and allow them to create HTML elements with JavaScript, add events to the buttons to perform actions when clicked, and update the webpage’s content. It also helps in understanding how HTML, CSS, and JavaScript work together to build an interactive web application.

Key Features

Create Notes Feature: With the help of a text area provided in the Notes App, the users can easily create notes with ease and write their daily important tasks directly on the website.
Display Notes: The Notes app displays all the notes created by the user in a proper format so that the users can see on their screen in an organized manner.
Edit Notes: Users can modify an existing note whenever they want to make changes. This allows the information to be updated without creating a completely new note.
Delete Notes: The users can delete any of their notes created before so that the notes area does not have any unwanted notes.
Dynamic Content: The application uses JavaScript to display the notes created, edited or deleted by the user in real-time which keeps the application updated every time.
Interactive Buttons: Buttons provide simple controls for creating, editing, and deleting notes. JavaScript handles these actions and updates the application accordingly.
Notes App UI/UX: Notes app uses a minimalistic approach to display and edit notes created by the user keeping everything simple and readable. It is very easy for a beginner to work with this project.
Responsive Design: The application can adjust to different screen sizes, allowing users to view and manage their notes on desktops, tablets, and mobile devices.
Easy Customization: The project has a simple HTML, CSS, and JavaScript structure, making it easy to customize the colors, fonts, spacing, note layout, and other design elements.

What You’ll Learn

Understand how to collect user input from HTML elements.
Learn how to select and manipulate HTML elements using JavaScript.
Practice handling button click events.
Learn how to create HTML elements dynamically using JavaScript.
Understand how to add, edit, and remove content from a webpage.
Practice working with JavaScript variables and functions.
Learn how JavaScript can update the page without refreshing it.
Practice creating a clean and responsive interface using CSS.

HTML Code

The HTML code creates the basic structure of the Notes App. First, the HTML file links the CSS file inside the head section so the page can use the required styling. The main container holds the note input area and the section where created notes appear.

The input or textarea allows users to enter their note content. A button provides the action for adding the note to the page. The notes container gives JavaScript a specific place where it can insert newly created notes The HTML also includes the JavaScript file near the bottom of the body. This allows the page structure to load before JavaScript starts working with the elements.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Notes App</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Notes App</h1>
    <div class="note-input">
      <textarea id="noteText" placeholder="Write your note here..."></textarea>
      <button id="addNote">Add Note</button>
    </div>
    <div id="notesContainer"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

CSS controls the visual appearance of the Notes App. It styles the main container, input fields, buttons, and individual note items to create a clean and organized interface. The main container controls the overall width and spacing of the application. Input fields receive suitable padding, borders, and font sizes so users can enter text comfortably. Buttons are styled separately to make the available actions easy to recognize.

The note elements also use spacing, borders, and background styling to separate one note from another. Additionally, responsive CSS can adjust the layout when the screen becomes smaller, making the app easier to use on mobile devices.

body {
  font-family: Arial, sans-serif;
  background: #002252;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 50px;
  margin: 0;
}

.container {
  background: #fff;
  padding: 30px 40px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  width: 600px;
}

h1 {
  color: #002252;
  text-align: center;
  margin-bottom: 20px;
}

.note-input textarea {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  resize: none;
  height: 80px;
}

.note-input button {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  background: #eea731;
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.2s;
}

.note-input button:hover {
  transform: scale(1.05);
}

#notesContainer {
  margin-top: 20px;
}

.note {
  background: #fef3d4;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  position: relative;
}

.note button {
  position: absolute;
  top: 5px;
  right: 5px;
  border: none;
  background: red;
  color: #fff;
  border-radius: 3px;
  cursor: pointer;
  padding: 2px 6px;
}


@media(max-width: 450px) {
  .container {
    width: 90%;
    padding: 20px;
  }
}

Javascript Code

JavaScript adds the main functionality to the Notes App and also saves notes in localStorage. First, it selects the Add Note button, note input, and notes container using getElementById(). The getNotes() function retrieves saved notes from localStorage and converts them back into an array using JSON.parse().

Next, saveNotes() stores the notes using JSON.stringify(). The displayNotes() function clears the container, gets all saved notes, and creates a div; and delete button for each note. The addNote() function reads the input, adds the new note to the array, saves it, clears the input, and displays the updated notes. Finally, deleteNote() removes a note using its index, saves the updated array, and refreshes the display. The app calls displayNotes() when the page loads.

const addNoteBtn = document.getElementById('addNote');
const noteText = document.getElementById('noteText');
const notesContainer = document.getElementById('notesContainer');

function getNotes() {
  const notes = JSON.parse(localStorage.getItem('notes')) || [];
  return notes;
}

function saveNotes(notes) {
  localStorage.setItem('notes', JSON.stringify(notes));
}

function displayNotes() {
  notesContainer.innerHTML = '';
  const notes = getNotes();

  notes.forEach((note, index) => {
    const noteDiv = document.createElement('div');
    noteDiv.classList.add('note');
    noteDiv.textContent = note;

    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = 'X';
    deleteBtn.onclick = () => deleteNote(index);

    noteDiv.appendChild(deleteBtn);
    notesContainer.appendChild(noteDiv);
  });
}

function addNote() {
  const text = noteText.value.trim();
  if(text === '') return;

  const notes = getNotes();
  notes.push(text);
  saveNotes(notes);
  noteText.value = '';
  displayNotes();
}

function deleteNote(index) {
  const notes = getNotes();
  notes.splice(index, 1);
  saveNotes(notes);
  displayNotes();
}

// Initialize
displayNotes();
addNoteBtn.addEventListener('click', addNote);