Modul 5: Mini Project List Bewarna [1]

Roihan Fajareno Februari 05, 2024

Di artikel ini, kita akan belajar cara membuat list berganti warna menggunakan elemen HTML input radio.

Tujuan Program

Tujuan Program

Tujuan dari program ini adalah untuk membuat HTML List yang warna text dan warna hover bisa di ubah menggunakan sebuah Input Radio. Contohnya akhirnya seperti gambar dibawah ini:

Warna List Text

Warna List Text ketika di hover


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 1</title>
</head>
<body>
    <ul>
        <li>Manggis</li>
        <li>Mangga</li>
        <li>Alpukat</li>
        <li>Sirsak</li>
        <li>Durian</li>
        <li>Rambutan</li>
    </ul>

    <hr>

    <span style="font-size: 4vh;"><b>Warna Text</b></span>
    <form id="warnaText" onchange="textColor()">
        <input type="radio" name="clr" id="textBiru-Btn">
        <label>Biru</label>
        <input type="radio" name="clr" id="textHijau-Btn">
        <label>Hijau</label>
        <input type="radio" name="clr" id="textKuning-Btn">
        <label>Kuning</label>
        <input type="radio" name="clr" checked>
        <label>Default</label>
    </form>

    <br>

    <span style="font-size: 4vh;"><b>Warna Hover</b></span>
    <form id="warnaHover" onchange="hoverColor()">
        <input type="radio" name="clr" id="hoverMerah-Btn">
        <label>Merah</label>
        <input type="radio" name="clr" id="hoverCokelat-Btn">
        <label>Cokelat</label>
        <input type="radio" name="clr" id="hoverPink-Btn">
        <label>Pink</label>
        <input type="radio" name="clr" checked>
        <label>Default</label>
    </form>

    <script>
        // simpan list
        let list = document.getElementsByTagName("li");

        // simpan elemen text
        let textBiru = document.getElementById("textBiru-Btn");
        let textHijau = document.getElementById("textHijau-Btn");
        let textKuning = document.getElementById("textKuning-Btn");

        // simpan elemen hover
        let hoverMerah = document.getElementById("hoverMerah-Btn");
        let hoverCokelat = document.getElementById("hoverCokelat-Btn");
        let hoverPink = document.getElementById("hoverPink-Btn");

        function textColor() {
            for (let i = 0; i < list.length; i++) {
                if (textBiru.checked) {
                    list[i].style.color = "blue";
                } else if (textHijau.checked) {
                    list[i].style.color = "green";
                } else if (textKuning.checked) {
                    list[i].style.color = "yellow";
                } else {
                    list[i].style.color = "";
                }
            }
        }

        function hoverColor() {
            for (let i = 0; i < list.length; i++) {
                list[i].onmouseover = function() {
                    if (hoverMerah.checked) {
                        list[i].style.color = "red";
                    } else if (hoverCokelat.checked) {
                        list[i].style.color = "brown";
                    } else if (hoverPink.checked) {
                        list[i].style.color = "pink";
                    }
                }
                
                list[i].onmouseout = function() {
                    textColor();
                }
            }
        }
    </script>
</body>
</html>

Pembahasan

1. Buat Elemen HTML List

Tambahkan unordered list ke dalam 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</title>
</head>
<body>
    <ul>
        <li>Manggis</li>
        <li>Mangga</li>
        <li>Alpukat</li>
        <li>Sirsak</li>
        <li>Durian</li>
        <li>Rambutan</li>
    </ul>
</body>
</html>


2. Buat elemen HTML form untuk menampung input radio

Buat input elemen dengan tipe radio, kemudian taruh di dalam elemen form. Fungsinya agar bisa menggunakan event onchange nantinya. Jangan lupa tambahkan id untuk setiap elemen agar bisa dipanngil dalam 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</title>
</head>
<body>
    <ul>
        <li>Manggis</li>
        <li>Mangga</li>
        <li>Alpukat</li>
        <li>Sirsak</li>
        <li>Durian</li>
        <li>Rambutan</li>
    </ul>
    <hr>
    <span><b>Warna Text</b></span>
    <form id="warnaText">
        <input type="radio" name="clr" id="textBiru-Btn">
        <label>Biru</label>
        <input type="radio" name="clr" id="textHijau-Btn">
        <label>Hijau</label>
        <input type="radio" name="clr" id="textKuning-Btn">
        <label>Kuning</label>
        <input type="radio" name="clr" checked>
        <label>Default</label>
    </form>
    <br>
    <span><b>Warna Hover</b></span>
    <form id="warnaHover">
        <input type="radio" name="clr" id="hoverMerah-Btn">
        <label>Merah</label>
        <input type="radio" name="clr" id="hoverCokelat-Btn">
        <label>Cokelat</label>
        <input type="radio" name="clr" id="hoverPink-Btn">
        <label>Pink</label>
        <input type="radio" name="clr" checked>
        <label>Default</label>
    </form>
</body>
</html>

3. Tambahkan Javascript

Tambahkan elemen script and isi dengan kode Javascript. 
<script>
    // simpan list
    let list = document.getElementsByTagName("li");

    // simpan elemen text
    let textBiru = document.getElementById("textBiru-Btn");
    let textHijau = document.getElementById("textHijau-Btn");
    let textKuning = document.getElementById("textKuning-Btn");

    // simpan elemen hover
    let hoverMerah = document.getElementById("hoverMerah-Btn");
    let hoverCokelat = document.getElementById("hoverCokelat-Btn");
    let hoverPink = document.getElementById("hoverPink-Btn");

    function textColor() {
        for (let i = 0; i < list.length; i++) {
            if (textBiru.checked) {
                list[i].style.color = "blue";
            } else if (textHijau.checked) {
                list[i].style.color = "green";
            } else if (textKuning.checked) {
                list[i].style.color = "yellow";
            } else {
                list[i].style.color = "";
            }
        }
    }

    function hoverColor() {
        for (let i = 0; i < list.length; i++) {
            list[i].onmouseover = function() {
                if (hoverMerah.checked) {
                    list[i].style.color = "red";
                } else if (hoverCokelat.checked) {
                    list[i].style.color = "brown";
                } else if (hoverPink.checked) {
                    list[i].style.color = "pink";
                }
            }
            
            list[i].onmouseout = function() {
                textColor();
            }
        }
    }
</script>

Pembahasan Kode Javascript

1. Dapatkan id elemen HTML
Ambil id yang ada di HTML menggunakan document.getElementById() dan document.getElementsByTagName(). Simpan di dalam variabel.
// simpan list
let list = document.getElementsByTagName("li");

// simpan elemen text
let textBiru = document.getElementById("textBiru-Btn");
let textHijau = document.getElementById("textHijau-Btn");
let textKuning = document.getElementById("textKuning-Btn");

// simpan elemen hover
let hoverMerah = document.getElementById("hoverMerah-Btn");
let hoverCokelat = document.getElementById("hoverCokelat-Btn");
let hoverPink = document.getElementById("hoverPink-Btn");

2. Buat function untuk mengganti warna teks di list
Buat function dengan nama textColor(). Gunakan for loop untuk melakukan iterasi di variabel list (variabel list merupakan Array dari elemen li). Method .checked digunakan untuk mengecek apakah input radio ter-check oleh pengguna. Bila input radio ter-check, akan menghasilkan output true, jika tidak false. Gunakan percabangan if-else untuk mengatur input radio mana yang ter-check dan ubah warna setiap elemen list.
function textColor() {
    for (let i = 0; i < list.length; i++) {
        if (textBiru.checked) {
            list[i].style.color = "blue";
        } else if (textHijau.checked) {
            list[i].style.color = "green";
        } else if (textKuning.checked) {
            list[i].style.color = "yellow";
        } else {
            list[i].style.color = "";
        }
    }
}

3. Buat function untuk mengganti warna teks di list jika di hover
Buat function dengan nama hoverColor(). Struktur hampir sama dengan function textColor(), bedanya warna akan diberikan jika mouse berada di elemen list (.onmouseover). Jika mouse di luar elemen list (.onmouseout), jalankan function textColor() untuk mengembalikan warna list ke semula.
function hoverColor() {
    for (let i = 0; i < list.length; i++) {
        list[i].onmouseover = function() {
            if (hoverMerah.checked) {
                list[i].style.color = "red";
            } else if (hoverCokelat.checked) {
                list[i].style.color = "brown";
            } else if (hoverPink.checked) {
                list[i].style.color = "pink";
            }
        }
        
        list[i].onmouseout = function() {
            textColor();
        }
    }
}

4. Jangan lupa tambahkan event onchange pada elemen HTML form

<span style="font-size: 4vh;"><b>Warna Text</b></span>
<form id="warnaText" onchange="textColor()">
    ....
</form>

<br>

<span style="font-size: 4vh;"><b>Warna Hover</b></span>
<form id="warnaHover" onchange="hoverColor()">
    ...
</form>

End

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

Diposting oleh Roihan Fajareno

Posting Komentar

0 Komentar