Create a Note Keeper App: Step-by-Step Guide Using HTML, CSS, and JavaScript

📌 Introduction

Managing daily tasks and notes is essential — whether you're a student, developer, or professional.
In this project, I built a Note Keeper App using only HTML, CSS, and JavaScript. It’s clean, lightweight, and perfect for beginners who want to practice DOM manipulation and event handling.

---

🧠 What This App Does

The Note Keeper App allows you to:

• ➕ Add new notes/tasks

• 📋 Display a list of all tasks

• 🗑️ Delete completed or unwanted notes

It’s built without any frameworks or libraries — just pure frontend code!

---

🔧 Tech Stack

• HTML5 – To structure the layout

• CSS3 – For a clean and responsive design

• JavaScript – To handle task addition, deletion, and DOM interaction

---

💡 Features

1. Add Notes
   Users can type in a task and hit the Add button. The task is instantly added to the list below.

2. Delete Notes
   Each task has a Delete button to remove it when completed or no longer needed.

3. Minimal UI
   The app uses basic styling but looks beautiful and functional for a daily task manager.

---

📸 Screenshots

---

🔗 Live Demo & GitHub

• Live Demo: [Notify]

• GitHub Repo: [Source Code]

---

🤓 Code Highlights

Here’s a small snippet of how the app adds and removes notes:

javascriptCopyEditconst input = document.querySelector("#noteInput");
const addBtn = document.querySelector("#addBtn");
const noteList = document.querySelector("#noteList");

addBtn.addEventListener("click", () => {
  if (input.value.trim() === "") return;
  const li = document.createElement("li");
  li.textContent = input.value;
  const delBtn = document.createElement("button");
  delBtn.textContent = "Delete";
  delBtn.onclick = () => li.remove();
  li.appendChild(delBtn);
  noteList.appendChild(li);
  input.value = "";
});

---

🙋‍♂️ Why I Built This

This was part of my learning journey in frontend development.
I wanted to build a real, functional app using only the basics and this helped me practice:

• Event listeners

• DOM manipulation

• Clean UI design

• Writing reusable JavaScript logic

---

🚀 What's Next?

Here are some future ideas I plan to add:

• ✅ Task completion toggle (mark as done)

• 🗂️ Save tasks to localStorage

• 🌓 Dark mode

• 📅 Due dates or reminders

---

💬 Final Thoughts

If you're just starting in web development, small projects like this are the key to leveling up.
Don’t just follow tutorials — build your own version, even if it’s simple.
This Note Keeper App is a great way to get hands-on with real functionality using core web tech.

Let me know if you have suggestions or feedback. I’d love to connect!

---

🙌 Connect With Me

• 💼 LinkedIn

• 🐙 GitHub