Modul 5: Mini Project Ubah Warna List Menggunakan Select Tag [3]

Roihan Fajareno Februari 09, 2024

Tujuan Program

Tujuan Program

Program ini bertujuan untuk mengubah warna teks dari elemen HTML list. Pengguna dapat memilih warna yang berbeda untuk list genap maupun list ganjil melalui dua menu dropdown yang disediakan. Hasil akhir program akan terlihat seperti berikut:

Tampilan Program

Memilih Warna Genap

Memilih Warna Ganjil


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 3</title>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
    </ul>

    <hr>

    <label>Warna Elemen Genap</label>
    <select name="color" id="selectGenap" onchange="evenColor()">
        <option>Select Color</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
    </select> 
    <br>
    <label>Warna Elemen Ganjil</label>
    <select name="color" id="selectGanjil" onchange="oddColor()">
        <option>Select Color</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
    </select>

    <script>
        let list = document.getElementsByTagName("li");
        let selectGenap = document.getElementById("selectGenap");
        let selectGanjil = document.getElementById("selectGanjil");

        function evenColor() {
            let index = 0;
            while (index < list.length) {
                if (index % 2 == 0) {
                    if (selectGenap.value == "red") {
                        list[index + 1].style.color = "red";
                    } 
                    else if (selectGenap.value == "green") {
                        list[index + 1].style.color = "green";
                    } 
                    else if (selectGenap.value == "blue") {
                        list[index + 1].style.color = "blue";
                    } 
                    else {
                        list[index + 1].style.color = "";
                    }
                }
                index++;
            }
        }

        function oddColor() {
            let index = 0;
            do {
                if (index % 2 == 0) {
                    if (selectGanjil.value == "red") {
                        list[index].style.color = "red";
                    } 
                    else if (selectGanjil.value == "green") {
                        list[index].style.color = "green";
                    } 
                    else if (selectGanjil.value == "blue") {
                        list[index].style.color = "blue";
                    } 
                    else {
                        list[index].style.color = "";
                    }
                }
                index++;
            } while (index < list.length);
        }
    </script>
</body>
</html>
  

Pembahasan

1. Menambahkan Elemen List HTML

Tambahkan unordered list (ul) ke dalam dokumen HTML. 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
    </ul>
    <hr>
</body>
</html>

2. Menambahkan Elemen Select untuk Dropdown

Buat dropdown menggunakan Elemen/Tag select dengan tag option sebagai opsi dalam dropdown tersebut. Tambahkan attribute id pada select tag agar bisa dipanggil di script Javascript, attribute onchange untuk mengecek perubahan pada select tag dengan function yang akan dibuat di Javascript nantinya. Attribute value pada option tag untuk menyimpan value/nilai elemen/tag yang akan berguna nantinya di Javascript. 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mini Project 3</title>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
    </ul>

    <hr>

    <label>Warna Elemen Genap</label>
    <select name="color" id="selectGenap" onchange="evenColor()">
        <option>Select Color</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
    </select> 
    <br>
    <label>Warna Elemen Ganjil</label>
    <select name="color" id="selectGanjil" onchange="oddColor()">
        <option>Select Color</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
    </select>
</body>
</html>

3. Tambahkan Script Javascript

Buat tag script dan masukan kode Javascript. 
<script>
    let list = document.getElementsByTagName("li");
    let selectGenap = document.getElementById("selectGenap");
    let selectGanjil = document.getElementById("selectGanjil");

    function evenColor() {
        let index = 0;
        while (index < list.length) {
            if (index % 2 == 0) {
                if (selectGenap.value == "red") {
                    list[index + 1].style.color = "red";
                } 
                else if (selectGenap.value == "green") {
                    list[index + 1].style.color = "green";
                } 
                else if (selectGenap.value == "blue") {
                    list[index + 1].style.color = "blue";
                } 
                else {
                    list[index + 1].style.color = "";
                }
            }
            index++;
        }
    }

    function oddColor() {
        let index = 0;
        do {
            if (index % 2 == 0) {
                if (selectGanjil.value == "red") {
                    list[index].style.color = "red";
                } 
                else if (selectGanjil.value == "green") {
                    list[index].style.color = "green";
                } 
                else if (selectGanjil.value == "blue") {
                    list[index].style.color = "blue";
                } 
                else {
                    list[index].style.color = "";
                }
            }
            index++;
        } while (index < list.length);
    }
</script>

Pembahasan Kode Javascript

1. Dapatkan elemen/tag dan id elemen HTML lalu simpan dalam variabel. 
let list = document.getElementsByTagName("li");
let selectGenap = document.getElementById("selectGenap");
let selectGanjil = document.getElementById("selectGanjil");

2. Buat function dengan nama evenColor() untuk mengubah warna list genap. 
function evenColor() {
  ...
}

3. Kita disuruh menggunakan while loop pada elemen genap, sehingga pada function evenColor() tambahkan while loop dan variabel index untuk memulai iterasi array elemen list. 
function evenColor() {
    let index = 0;
    while (index < list.length) {
        ...
        index++;
    }
}

4. Tambahkan conditional if untuk mengecek apakah index merupakan angka genap. 
function evenColor() {
    let index = 0;
    while (index < list.length) {
        if (index % 2 == 0) {
            ...
        }
        index++;
    }
}

5. Jika list merupakan angka genap, jalankan kode dibawahnya yakni beberapa conditional if-else untuk mengecek apakah value dari elemen select sesuai dengan value pada elemen option. Jika benar, tambahkan styling color pada list genap. 
function evenColor() {
    let index = 0;
    while (index < list.length) {
        if (index % 2 == 0) {
            if (selectGenap.value == "red") {
                list[index + 1].style.color = "red";
            } 
            else if (selectGenap.value == "green") {
                list[index + 1].style.color = "green";
            } 
            else if (selectGenap.value == "blue") {
                list[index + 1].style.color = "blue";
            } 
            else {
                list[index + 1].style.color = "";
            }
        }
        index++;
    }
}

6. Buat function oddColor() untuk mengubah warna list ganjil.
function oddColor() {
    ...
}

7. Pada elemen genap, kita gunakan do while loop. Perbedaannya dengan while loop biasa yakni do while loop akan menjalankan kode terlebih dahulu lalu mengecek kondisinya. Jika kondisi masih benar (true), lanjutkan looping. 
function oddColor() {
    let index = 0;
    do {
        if (index % 2 == 0) {
            if (selectGanjil.value == "red") {
                list[index].style.color = "red";
            } 
            else if (selectGanjil.value == "green") {
                list[index].style.color = "green";
            } 
            else if (selectGanjil.value == "blue") {
                list[index].style.color = "blue";
            } 
            else {
                list[index].style.color = "";
            }
        }
        index++;
    } while (index < list.length);
}

End

Jika sudah, kalian bisa mencoba program tersebut dengan mengakses laman ini.
Roihan Fajareno

Diposting oleh Roihan Fajareno

Posting Komentar

0 Komentar