Modul 5: Mini Project Ubah Warna List Genap [2]

Roihan Fajareno Februari 06, 2024

Di artikel ini, kita akan mempelajari cara mengubah warna pada elemen List HTML yang bewarna genap.

Tujuan Program

Tujuan Program

Tujuan dari program ini adalah membuat list HTML dan menambahkan style CSS kepada urutan list yang genap saat sebuah button di klik.

Source Code

Source code program ini bisa dilihat di Repository berikut: Source Code Mini Project
Github Repository: Main Repository

Kalian bisa mencoba program ini secara online dengan mengakses link berikut: Github Pages 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mini Project 2</title>
    <style>
        .biru-dan-tebal {
            color: blue;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <ul>
        <li>Acura</li>
        <li>Alfa Romeo</li>
        <li>Aston Martin</li>
        <li>Audi</li>
        <li>Bentley</li>
        <li>BMW</li>
        <li>Bugatti</li>
        <li>Buick</li>
    </ul>
    <ol>
        <li>Acura</li>
        <li>Alfa Romeo</li>
        <li>Aston Martin</li>
        <li>Audi</li>
        <li>Bentley</li>
        <li>BMW</li>
        <li>Bugatti</li>
        <li>Buick</li>
    </ol>

    <button onclick="changeListColor()">Ubah Warna Elemen Genap</button>

    <script>
        function changeListColor() {
            // get element (tipe data Array)
            let list = document.getElementsByTagName("li");

            // iterasi Array for loops (check index satu per satu)
            for (let index = 0; index < list.length; index++) {
                // jika i dibagi 2 memiliki sisa 0 (genap)...
                if (index % 2 === 0) {
                    // akses list dari iterasi index ditambah 1 (index dimulai dari 0)
                    // tambahkan class "biru-dan-tebal"
                    list[index + 1].className = "biru-dan-tebal";
                }
            }
        }
    </script>
</body>
</html>

Pembahasan

1. Tambahkan Elemen List HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mini Project 2</title>
</head>
<body>
    <ul>
        <li>Acura</li>
        <li>Alfa Romeo</li>
        <li>Aston Martin</li>
        <li>Audi</li>
        <li>Bentley</li>
        <li>BMW</li>
        <li>Bugatti</li>
        <li>Buick</li>
    </ul>
    <ol>
        <li>Acura</li>
        <li>Alfa Romeo</li>
        <li>Aston Martin</li>
        <li>Audi</li>
        <li>Bentley</li>
        <li>BMW</li>
        <li>Bugatti</li>
        <li>Buick</li>
    </ol>
</body>
</html>

2. Tambahkan Stying Pada Sebuah Class

Di CSS, panggil class .biru-dan-tebal dan tambahkan styling. Class ini akan digunakan di kode Javascript nantinya. 
<style>
    .biru-dan-tebal {
        color: blue;
        font-weight: bolder;
    }
</style>

3. Tambahkan Kode Javascript

<script>
    function changeListColor() {
        let list = document.getElementsByTagName("li");

        for (let index = 0; index < list.length; index++) {
            if (index % 2 === 0) {
               list[index + 1].className = "biru-dan-tebal";
            }
        }
    }
</script>

Pembahasan Kode
1. Tambahkan tag script pada HTML dan buat function bernama changeListColor().
2. Dapatkan elemen li menggunakan method getElementsByTagName() dan simpan di dalam variabel bernama list.
3. getElementsByTagName() mengambil semua elemen di HTML yang sesuai dan di simpan dalam bentuk Array. Oleh karena itu kita harus membuat for loop untuk iterasi Array tersebut.
4. Di dalam for loop, tambahkan pengecekan kondisi if untuk mengecek apakah index (urutan) yang sedang di iterasi merupakan index genap. Jika benar index merupakan genap, tambahkan class .biru-dan-tebal pada list yang sedang di iterasi.

4. Tambahkan button dengan atribut onclick

Buat elemen button lalu tambahkan attribute onclick, taruh function changeListColor() di dalamnya.
<button onclick="changeListColor()">Ubah Warna Elemen Genap</button>


End

Demo program bila diakses secara online melalui link berikut: Github Pages
Roihan Fajareno

Diposting oleh Roihan Fajareno

Posting Komentar

0 Komentar