Proyek Mini JS | Belajar JavaScript Dasar: Menghidupkan Web | Mahir.dev | Mahir.dev Academy

Proyek Mini JS | Belajar JavaScript Dasar: Menghidupkan Web | Mahir.dev | Mahir.dev Academy

html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pengubah Warna Acak</title>
    <link rel="stylesheet" href="style-warna.css"> <!-- CSS buat tampilan dasar -->
</head>
<body>
    <div class="container">
        <h1>Klik Tombol Buat Ganti Warna!</h1>
        <button id="tombolUbahWarna">Ganti Warna!</button>
        <p>Warna saat ini: <span id="infoWarna">-</span></p>
    </div>
 
    <script src="skrip-warna.js"></script>
</body>
</html>

css

body {
    font-family: Arial, sans-serif;
    display: flex; /* Biar container ke tengah */
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f0f0f0; /* Warna awal */
    transition: background-color 0.5s ease; /* Transisi biar ganti warnanya smooth */
}
 
.container {
    text-align: center;
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
 
button {
    padding: 10px 20px;
    font-size: 1rem;
    color: white;
    background-color: dodgerblue;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
 
button:hover {
    background-color: royalblue;
}
 
#infoWarna {
    font-weight: bold;
}

javascript

// 1. Pilih elemen-elemen yang dibutuhkan
const tombolUbah = document.getElementById('tombolUbahWarna');
const bodyHalaman = document.body; // Cara gampang milih body
const infoWarnaSpan = document.getElementById('infoWarna');
 
// 2. Fungsi untuk menghasilkan warna HEX acak
function getRandomHexColor() {
    // Karakter yang mungkin buat kode HEX
    const karakterHex = '0123456789ABCDEF';
    let kodeWarna = '#'; // Awali dengan #
    for (let i = 0; i < 6; i++) { // Kita butuh 6 karakter HEX
        // Ambil karakter acak dari karakterHex
        kodeWarna += karakterHex[Math.floor(Math.random() * 16)]; 
    }
    return kodeWarna;
}
 
// 3. Fungsi handler untuk event klik tombol
function ubahWarnaBackground() {
    const warnaBaru = getRandomHexColor(); // Dapatkan warna acak baru
    console.log("Warna baru yang dihasilkan:", warnaBaru); // Buat ngecek di konsol
 
    bodyHalaman.style.backgroundColor = warnaBaru; // Set background body
    infoWarnaSpan.textContent = warnaBaru; // Tampilkan kode warna di span
    infoWarnaSpan.style.color = warnaBaru; // (Opsional) Bikin teks info warnanya sama
}
 
// 4. Pasang event listener ke tombol
tombolUbah.addEventListener('click', ubahWarnaBackground);
 
// (Opsional) Set warna awal pas halaman di-load
ubahWarnaBackground(); // Panggil sekali biar pas load langsung ada warna acak

html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List Sederhana</title>
    <link rel="stylesheet" href="style-todo.css">
</head>
<body>
    <div class="todo-container">
        <h1>Daftar Tugasku Hari Ini</h1>
        <form id="formTambahTugas">
            <input type="text" id="inputTugas" placeholder="Ketik tugas baru..." required>
            <button type="submit">Tambah Tugas</button>
        </form>
        <ul id="daftarListTugas">
            <!-- Tugas akan muncul di sini -->
        </ul>
    </div>
 
    <script src="skrip-todo.js"></script>
</body>
</html>

css

body {
    font-family: 'Segoe UI', sans-serif;
    background-color: #f9f9f9;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Biar konten gak terlalu ke tengah kalau panjang */
    min-height: 100vh;
    margin: 0;
    padding-top: 50px;
}
 
.todo-container {
    background-color: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 450px;
}
 
h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}
 
#formTambahTugas {
    display: flex; /* Input dan tombol sejajar */
    margin-bottom: 20px;
}
 
#inputTugas {
    flex-grow: 1; /* Input ngambil sisa ruang */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px; /* Sudut kiri melengkung */
    font-size: 1rem;
}
 
#formTambahTugas button {
    padding: 10px 15px;
    background-color: dodgerblue;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0; /* Sudut kanan melengkung */
    cursor: pointer;
    font-size: 1rem;
}
 
#formTambahTugas button:hover {
    background-color: royalblue;
}
 
#daftarListTugas {
    list-style-type: none; /* Ilangin bullet default */
    padding: 0;
}
 
#daftarListTugas li {
    background-color: #f0f0f0;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between; /* Buat nanti kalau ada tombol hapus */
    align-items: center;
}

javascript

// 1. Pilih elemen-elemen yang dibutuhkan
const formTambahTugas = document.getElementById('formTambahTugas');
const inputTugas = document.getElementById('inputTugas');
const daftarListTugas = document.getElementById('daftarListTugas');
 
// 2. Fungsi handler untuk event submit form
function handleTambahTugas(event) {
    event.preventDefault(); // PENTING! Mencegah form di-submit secara normal (reload halaman)
 
    const teksTugasBaru = inputTugas.value.trim(); // Ambil nilai input & hilangkan spasi ekstra
 
    if (teksTugasBaru === "") {
        alert("Tugas tidak boleh kosong!");
        return; // Hentikan fungsi kalau input kosong
    }
 
    // Buat elemen <li> baru
    const itemTugasBaru = document.createElement('li');
    itemTugasBaru.textContent = teksTugasBaru; // Set teksnya
 
    // (Opsional) Tambahkan tombol hapus (tapi fungsionalitasnya belum kita buat)
    // const tombolHapus = document.createElement('button');
    // tombolHapus.textContent = 'Hapus';
    // tombolHapus.className = 'hapus-tugas'; // Buat styling nanti
    // itemTugasBaru.appendChild(tombolHapus);
 
    // Tambahkan item tugas baru ke dalam <ul>
    daftarListTugas.appendChild(itemTugasBaru);
 
    // Kosongkan input field setelah tugas ditambah
    inputTugas.value = "";
    inputTugas.focus(); // (Opsional) Fokuskan lagi ke input field
 
    console.log("Tugas baru ditambahkan:", teksTugasBaru);
}
 
// 3. Pasang event listener ke form
formTambahTugas.addEventListener('submit', handleTambahTugas);