Lesson 100 – Building a Mini JavaScript Project: Notes App

Let’s wrap up this 100-day journey by applying what you've learned to build a simple but practical project — a Notes App using JavaScript, HTML, and CSS.

What You’ll Learn

How to build a UI with HTML/CSS
How to use DOM manipulation
How to store and retrieve notes using localStorage
How to handle user input and events

Project Structure

notes-app/
|
|-- index.html
|-- style.css
|-- app.js

index.html

<!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</h1>
    <textarea id="noteInput" placeholder="Write your note here..."></textarea>
    <button id="saveNote">Save Note</button>
    <ul id="notesList"></ul>
  </div>
  <script src="app.js"></script>
</body>
</html>

styles.css

body {
  font-family: Arial, sans-serif;
  background: #f9f9f9;
  display: flex;
  justify-content: center;
  padding: 40px;
}

.container {
  width: 100%;
  max-width: 500px;
}

textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  padding: 10px;
}

button {
  padding: 10px 15px;
  background: #0084ff;
  color: white;
  border: none;
  cursor: pointer;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  background: #fff;
  padding: 10px;
  margin-top: 10px;
  border-left: 4px solid #0084ff;
}

app.js

const noteInput = document.getElementById("noteInput");
const saveBtn = document.getElementById("saveNote");
const notesList = document.getElementById("notesList");

// Load existing notes from localStorage
function loadNotes() {
  const notes = JSON.parse(localStorage.getItem("notes")) || [];
  notesList.innerHTML = "";
  notes.forEach((note, index) => {
    const li = document.createElement("li");
    li.textContent = note;
    notesList.appendChild(li);
  });
}

// Save a new note
saveBtn.addEventListener("click", () => {
  const note = noteInput.value.trim();
  if (!note) return;

  const notes = JSON.parse(localStorage.getItem("notes")) || [];
  notes.push(note);
  localStorage.setItem("notes", JSON.stringify(notes));

  noteInput.value = "";
  loadNotes();
});

// Initial load
loadNotes();

Try Your Hand

Add a delete button next to each note
Add timestamps
Sync notes with server via API
Add a search bar to filter notes
Add dark mode toggle

That’s a Wrap!

You’ve gone from basic syntax to memory management, async code, modules, service workers, and now a real app. This final project brings everything together. Keep building from here!

Javascript in 100 bits

Course by zooboole,

Last Updated on 2025-01-28 08:04:00