(modul 5 project 2)

   Pada kesempatan kali ini saya akan membuat sebuah program yang akan merubah warna text yang genap pada sebuah list menggunakan list



<!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>
    <h1>kalau
genap berubah</h1>

    <ul>
      <li>Ferarri</li>
      <li>Lamborghini</li>
      <li>Ford</li>
      <li>Audi</li>
      <li>BMW</li>
      <li>Toyota</li>
      <li>Tesla</li>
    </ul>
    <button onclick="berubahtebel()">ubah warna elemen genap</button>

    <script>
      function berubahtebel() {
        var listItem = document.querySelectorAll("ul li");

        for (var i = 0; 1 < listItem.length; i++) {
          if (i % 2 == 1) {
            listItem[i].style.color = "blue";
            listItem[i].style.fontWeight = "bold";
          }
        }
      }
    </script>
  </body>
</html>

Berikut adalah penjelasan mengenai kode tersebut:

  1. 1. Di dalam <head>, terdapat tag <meta> yang menentukan pengaturan karakter dan tampilan halaman.

  2. 2. Di dalam <body>, terdapat sebuah <h1> yang menampilkan judul "kalau genap berubah".

  3. 3. Selanjutnya, terdapat sebuah unordered list (<ul>) yang berisi beberapa elemen list (<li>), masing-masing merepresentasikan merek mobil.

  4. 4. Setelah list, terdapat sebuah tombol (<button>) yang ketika ditekan akan memanggil fungsi JavaScript berubahtebel().

  5. 5. Di dalam tag <script>, terdapat sebuah fungsi JavaScript berubahtebel(), yang bertujuan untuk mengubah warna dan ketebalan font dari elemen-elemen genap dalam daftar mobil.

    • Fungsi ini pertama-tama mengambil semua elemen <li> dalam <ul> menggunakan document.querySelectorAll("ul li").

    • Kemudian, fungsi ini melakukan loop melalui setiap elemen dalam daftar tersebut.

    • Setiap elemen akan diperiksa apakah indeksnya adalah bilangan genap dengan menggunakan if (i % 2 == 1). Jika ya, maka warna font elemen tersebut akan diubah menjadi biru (listItem[i].style.color = "blue") dan ketebalan fontnya akan diatur menjadi tebal (listItem[i].style.fontWeight = "bold").





Komentar

Posting Komentar