Senin, 19 Februari 2024

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 :)
di Tidak ada komentar:

Mini Project 4 (Modul 5)

 Nama : Bintang Dwi Anggara

 Kelas : X-RPL



CODE NYA :
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table tr td, table tr th {
            border: 1px solid;
            text-align: center;
        }
        button {
            margin: 0 auto;
            display: block;
        }
        .berat {
            border-color: black;
            animation: beratAnimation 1s ease 0s infinite alternate;
        }
        @keyframes beratAnimation {
            0% {background-color: rgb(255, 114, 114); color: white;}
            100% {background-color: red; color: white;}
        }
    </style>
</head>
<body>
    <form >
        <label>Nama Buah:</label>
        <input style="margin-bottom: 1px;" type="text" id="namaBuah"> <br>
        <label style="margin-right: 41px;">Berat:</label>
        <input type="number" id="beratBuah" min="0">
        <span>kg</span> <br>
        <button style="margin: 1px 0 0 84px;" onclick="saveFruit()">Simpan</button>
        <hr>
        <table id="tableBuah">
                <tr>
                    <th width="35px">No</th>
                    <th width="160px">Nama Buah</th>
                    <th width="70px">Berat</th>
                    <th width="75px">Action</th>
                </tr>
        </table>
    </form>
    <script>
        // Simpan elemen dalam variabel
        let tableBuah = document.getElementById("tableBuah");
        let namaBuah = document.getElementById("namaBuah");
        let beratBuah = document.getElementById("beratBuah");
        // Function menyimpan data buah
        function saveFruit() {
            // Check jika input memiliki nilai/value
            if ((namaBuah && namaBuah.value) && (beratBuah && beratBuah.value)) {
                event.preventDefault();
                // Buat element tr
                let tr = document.createElement("tr");
                // Buat variable untuk Nomor Urut
                let nomorUrut = document.createTextNode(tableBuah.childElementCount);
                // Buat variable untuk Nama Buah
                let addNamaBuah = document.createTextNode(namaBuah.value);
                // Buat variable untuk Berat Buah
                let addBeratBuah = document.createTextNode(beratBuah.value + " kg");
                // Buat Tombol Reset
                let deleteButton = document.createElement("button");
                deleteButton.textContent = "Hapus";
                // tambahkan attribute onclick untuk button dengan function deleteFruit
                // 'this' mengambil elemen (button) bila function dipanggil sebagai parameter
                deleteButton.setAttribute("onclick", "deleteFruit(this)");
                // Buat array agar bisa di iterasi for loops
                let tableDataArray = [
                    nomorUrut,
                    addNamaBuah,
                    addBeratBuah,
                    deleteButton
                ];
                // for loops appendChild setiap data di array ke dalam td
                for (let i = 0; i < tableDataArray.length; i++) {
                    let td = document.createElement("td");
                    td.appendChild(tableDataArray[i]);
                    // check jika berat di atas 5, dan apakah index sedang berada di addBeratBuah
                    if (Number(beratBuah.value) > 5 && i == tableDataArray.indexOf(addBeratBuah)) {
                        td.classList.add("berat");
                    }
                    tr.appendChild(td);
                    tableBuah.appendChild(tr);  
                }
            }
            // Jika tidak ada nilai di input, berikan alert
            else {
                window.alert("Masukan Input")
            }
        }
        // function untuk menghapus buah
        function deleteFruit(button) {
            // mencari elemen 'tr' yang terdekat dari elemen button
            let tableButtonRow = button.closest("tr");
            if (tableButtonRow) { // jika true...
                tableBuah.removeChild(tableButtonRow);
                updateNomorUrut();
            }
        }  
        // function update Nomor Urut
        function updateNomorUrut() {
            let rows = tableBuah.getElementsByTagName('tr');
            for (let i = 0; i < rows.length; i++) {
                // check setiap row (ditambah satu karena index 0 merupakan head)
                // check children pertamanya (column pertama)
                // tambahkan text content dengan index + 1
                rows[i + 1].children[0].textContent = i + 1;
            }
        }
    </script>
</body>
</html>
HASILNYA :



1. Struktur Dasar HTML

Kode HTML yang pertama mendefinisikan struktur dasar dokumen. Dengan menggunakan tag <form>, kita membuat formulir untuk memasukkan data buah seperti nama dan berat. Informasi ini kemudian dapat disimpan dan ditampilkan.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta tags dan judul dokumen -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Penyimpanan Data Buah</title>

    <!-- Style untuk tata letak dan animasi -->
    <style>
        /* Style untuk tabel dan tombol */
        /* ... (diberikan dalam kode) ... */
    </style>
</head>
<body>
    <!-- Formulir input dan tabel untuk menampilkan data -->
    <!-- ... (diberikan dalam kode) ... -->

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


2. Formulir Input
Formulir input menggunakan elemen <form> dan menyediakan kolom untuk memasukkan nama buah dan beratnya. Tombol "Simpan" diprogram untuk menyimpan data buah ke dalam tabel.
fungsi dan Kegunaan:Input Fields: Menyediakan input untuk nama buah dan beratnya.
<button>: Tombol "Simpan" yang, ketika diklik, memanggil fungsi saveFruit() untuk menyimpan data buah.

<form>
    <label>Nama Buah:</label>
    <input type="text" id="namaBuah"> <br>
    <label>Berat:</label>
    <input type="number" id="beratBuah" min="0">
    <span>kg</span> <br>
    <button onclick="saveFruit()">Simpan</button>
    <!-- ... (diberikan dalam kode) ... -->
</form>


3. Tabel Penyimpanan Data Buah

Tabel digunakan untuk menampilkan data buah yang telah dimasukkan. Setiap baris tabel memiliki nomor urut, nama buah, berat, dan tombol "Hapus" untuk menghapus data buah tertentu.

<table id="tableBuah">
    <tr>
        <th>No</th>
        <th>Nama Buah</th>
        <th>Berat</th>
        <th>Action</th>
    </tr>
</table>


4.Variabel dan Element HTML

Fungsi dan Kegunaan:tableBuah: Menyimpan referensi ke elemen tabel dengan id "tableBuah".
namaBuah dan beratBuah: Menyimpan referensi ke elemen input dengan id "namaBuah" dan "beratBuah" untuk mendapatkan nilai yang dimasukkan pengguna.

let tableBuah = document.getElementById("tableBuah");
let namaBuah = document.getElementById("namaBuah");
let beratBuah = document.getElementById("beratBuah");


5. Fungsi saveFruit().

Fungsi dan Kegunaan:Validasi Input: Memeriksa apakah kedua input, namaBuah dan beratBuah, memiliki nilai atau tidak.
Membuat Elemen Baru: Jika valid, membuat elemen <tr> baru untuk menampilkan data buah di dalam tabel.
Memeriksa Berat: Jika berat buah di atas 5 kg, menambahkan kelas CSS "berat" untuk memberikan efek visual tertentu.
Menambahkan Data ke Tabel: Menambahkan elemen baru ke dalam tabel dengan nomor urut, nama buah, berat, dan tombol "Hapus".
Memanggil updateNomorUrut(): Untuk memastikan nomor urut di tabel diperbarui.


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


6. Fungsi deleteFruit(button)

Fungsi dan Kegunaan:
Menghapus Baris Tabel: Menghapus baris tabel yang sesuai dengan tombol "Hapus" yang diklik.
Memanggil updateNomorUrut(): Untuk memastikan nomor urut di tabel diperbarui setelah penghapusan


function deleteFruit(button) {
    // ... (diberikan dalam kode) ...
}


7.Fungsi updateNomorUrut()

Fungsi dan Kegunaan:
Memperbarui Nomor Urut: Mengubah nomor urut di kolom pertama setiap baris tabel setelah penghapusan.

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

terimakasih :)
di Tidak ada komentar:

Senin, 05 Februari 2024

Mini Project 3 (modul 5)









 Nama : Bintang Dwi Anggara
 Kelas  : X-RPL

Kali ini kita akan membuat mengubah elemnt text yang akan diubah menjadi text  yang berwarna seperti yang ada dibawah dimana warna elemnt ganjil dan warna elemnt genapa kita dapat setting berbagai warna yang sudah terdapat discript javascript.








Seperti di bawah ini adalah code seperti ada yang diatas dan disini saya akan membahas mengenai code code dan fungsinya : 

<!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>

    <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");
        let red = document.getElementById("selectRed");
        let green = document.getElementById("selectGreen");
        let blue = document.getElementById("selectBlue");

        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>

Langkah langkah 

1.) Menambahkan elment html dengan menggunakan ('ul') dan ('li')

  <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>

2.) Lalu kita tambahkan sebuah element select dengan id select genap(kode yang akan dipanggil ketika javascript dijalankan) dan onchange evencolor(sebuah id untuk memanggil warna ketika code javascript dijalankan) lalu untuk option adalah pilihan antara warna warna dan juga terdapat value berisi warna merah,hijau,dan biru.

<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>

3.)  Lalu kita masuk mengenai script berikut contoh codenya :

  let list = document.getElementsByTagName("li");
        let selectGenap = document.getElementById("selectGenap");
        let selectGanjil = document.getElementById("selectGanjil");
        let red = document.getElementById("selectRed");
        let green = document.getElementById("selectGreen");
        let blue = document.getElementById("selectBlue");

(Let) kegunaan dari adalah sebuah id dari kode javascript dan disini kita menggunakan ('documnt.getelmentByid') fungsinya adalah untuk menyimpan sebuah data dan akan berjalan ketika code javascript dijalankan dan code diatas menyimpan sebuah data select genap select ganjil dan data warna merah hijau dan juga biru.


4.)  lalu kita tambahkan code function dan kondisi while,if,dan else

  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++;
            }
        }

pertama kita menambahkan function dengan nama evenColor, kegunaannya  menambahkan style color pada list genap. 

kegunaan dari lat index 0 code ini dihitung dari angka 0 dalam array nomer 0 itu adalah satu jika nomernya 1 maka angkanya adalah 2 jadi disni kita menggambil array 0 atau nomer 1 (genap)

dan untuk  while (index < list.length) penjela saanya adalah 

jika index lebih besar dari pada angka list maka kegunaanya adalah untuk mengiterasi melalui elemen-elemen dalam list. Loop ini akan terus berjalan selama nilai index kurang dari panjang list.

if (index % 2 == 0) kegunaan Dalam kondisi ini, kita memeriksa apakah nilai index merupakan angka genap. Jika ya, maka kita melanjutkan untuk mengubah warna teks elemen selanjutnya pada list.
if (selectGenap.value == "red") { ... } :
di dalam blok kondisi ini, kita memeriksa nilai yang dipilih dari elemen dengan id selectGenap. Berdasarkan nilai tersebut, kita mengubah warna teks elemen selanjutnya dalam list menjadi merah, hijau, biru, atau kosong (default).

else if (selectGenap.value == "green") { list[index + 1].style.color = "green"; } else if (selectGenap.value == "blue") { list[index + 1].style.color = "blue";}

Bagian ini merupakan salah satu inti dari fungsi evenColor. Di sini, kita memeriksa nilai yang dipilih oleh pengguna melalui suatu elemen dengan ID selectGenap. Jika nilai yang dipilih adalah "green", maka warna teks dari elemen berikutnya pada list akan diubah menjadi hijau. Begitu juga jika nilainya "blue", warna teks akan diubah menjadi biru.


























di Tidak ada komentar:
Langganan: Komentar (Atom)

TUGAS DPK Cara kolaborasi di Github

       Cara kolaborasi di Github Bintang Dwi Anggara  Juni  05, 2024 Assalamualaikum wr wb. Pada kesempatan kali ini, kelompok saya akan mem...

  • Data Analyitic
       Apa itu data?   sebelumnya mari kita pahami terlebih dahulu mengenai data,pengertian data,jenis-jenis        data,dan fungsi dari data ke...
  • Perbedaan PHP native dan PHP Framework (Laravel)
    P engembangan website dengan bahasa pemrograman PHP dapat memilih menggunakan PHP Native atau memanfaatkan framework, salah satunya adalah F...
  • Mini Project 2 (Modul 5)
                           NAMA  : Bintang Dwi Anggara             KELAS : X-RPPL      Tujuan dari pembahasaan mini project ini adalah m...