BAB 20 — Studi Kasus Mini: Membuat Aplikasi Interaktif dengan JavaScript

BAB 20 — Studi Kasus Mini: Membuat Aplikasi Interaktif dengan JavaScript

Setelah memahami konsep dasar, DOM, event, asynchronous JavaScript, OOP, dan ES6+, langkah selanjutnya adalah menerapkan semua konsep tersebut melalui mini project nyata.

Studi kasus ini membantu memperkuat pemahaman, membiasakan praktik terbaik, dan memberikan gambaran implementasi nyata.

1. To-Do List Sederhana

To-do list adalah proyek klasik untuk DOM manipulation, event listener, dan local state management.

1.1 HTML Dasar

<input type="text" id="taskInput" placeholder="Tulis tugas...">
<button id="addBtn">Tambah</button>
<ul id="taskList"></ul>

1.2 JavaScript

const input = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');

addBtn.addEventListener('click', () => {
    const task = input.value.trim();
    if(task === "") return;
    
    const li = document.createElement('li');
    li.textContent = task;

    li.addEventListener('click', () => li.classList.toggle('completed'));

    taskList.appendChild(li);
    input.value = "";
});

Fitur:

  • Menambahkan tugas baru.
  • Klik pada tugas → menandai selesai (toggle class).
  • Belajar DOM manipulation, event delegation, dan classList.

2. Kalkulator Sederhana

Kalkulator sederhana memperkenalkan event listener, DOM, dan logika fungsi.

2.1 HTML Dasar

<input type="text" id="display" disabled>
<button data-number="1">1</button>
<button data-number="2">2</button>
<button data-op="+">+</button>
<button id="equal">=</button>

2.2 JavaScript

const display = document.getElementById('display');
let currentInput = '';

document.querySelectorAll('button[data-number], button[data-op]').forEach(btn => {
    btn.addEventListener('click', e => currentInput += e.target.textContent);
});

document.getElementById('equal').addEventListener('click', () => {
    try {
        display.value = eval(currentInput); // eval untuk demo sederhana
        currentInput = display.value;
    } catch {
        display.value = "Error";
    }
});

Tips:

  • Hindari eval() di produksi → gunakan parser aman atau math library.

3. Aplikasi CRUD Sederhana

CRUD (Create, Read, Update, Delete) adalah konsep dasar database & state management.

3.1 HTML Dasar

<input type="text" id="itemInput" placeholder="Item baru">
<button id="addItem">Tambah</button>
<ul id="itemsList"></ul>

3.2 JavaScript

const itemInput = document.getElementById('itemInput');
const addItem = document.getElementById('addItem');
const itemsList = document.getElementById('itemsList');

addItem.addEventListener('click', () => {
    const itemText = itemInput.value.trim();
    if(!itemText) return;

    const li = document.createElement('li');
    li.textContent = itemText;

    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = 'Hapus';
    deleteBtn.addEventListener('click', () => li.remove());

    li.appendChild(deleteBtn);
    itemsList.appendChild(li);
    itemInput.value = '';
});

Fitur:

  • Create → tambah item baru.
  • Read → menampilkan item di list.
  • Delete → hapus item.
  • Update bisa ditambahkan dengan double-click atau edit input.

4. Game Kecil: Tebak Angka

Mini game sederhana untuk event, logic, dan interaksi user.

const inputGuess = document.getElementById('guessInput');
const checkBtn = document.getElementById('checkBtn');
const result = document.getElementById('result');

const secretNumber = Math.floor(Math.random()*100)+1;

checkBtn.addEventListener('click', () => {
    const guess = Number(inputGuess.value);
    if(guess === secretNumber){
        result.textContent = "Tebakan benar!";
    } else if(guess < secretNumber){
        result.textContent = "Terlalu kecil!";
    } else {
        result.textContent = "Terlalu besar!";
    }
});

Fitur:

  • Generate random number.
  • User input + klik event.
  • Feedback langsung ke DOM.

5. Fetch API Sederhana

Fetch API memperkenalkan asynchronous programming & error handling.

const btn = document.getElementById('fetchBtn');
const output = document.getElementById('output');

btn.addEventListener('click', async () => {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        if(!response.ok) throw new Error('Data tidak ditemukan');
        const data = await response.json();
        output.textContent = `Judul: ${data.title}`;
    } catch (err) {
        output.textContent = `Error: ${err.message}`;
    }
});

Fitur:

  • Asynchronous fetch dengan async/await.
  • Error handling dengan try/catch.
  • Menampilkan hasil langsung di DOM.

6. Insight & Tips Praktis

  1. Semua mini project ini menggabungkan DOM, Event, ES6+, OOP, dan async.
  2. Modularisasi bisa diterapkan → pisahkan logic, UI, dan API.
  3. Gunakan class untuk state management di To-Do List atau CRUD.
  4. Error handling penting di fetch dan kalkulator agar aplikasi tidak crash.
  5. Gunakan delegation untuk daftar dinamis agar performa lebih baik.

💡 Insight: Mini project adalah simulasi nyata skill developer → membantu mengintegrasikan semua konsep JavaScript modern menjadi aplikasi yang bisa diuji langsung.

Related Posts