Build a Simple Notes App with HTML, CSS & JavaScript

<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>

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;
}

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();