MINI PROJECT 3 (Modul 5)

on

 MINI PROJECT 3 MODUL 5


Press start....


  • MINI PROJECT 3


memanipulasi list berdasarkan value pada option

berikut adalah code nya...


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modul5-P1</title>
    <style>
        .merah {
            color: red;
        }

        .biru {
            color: blue;
        }

        .kuning {
            color: yellow;
        }

        .hover-green:hover {
            color: green;
        }

        .hover-abu:hover {
            color: grey;
        }

        .hover-cyan:hover {
            color: cyan;
        }
    </style>
</head>
<body>
    <div id="list">
        <ul>
            <li>halo</li>
            <li>selamat</li>
            <li>pagi</li>
            <li>semua</li>
            <li>aku</li>
            <li>ytta</li>
        </ul>
    </div>

   

    <section class="warnaGenap">
        <label for="warnaGenap">Warna Elemen Genap:</label>
        <select id="warnaGenap" onchange="Genap()">
            <option value="merah">Merah</option>
            <option value="biru">Biru</option>
            <option value="kuning">Kuning</option>
        </select>
    </section>

    <section class="warnaGanjil">
        <label for="warnaGanjil">Warna Elemen Ganjil:</label>
        <select id="warnaGanjil" onchange="Ganjil()">
            <option value="merah">Merah</option>
            <option value="biru">Biru</option>
            <option value="kuning">Kuning</option>
        </select>
    </section>

    <script>
        function Genap() {
            var listItems = document.getElementById('list').getElementsByTagName('li');
            var selectElement = document.getElementById('warnaGenap');
            var selectedColor = selectElement.value;

            for (var i = 0; i < listItems.length; i++) {
                // Hanya berlaku untuk elemen dengan indeks ganjil
                if (i % 2 !== 0) {
                    listItems[i].classList.remove('merah', 'biru', 'kuning', 'hover-green', 'hover-abu', 'hover-cyan');
                    listItems[i].classList.add(selectedColor);
                }
            }
        }

        function Ganjil() {
            var listItems = document.getElementById('list').getElementsByTagName('li');
            var selectElement = document.getElementById('warnaGanjil');
            var selectedColor = selectElement.value;

            for (var i = 0; i < listItems.length; i++) {
                // Hanya berlaku untuk elemen dengan indeks ganjil
                if (i % 2 === 0) {
                    listItems[i].classList.remove('merah', 'biru', 'kuning', 'hover-green', 'hover-abu', 'hover-cyan');
                    listItems[i].classList.add(selectedColor);
                }
            }
        }
    </script>
</body>
</html>


dan ini adalah hasil output nya...








Comments

Post a Comment