Modul 5: Mini Project List Generator [4]

Roihan Fajareno Februari 10, 2024

Tujuan Program

Tujuan Program

Tujuan program ini adalah sama dengan Mini Project List Bewarna yang pertama, yakni membuat list warna text berubah dan saat di hover. Perbedaannya pada Mini Project ini kita harus membuat sebuah konfigurasi dimana kita bisa generate berapa banyak list yang dibutuhkan. Hasil akhir Mini Project ini akan terlihat seperti berikut:

Tampilan Awal Program

List Generator

Merubah Warna Text dan Warna saat 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

Index.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 4</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body onchange="textColor(), hoverColor()">
        <ul id="unorderedList">
            <!-- Generate List Disini -->
        </ul>
    
        <hr>
    
        <span><b>Konfigurasi</b></span>
        <form class="configureTable">
            <div>
                <label>Teks:</label>
                <input type="text" id="inputIsiList" placeholder="Isi List Text">
            </div>
            <div>
                <label>Jumlah:</label>
                <input type="number" id="inputJumlahList" placeholder="Berapa Banyak List">
            </div>
        </form>
    
        <br>
    
        <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="hoverTeal-Btn">
            <label>Teal</label>
            <input type="radio" name="clr" id="hoverGold-Btn">
            <label>Gold</label>
            <input type="radio" name="clr" id="hoverLightGreen-Btn">
            <label>LightGreen</label>
            <input type="radio" name="clr" checked>
            <label>Default</label>
        </form>
    
        <script src="script.js"></script>
    </body>
    </html>
   
script.js 
    // simpan list dan unordered list
    let list = document.getElementsByTagName("li");
    let ul = document.getElementById("unorderedList");
    
    // Simpan input konfigurasi
    let isiText = document.getElementById("inputIsiList");
    let jumlahList = document.getElementById("inputJumlahList");
    
    // simpan elemen radio untuk text color
    let textBiru = document.getElementById("textBiru-Btn");
    let textHijau = document.getElementById("textHijau-Btn");
    let textKuning = document.getElementById("textKuning-Btn");
    
    // simpan elemen radio untuk hover color
    let hoverTeal = document.getElementById("hoverTeal-Btn");
    let hoverGold = document.getElementById("hoverGold-Btn");
    let hoverLightGreen = document.getElementById("hoverLightGreen-Btn");
    
    // Fungsi Konfigurasi
    function generateList() {
        // agar page tidak refresh
        event.preventDefault();
        // clear isi ul untuk membuat list baru
        ul.innerHTML = '';
        // check input jika memiliki value
        if ((isiText && isiText.value) && (jumlahList && jumlahList.value)) {
            // loop untuk membuat element list
            for (let i = 0; i < Number(jumlahList.value); i++) {
                let li = document.createElement("li");
                li.appendChild(document.createTextNode(isiText.value + (i + 1)));
                ul.appendChild(li);
            }
        } 
    }
    
    // Untuk otomatis mengganti Isi list jika input diganti valuenya
    isiText.addEventListener('input', generateList);
    jumlahList.addEventListener('input', generateList);
    
    
    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 (hoverTeal.checked) {
                    list[i].style.color = "teal";
                } else if (hoverGold.checked) {
                    list[i].style.color = "gold";
                } else if (hoverLightGreen.checked) {
                    list[i].style.color = "lightgreen";
                }
            }
            
            list[i].onmouseout = function() {
                textColor();
            }
        }
    }

Pembahasan

Di pembahasan kali ini, kita hanya membahas perubahan yang ada pada Mini Project ini dikarenakan secara struktur hampir sama dengan Mini Project List Bewarna.

1. Tambahkan Elemen pada HTML

Perbedaan yang pertama yakni penghapusan elemen list di dalam unordered list yang bertujuan agar bisa menambahkan list baru dari list generator. Perbedaan kedua adalah penambahan form untuk konfigurasi penambahan list dengan elemen Input.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mini Project 4</title>
</head>
<body>
    <ul id="unorderedList">
        <!-- Generate List Disini -->
    </ul>

    <hr>

    <span><b>Konfigurasi</b></span>
    <form class="configureTable">
        <div>
            <label>Teks:</label>
            <input type="text" id="inputIsiList" placeholder="Isi List Text">
        </div>
        <div>
            <label>Jumlah:</label>
            <input type="number" id="inputJumlahList" placeholder="Berapa Banyak List">
        </div>
    </form>
</body>
</html>

2. Tambahkan Script Javascript

Perbedaan selanjutnya ada dalam penambahan kode berikut: 

let ul = document.getElementById("unorderedList");
let isiText = document.getElementById("inputIsiList");
let jumlahList = document.getElementById("inputJumlahList");

function generateList() {
    event.preventDefault();
    ul.innerHTML = '';
    if ((isiText && isiText.value) && (jumlahList && jumlahList.value)) {
        for (let i = 0; i < Number(jumlahList.value); i++) {
            let li = document.createElement("li");
            li.appendChild(document.createTextNode(isiText.value + (i + 1)));
            ul.appendChild(li);
        }
    } 
}

isiText.addEventListener('input', generateList);
jumlahList.addEventListener('input', generateList);

Pembahasan Kode Javascript

1. Pengambilan elemen HTML unordered list (ul) dan input.
let ul = document.getElementById("unorderedList");
let isiText = document.getElementById("inputIsiList");
let jumlahList = document.getElementById("inputJumlahList");

2. Buat function bernama generateList() dan beri event.preventDefault() agar website tidak refresh ketika function di jalankan.
function generateList() {
    event.preventDefault();
    ...
}

3. Reset isi dari elemen ul setiap function dijalankan. Hal ini berguna agar elemen yang di generate tidak menumpuk.
function generateList() {
    event.preventDefault();
    ul.innerHTML = '';
    ...
}

4. Buat conditional if untuk mengecek apakah ada value/nilai di input. Gunakan Logical Operator AND (&&) untuk mengecek apakah kedua buah input memiliki value. Jika benar (true), Jalankan kode di dalam conditional if.
function generateList() {
    event.preventDefault();
    ul.innerHTML = '';
    if ((isiText && isiText.value) && (jumlahList && jumlahList.value)) {
        ...
    } 
}

5. Buat for loop untuk melakukan perulangan. Di dalamnya, terdapat kode untuk membuat elemen li (list) dengan isi/text dari elemen li merupakan value dari input isiText dan urutan list. Elemen li kemudian ditambahkan ke elemen ul di akhir for loop. Perulangan akan terjadi tergantung berapa banyak value dari input jumlahList.
function generateList() {
    event.preventDefault();
    ul.innerHTML = '';
    if ((isiText && isiText.value) && (jumlahList && jumlahList.value)) {
        for (let i = 0; i < Number(jumlahList.value); i++) {
            let li = document.createElement("li");
            li.appendChild(document.createTextNode(isiText.value + (i + 1)));
            ul.appendChild(li);
        }
    } 
}

6. Terakhir gunakan addEventListener untuk menambahkan event 'input' ke dua buah input (isiText dan jumlahList). Fungsinya, setiap ada perubahan di input, jalankan function generateList.
isiText.addEventListener('input', generateList);
jumlahList.addEventListener('input', generateList);

End

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

Diposting oleh Roihan Fajareno

Posting Komentar

0 Komentar