Proyek Akhir JavaScript

Proyek 1: Kalkulator Sederhana

Tujuan: Mempraktikkan manipulasi DOM, event listener, dan logika dasar untuk membuat kalkulator fungsional.

Tampilan Hasil

Kode Lengkap

<!-- HTML, CSS, dan JS untuk Kalkulator -->
<!-- Kode ini cukup panjang dan akan menyederhanakan konsepnya di sini -->
const display = document.getElementById('display');
const buttons = document.querySelectorAll('.calc-btn');
let currentInput = '';

buttons.forEach(button => {
  button.addEventListener('click', () => {
    currentInput += button.textContent;
    display.textContent = currentInput;
  });
});
// Ditambah logika untuk tombol C, =, dan operator

Proyek 2: Aplikasi To-Do List

Tujuan: Menguasai manipulasi DOM dengan membuat dan menghapus elemen, menangani input pengguna, dan bekerja dengan array.

Tampilan Hasil

Kode Lengkap

const input = document.getElementById('todo-input');
const addButton = document.getElementById('add-todo-btn');
const list = document.getElementById('todo-list');

addButton.addEventListener('click', () => {
  const taskText = input.value;
  if (taskText === '') return;

  const listItem = document.createElement('li');
  listItem.textContent = taskText;
  list.appendChild(listItem);
  
  input.value = ''; // Kosongkan input
});

Proyek 3: Kuis Sederhana

Tujuan: Mengaplikasikan logika kondisional (if/else), array, objek, dan perulangan untuk membuat kuis interaktif.

Tampilan Hasil

Pertanyaan akan muncul di sini

Kode Lengkap

const questions = [ { question: "Ibukota Indonesia?", answers: ["Jakarta", "Bandung"], correct: 0 } ];
let currentQuestion = 0;

loadQuestion(); // Fungsi untuk menampilkan pertanyaan dan jawaban

// Tambahkan event listener untuk setiap tombol jawaban
// Cek apakah jawaban benar menggunakan if/else