TUGAS 4, HTML, CSS DAN JAVASCRIPT

Message

#1 Post by **iinindrawan** » 26 Apr 2026, 22:31

Tulis kode html berikut ke dalam file baru bernama index.html

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Web Interaktif</title>

<style>
    body {
        margin: 0;
        font-family: Arial;
        background: #f4f6f9;
        transition: 0.3s;
    }

    .dark {
        background: #1e1e1e;
        color: white;
    }

    .navbar {
        background: #2c3e50;
        color: white;
        padding: 15px;
        display: flex;
        justify-content: space-between;
    }

    .container {
        width: 90%;
        margin: auto;
        margin-top: 20px;
    }

    .card {
        background: white;
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 10px;
    }

    .dark .card {
        background: #2c2c2c;
    }

    button {
        padding: 10px;
        margin-top: 10px;
        cursor: pointer;
    }

    input {
        padding: 10px;
        width: 100%;
        margin-top: 10px;
    }

    /* Modal */
    .modal {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.5);
    }

    .modal-content {
        background: white;
        padding: 20px;
        width: 300px;
        margin: 100px auto;
        border-radius: 10px;
    }
</style>

</head>
<body>

<div class="navbar">
    <div>Web Interaktif</div>
    <button onclick="toggleDark()">🌙 Dark Mode</button>
</div>

<div class="container">

    <!-- Form -->
    <div class="card">
        <h2>Form Kontak</h2>
        <input type="text" id="nama" placeholder="Nama">
        <input type="email" id="email" placeholder="Email">
        <button onclick="kirimData()">Kirim</button>
    </div>

    <!-- List + Filter -->
    <div class="card">
        <h2>Daftar Nama</h2>
        <input type="text" id="search" placeholder="Cari nama..." onkeyup="filterNama()">

        <ul id="listNama">
            <li>Andi</li>
            <li>Budi</li>
            <li>Citra</li>
            <li>Dewi</li>
        </ul>
    </div>

    <!-- Modal -->
    <div class="card">
        <h2>Popup</h2>
        <button onclick="bukaModal()">Buka Modal</button>
    </div>

</div>

<!-- Modal -->
<div id="modal" class="modal">
    <div class="modal-content">
        <h3>Halo!</h3>
        <p>Ini contoh modal popup</p>
        <button onclick="tutupModal()">Tutup</button>
    </div>
</div>

<script>
    // Dark Mode
    function toggleDark() {
        document.body.classList.toggle("dark");
    }

    // Form Validasi
    function kirimData() {
        let nama = document.getElementById("nama").value;
        let email = document.getElementById("email").value;

        if (nama === "" || email === "") {
            alert("Harap isi semua data!");
        } else {
            alert("Data berhasil dikirim!");
        }
    }

    // Filter List
    function filterNama() {
        let input = document.getElementById("search").value.toLowerCase();
        let items = document.querySelectorAll("#listNama li");

        items.forEach(item => {
            let text = item.textContent.toLowerCase();
            item.style.display = text.includes(input) ? "" : "none";
        });
    }

    // Modal
    function bukaModal() {
        document.getElementById("modal").style.display = "block";
    }

    function tutupModal() {
        document.getElementById("modal").style.display = "none";
    }
</script>

</body>
</html>