Popular Post

Cara Membuat Aplikasi Notes Sederhana Menggunakan HTML, CSS, dan JavaScript

Posted by on

Membuat aplikasi Notes adalah langkah lanjutan yang sangat bagus setelah To-Do List dan Weather App.



Jika To-Do List hanya menyimpan satu baris tugas, maka Notes App memungkinkan kamu menyimpan catatan yang lebih panjang, fleksibel, dan lebih personal.

Project ini akan membantu kamu memahami bagaimana:

  • Menyimpan data dalam jumlah lebih banyak
  • Menampilkan banyak item secara dinamis
  • Mengedit dan menghapus data
  • Menggunakan localStorage secara lebih optimal

Dengan kata lain, kamu mulai masuk ke pola aplikasi yang lebih nyata.

Pada tutorial ini, kita akan membuat aplikasi Notes dengan fitur:

  • Menambahkan catatan
  • Menampilkan daftar catatan
  • Menghapus catatan
  • Menyimpan data secara otomatis (tidak hilang saat refresh)

1. Struktur Project

Seperti biasa, kita menggunakan 3 file:

  • index.html
  • style.css
  • script.js

2. Membuat Struktur HTML

Buat file 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 App</h1>

    <textarea id="noteInput" placeholder="Tulis catatan kamu..."></textarea>
    <button onclick="addNote()">Tambah Catatan</button>

    <div id="notesContainer"></div>
  </div>

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

3. Membuat Tampilan dengan CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  background: #f4f4f4;
  display: flex;
  justify-content: center;
  padding-top: 50px;
}

.container {
  width: 350px;
  background: white;
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

textarea {
  width: 100%;
  height: 80px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ddd;
  resize: none;
  margin-bottom: 10px;
}

button {
  width: 100%;
  padding: 10px;
  border: none;
  background: #333;
  color: white;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 20px;
}

.note {
  background: #eee;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  position: relative;
}

.delete-btn {
  position: absolute;
  top: 5px;
  right: 8px;
  cursor: pointer;
  color: red;
  font-weight: bold;
}

4. Menambahkan Logika dengan JavaScript

Buat file script.js:

const noteInput = document.getElementById('noteInput');
const notesContainer = document.getElementById('notesContainer');

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

function renderNotes() {
  notesContainer.innerHTML = '';

  notes.forEach((note, index) => {
    const div = document.createElement('div');
    div.classList.add('note');

    div.innerHTML = `
      <span class="delete-btn" onclick="deleteNote(${index})">X</span>
      <p>${note}</p>
    `;

    notesContainer.appendChild(div);
  });
}

function addNote() {
  const note = noteInput.value.trim();

  if (note === '') return;

  notes.push(note);
  localStorage.setItem('notes', JSON.stringify(notes));

  noteInput.value = '';
  renderNotes();
}

function deleteNote(index) {
  notes.splice(index, 1);
  localStorage.setItem('notes', JSON.stringify(notes));
  renderNotes();
}

renderNotes();

5. Penjelasan JavaScript

Mengambil Elemen

const noteInput = document.getElementById('noteInput');
const notesContainer = document.getElementById('notesContainer');

Digunakan untuk mengambil input dan tempat menampilkan catatan.

Menyimpan Data

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

Semua catatan disimpan dalam localStorage, sehingga tetap ada walaupun halaman di-refresh.

Menampilkan Catatan

Fungsi renderNotes() akan menampilkan semua catatan ke halaman.

Menambahkan Catatan

Fungsi addNote() akan:

  1. Mengambil input
  2. Menyimpannya ke array
  3. Menyimpannya ke localStorage
  4. Menampilkan ulang data

Menghapus Catatan

Fungsi deleteNote() akan menghapus catatan berdasarkan index.

6. Cara Menjalankan Project

Struktur folder:

notes-app/
│── index.html
│── style.css
│── script.js

Buka index.html di browser.

7. Hasil yang Didapat

Dengan project ini, kamu sudah berhasil membuat aplikasi yang:

  • Menyimpan banyak data
  • Menampilkan data secara dinamis
  • Bisa digunakan dalam kehidupan nyata

8. Pengembangan Selanjutnya

Kamu bisa upgrade menjadi:

  • Edit catatan
  • Tambah tanggal
  • Search catatan
  • Dark mode
  • Drag & drop
  • Sync ke database

9. Kesimpulan

Notes App adalah langkah penting menuju aplikasi yang lebih kompleks.

Di sini kamu mulai memahami bagaimana data dikelola, disimpan, dan ditampilkan dalam jumlah yang lebih banyak.

Project seperti ini adalah fondasi sebelum masuk ke aplikasi yang lebih besar seperti dashboard, SaaS, atau backend system.

Comments

Post a Comment