bloger bintang: Mini Project 5 (Modul 5)

NAMA : BINTANG DWI ANGGARA

KELAS : X-RPL

Contoh Codenya :

<!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 onchange="textColor(), hoverColor()">
    <ul id="unorderedList">
    </ul>

    <hr>

    <span style="font-size: 4vh;"><b>Konfigurasi</b></span>
    <form onchange="generateList()">
        <label style="margin-right: 17px;">Teks:</label>
        <input type="text" id="inputIsiList"> <br>
        <label>Jumlah:</label>
        <input type="number" id="inputJumlahList">
    </form>

    <br>

    <span style="font-size: 4vh;"><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>
    </form>

    <br>

    <span style="font-size: 4vh;"><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>
    </form>

    <script>
        // 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 hoverMerah = document.getElementById("hoverMerah-Btn");
        let hoverCokelat = document.getElementById("hoverCokelat-Btn");
        let hoverPink = document.getElementById("hoverPink-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);

        // Fungsi Ganti color list text
        // buat fungsi, iterasi List buat ganti color
        function iterateListColor(property, value) {
            for (let index = 0; index < list.length; index++) {
                list[index].style[property] = value;
            }
        }

        // fungsi ganti color list text
        function textColor() {
            if (textBiru.checked) {
                iterateListColor("color", "blue");
            } else if (textHijau.checked) {
                iterateListColor("color", "green");
            } else if (textKuning.checked) {
                iterateListColor("color", "yellow");
            }
        }


        // Fungsi ganti color text saat di hover
        function hoverColor() {
            for (let index = 0; index < list.length; index++) {
                list[index].onmouseover = function() {
                    if (hoverMerah.checked) {
                        list[index].style.color = "red";
                    } else if (hoverCokelat.checked) {
                        list[index].style.color = "brown";
                    } else if (hoverPink.checked) {
                        list[index].style.color = "pink";
                    }
                }
                
                list[index].onmouseout = function() {
                    if (textBiru.checked || textHijau.checked || textKuning.checked) {
                        textColor();
                    } else {
                        list[index].style.color = "";
                    }
                }
            }
        }
    </script>
</body>
</html>

Haslinya :

Langkah - Langkah dan Kegunaanya :

1. Struktur Dasar HTML

Fungsi dan Kegunaan:

Daftar List (<ul>): Menampilkan daftar list dalam elemen <ul>.
Form Konfigurasi: Memungkinkan pengguna mengatur teks dan jumlah list.
Form Warna Text dan Hover: Memberikan opsi untuk mengubah warna teks dan warna saat di-hover.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aplikasi Pengaturan List</title>
</head>
<body onchange="textColor(), hoverColor()">
    <!-- Daftar List ditampilkan dalam elemen ul -->
    <ul id="unorderedList">
    </ul>

    <hr>

    <!-- Konfigurasi untuk membuat list baru -->
    <span style="font-size: 4vh;"><b>Konfigurasi</b></span>
    <form onchange="generateList()">
        <label style="margin-right: 17px;">Teks:</label>
        <input type="text" id="inputIsiList"> <br>
        <label>Jumlah:</label>
        <input type="number" id="inputJumlahList">
    </form>

    <br>

    <!-- Pengaturan Warna Teks -->
    <span style="font-size: 4vh;"><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>
    </form>

    <br>

    <!-- Pengaturan Warna Saat Hover -->
    <span style="font-size: 4vh;"><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>
    </form>

    <!-- Skrip JavaScript untuk logika aplikasi -->
    <script>
        // ... (diberikan dalam kode) ...
    </script>
</body>
</html>

2. Skrip JavaScript

. Fungsi generateList()

Fungsi dan Kegunaan:Inisialisasi Variabel:

Menyimpan referensi ke elemen-elemen HTML yang akan diakses.
generateList(): Fungsi untuk membuat list baru berdasarkan konfigurasi yang dimasukkan pengguna.
textColor() dan hoverColor(): Fungsi untuk mengatur warna teks dan warna saat di-hover berdasarkan pilihan pengguna.

<script>
    // ... (diberikan dalam kode) ...
</script>

3.Fungsi generateList()

Fungsi dan Kegunaan:

Validasi Input: Memastikan bahwa teks dan jumlah list diisi sebelum membuat list baru.

Menghapus List Lama: Membersihkan daftar list sebelum membuat yang baru.
Loop Pembuatan List: Membuat elemen list sejumlah yang dimasukkan pengguna dan menambahkannya ke dalam elemen <ul>.

function generateList() {
    // ... (diberikan dalam kode) ...
}

4. Fungsi textColor()

Fungsi dan Kegunaan:

Mengganti Warna Teks: Mengubah warna teks pada semua elemen list berdasarkan pilihan pengguna.

function textColor() {
    // ... (diberikan dalam kode) ...
}

5. Fungsi hoverColor()

Fungsi dan Kegunaan:

Mengubah Warna Saat Hover: Mengubah warna teks saat elemen di-hover berdasarkan pilihan pengguna, dan mengembalikannya ke warna asal saat mouse meninggalkan elemen.

function hoverColor() {
    // ... (diberikan dalam kode) ...
}

6.Inisialisasi Variabel

Fungsi dan Kegunaan:

list: Menyimpan semua elemen <li> yang ada pada halaman.
ul: Menyimpan referensi ke elemen dengan id "unorderedList" (elemen <ul>).
isiText dan jumlahList: Menyimpan referensi ke elemen input untuk teks dan jumlah list.
Elemen Radio Warna Text (textBiru, textHijau, textKuning): Menyimpan referensi ke elemen radio yang mengontrol warna teks.
Elemen Radio Warna Hover (hoverMerah, hoverCokelat, hoverPink): Menyimpan referensi ke elemen radio yang mengontrol warna saat di-hover.

let list = document.getElementsByTagName("li");
let ul = document.getElementById("unorderedList");
let isiText = document.getElementById("inputIsiList");
let jumlahList = document.getElementById("inputJumlahList");
let textBiru = document.getElementById("textBiru-Btn");
let textHijau = document.getElementById("textHijau-Btn");
let textKuning = document.getElementById("textKuning-Btn");
let hoverMerah = document.getElementById("hoverMerah-Btn");
let hoverCokelat = document.getElementById("hoverCokelat-Btn");
let hoverPink = document.getElementById("hoverPink-Btn");

7. Fungsi generateList()

Fungsi dan Kegunaan:

event.preventDefault(): Mencegah refresh halaman saat form diubah.
ul.innerHTML = '';: Menghapus isi dari elemen <ul> untuk membersihkan list sebelum membuat yang baru.
Validasi Input: Memastikan bahwa teks dan jumlah list diisi sebelum membuat list baru.
Loop Pembuatan List: Membuat elemen list sejumlah yang dimasukkan pengguna dan menambahkannya ke dalam elemen <ul>.

let list = document.getElementsByTagName("li");
let ul = document.getElementById("unorderedList");
let isiText = document.getElementById("inputIsiList");
let jumlahList = document.getElementById("inputJumlahList");
let textBiru = document.getElementById("textBiru-Btn");
let textHijau = document.getElementById("textHijau-Btn");
let textKuning = document.getElementById("textKuning-Btn");
let hoverMerah = document.getElementById("hoverMerah-Btn");
let hoverCokelat = document.getElementById("hoverCokelat-Btn");
let hoverPink = document.getElementById("hoverPink-Btn");

8. Event Listener untuk Input

Fungsi dan Kegunaan:

isiText.addEventListener('input', generateList);: Memanggil generateList() ketika isi teks berubah.
jumlahList.addEventListener('input', generateList);: Memanggil generateList() ketika jumlah list berubah.

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

9. Fungsi textColor()

Fungsi dan Kegunaan:

Pilihan Warna Text: Mengganti warna teks pada semua elemen list berdasarkan pilihan pengguna.

function textColor() {
    if (textBiru.checked) {
        iterateListColor("color", "blue");
    } else if (textHijau.checked) {
        iterateListColor("color", "green");
    } else if (textKuning.checked) {
        iterateListColor("color", "yellow");
    }
}

10. Fungsi hoverColor()

Fungsi dan Kegunaan:

Mengubah Warna Saat Hover: Mengubah warna teks saat elemen di-hover berdasarkan pilihan pengguna, dan mengembalikannya ke warna asal saat mouse meninggalkan elemen.

function hoverColor() {
    for (let index = 0; index < list.length; index++) {
        // ...
    }
}

11. Fungsi iterateListColor(property, value)

Fungsi dan Kegunaan:

Iterasi dan Pengaturan Warna: Iterasi melalui semua elemen list dan mengatur properti warna sesuai dengan parameter yang diberikan.

function iterateListColor(property, value) {
    for (let index = 0; index < list.length; index++) {
        list[index].style[property] = value;
    }
}

terimakasih :)

bloger bintang

Senin, 19 Februari 2024

Mini Project 5 (Modul 5)

Tidak ada komentar:

Posting Komentar

TUGAS DPK Cara kolaborasi di Github

Laporkan Penyalahgunaan