Gift Egbonyi

Posted on Aug 6

Build a Simple Notes App with HTML, CSS & JavaScript

#javascript #notesapp #dom #localstorage

Hey friends! 👋

It's another tutorial Wednesday and this week, we're building a Notes App from scratch, no frameworks, just pure HTML, CSS and JavaScript. You’ll be able to add, display and delete notes. We'll even persist them in your browser using the localStorage.

What We'll Cover

Creating and styling a notes interface
Adding notes dynamically
Deleting notes
Saving notes to localStorage
Loading saved notes on page load

Live Demo

Check out the working version on CodePen:

👉 Notes App – Live Demo

HTML

<div class="container">
  <h1>Notes App</h1>
  <form id="note-form">
    <textarea id="note-input" placeholder="Write your note..." required></textarea>
    <button type="submit">Add Note</button>
  </form>
  <div id="notes-list"></div>
</div>

CSS (Optional - Feel free to style differently!)

body {
  font-family: sans-serif;
  background: #f9f9f9;
  display: flex;
  justify-content: center;
  padding: 2rem;
}

.container {
  background: white;
  padding: 2rem;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-radius: 8px;
}

textarea {
  width: 100%;
  height: 100px;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: none;
}

button {
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background: #4f46e5;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.note {
  background: #eef;
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 4px;
  position: relative;
}

.note button {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ff4d4f;
}

JavaScript

const noteForm = document.getElementById('note-form');
const noteInput = document.getElementById('note-input');
const notesList = document.getElementById('notes-list');

let notes = JSON.parse(localStorage.getItem('notes')) || [];

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

function renderNotes() {
  notesList.innerHTML = '';
  notes.forEach((note, index) => {
    const div = document.createElement('div');
    div.className = 'note';
    div.textContent = note;

    const delBtn = document.createElement('button');
    delBtn.textContent = 'X';
    delBtn.onclick = () => {
      notes.splice(index, 1);
      saveNotes();
      renderNotes();
    };

    div.appendChild(delBtn);
    notesList.appendChild(div);
  });
}

noteForm.addEventListener('submit', e => {
  e.preventDefault();
  const note = noteInput.value.trim();
  if (!note) return;
  notes.push(note);
  noteInput.value = '';
  saveNotes();
  renderNotes();
});

renderNotes();

Features

Works without page reloads
Persists notes in localStorage
Clean and responsive UI

🙋🏽‍♀️ Over to You!

Can you improve this Notes App?

Add an "Edit" button to each note.
Add a character limit.
Show timestamps.
Save notes to a server (if you know a bit of backend).

Let me know what you build! I'd like to see yours! Connect with me on GitHub

Was this tutorial helpful? Got questions? Or any insight to help me write better tutorials? Let me know in the 💬!

That’s it for today’s midweek mini tutorial!

I’m keeping things light, fun and useful; one small project at a time.

*If you enjoyed this, leave a 💬 or 🧡 to let me know. *

And if you’ve got an idea for something you'd like me to try out next Wednesday, drop it in the comments. 👇

Follow me to see more straight-forward and short tutorials like this :)

If you are curious about what I do, check out my Portfolio

:-)

Web trails
You can also find me here on LinkedIn
or here X (Twitter)

✍🏾 I’m documenting my learning loudly every Wednesday. Follow along if you're learning JavaScript too!
Let’s keep learning together!

💡 Tip

Try rebuilding this app from memory after going through it once. That’s the best way to reinforce what you’ve learned.

See you next Wednesday 🚀

DEV Community