Mini Project: Aplikasi Catatan, Menggabungkan LocalStorage, Class, dan Event DOM

Di era digital seperti sekarang, catatan tidak lagi hanya ditulis di buku fisik. Banyak orang beralih menggunakan aplikasi catatan digital untuk mencatat ide, daftar tugas, atau jadwal penting. Nah, melalui Mini Project: Aplikasi Catatan (Notes App) ini, kita akan belajar bagaimana membuat aplikasi catatan sederhana langsung di browser menggunakan JavaScript murni.

Proyek ini tidak hanya mengajarkan logika pemrograman dasar, tetapi juga menggabungkan beberapa konsep penting dalam JavaScript seperti LocalStorage untuk penyimpanan data permanen, Class untuk pengorganisasian kode yang rapi, serta Event DOM untuk menangani interaksi pengguna. Dengan memahami konsep ini, kamu bisa membangun aplikasi web interaktif yang bekerja secara offline tanpa server sekalipun.

Tujuan Proyek

Tujuan dari Mini Project: Aplikasi Catatan (Notes App) ini adalah:

Membuat form input catatan (judul dan isi).
Menampilkan daftar catatan di halaman web.
Menyimpan data catatan di LocalStorage agar tidak hilang setelah halaman direfresh.
Menggunakan Class untuk mengatur struktur kode yang lebih modular.
Memanfaatkan Event DOM untuk menangani aksi pengguna seperti menambah dan menghapus catatan.

Struktur HTML Dasar

Buat file index.html sebagai tampilan utama aplikasi catatan.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aplikasi Catatan (Notes App)</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Aplikasi Catatan</h1>
    <form id="noteForm">
      <input type="text" id="title" placeholder="Judul catatan..." required>
      <textarea id="content" placeholder="Isi catatan..." required></textarea>
      <button type="submit">Tambah Catatan</button>
    </form>

    <h2>Daftar Catatan</h2>
    <div id="noteList"></div>
  </div>

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

Gaya Sederhana dengan CSS

File style.css agar tampilan Notes App lebih rapi dan modern.

body {
  font-family: 'Segoe UI', sans-serif;
  background: #f2f2f2;
  margin: 0;
  padding: 20px;
}

.container {
  max-width: 600px;
  margin: auto;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

form input, form textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

button {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
}

.note {
  background: #e9f5ff;
  padding: 10px;
  margin-bottom: 10px;
  border-left: 5px solid #007bff;
  border-radius: 5px;
  position: relative;
}

.note h3 {
  margin: 0 0 5px;
}

.note button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: crimson;
}

Logika JavaScript: LocalStorage, Class, dan Event DOM

Buat file app.js untuk menangani seluruh logika Notes App.

class NotesApp {
  constructor() {
    this.notes = JSON.parse(localStorage.getItem('notes')) || [];
    this.noteList = document.getElementById('noteList');
    this.form = document.getElementById('noteForm');
    this.titleInput = document.getElementById('title');
    this.contentInput = document.getElementById('content');

    this.form.addEventListener('submit', (e) => this.addNoteHandler(e));
    this.renderNotes();
  }

  addNoteHandler(e) {
    e.preventDefault();
    const title = this.titleInput.value.trim();
    const content = this.contentInput.value.trim();

    if (title && content) {
      const newNote = { id: Date.now(), title, content };
      this.notes.push(newNote);
      this.saveToLocalStorage();
      this.renderNotes();
      this.form.reset();
    }
  }

  deleteNoteHandler(id) {
    this.notes = this.notes.filter(note => note.id !== id);
    this.saveToLocalStorage();
    this.renderNotes();
  }

  saveToLocalStorage() {
    localStorage.setItem('notes', JSON.stringify(this.notes));
  }

  renderNotes() {
    this.noteList.innerHTML = '';
    this.notes.forEach(note => {
      const div = document.createElement('div');
      div.classList.add('note');
      div.innerHTML = `
        <h3>${note.title}</h3>
        <p>${note.content}</p>
        <button onclick="app.deleteNoteHandler(${note.id})">Hapus</button>
      `;
      this.noteList.appendChild(div);
    });
  }
}

const app = new NotesApp();

Penjelasan Fitur

✅ LocalStorage digunakan untuk menyimpan catatan agar tetap ada setelah browser ditutup.
✅ Class NotesApp digunakan untuk mengelola logika aplikasi agar lebih terstruktur dan mudah diperluas.
✅ Event DOM (addEventListener) digunakan untuk menangani aksi pengguna saat menambah atau menghapus catatan.

Pengembangan Lebih Lanjut

Setelah memahami dasar dari Mini Project: Aplikasi Catatan (Notes App) ini, kamu dapat menambahkan fitur lanjutan seperti:

Pencarian catatan berdasarkan judul.
Fitur edit catatan.
Tampilan grid atau list view.
Sinkronisasi data ke server menggunakan API.

Kesimpulan

Mini Project: Aplikasi Catatan (Notes App) merupakan latihan yang sangat bagus untuk memahami kombinasi konsep penting di JavaScript modern — yaitu LocalStorage, Class, dan Event DOM. Dengan memanfaatkan ketiganya, kamu dapat membangun aplikasi web yang ringan, cepat, dan dapat digunakan secara offline tanpa database server.