bloger bintang: Mini Project 2 (Modul 5)

NAMA : Bintang Dwi Anggara
KELAS : X-RPPL

Tujuan dari pembahasaan mini project ini adalah membuat membuat sebuah list yang di berikan warna dengan menggunakan javascript

Bisa kita lah input tersebut merubah warna dari list yang diatas tersebut,hal ini adalah pembuataan oleh javascript dan element html.

Ini adalah code dari hasil diatas tersebut :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project 2</title>
</head>
<style>
    .biru-dan-tebal {
        color: rgb(255, 0, 0);
        font-weight: bolder;
    }
</style>
<body>
    <ul>
        <li>Acura</li>
        <li>Alfa Romeo</li>
        <li>Aston Martin</li>
        <li>Audi</li>
        <li>Bentley</li>
        <li>BMW</li>
        <li>Bugatti</li>
        <li>Buick</li>
    </ul>
    <ol>
        <li>Acura</li>
        <li>Alfa Romeo</li>
        <li>Aston Martin</li>
        <li>Audi</li>
        <li>Bentley</li>
        <li>BMW</li>
        <li>Bugatti</li>
        <li>Buick</li>
    </ol>

    <button onclick="genapBiru()">Ubah Warna Elemen Genap</button>

    <script>
        function genapBiru() {
         
            let list = document.getElementsByTagName("li");

            
            for (let index = 0; index < list.length; index++) {
               
                if (index % 2 === 0) {
                   
                    list[index + 1].className = "biru-dan-tebal";
                }
            }
        }
    </script>
</body>
</html>

Langkag langkah untuk membut hasil diatas :

1. ) <style>

    .biru-dan-tebal {
        color: rgb(255, 0, 0);
        font-weight: bolder;
    }
</style>

Code style ini adalah untuk merubah warna dan membuat font dari text nya menjadi tebal seperti code diatas posisi dari code ini diluar body html.

 color: rgb(255, 0, 0); : untuk merubah warna tulisan

 font-weight: bolder; : manambahkan font menjadi tebal

2.) <ul>

        <li>Acura</li>
        <li>Alfa Romeo</li>
        <li>Aston Martin</li>
        <li>Audi</li>
        <li>Bentley</li>
        <li>BMW</li>
        <li>Bugatti</li>
        <li>Buick</li>
    </ul>

Code diatas mengunakaan element html menggunakan list dari tulisan yang akan diubah warna teksnya.

   <button onclick="genapBiru()">Ubah Warna Elemen Genap</button>

Code diatas ini adalah menbahkan elemnt html fungsinya yaitu menjalankan sebuah function yang ada didalam atribut onclick,dan fungsi dari onclik juga adalah untuk menjalankan code javascript disaat dijalankannya code

4.) <script>

        function genapBiru() {
         
            let list = document.getElementsByTagName("li");

            
            for (let index = 0; index < list.length; index++) {
               
                if (index % 2 === 0) {
                   
                    list[index + 1].className = "biru-dan-tebal";
                }
            }
        }

    function genapBiru()

       yang pertama ada function fungsi
      dari code ini adalah untuk menjalankan sebuah sistem yang akan
             dibuat code ini adalah kunci yang
      sering digunakan dalam javascript pastinya tak heran dengan
                  fungsi dari function tersebut karena bisa
      dibilang function ini adalah jantungnya sebuah sistem yang
           akan dibuat/dijalankan
      dalam javascript


  



  

    let list = document.getElementsByTagName("li");


          let sendiri
  adalah membuat sebuah varibael yang akan dipanggil dalam sebuah kode html
  dan 


          untuk document.getElementsByTagName("li");
  sendiri adalah untuk memanggil kode yang ada di
          html tag
  name 


      dibawah adalah dengan memanggil li di kode html dibawah ini
   <ul>
        <li>Acura</li>
        <li>Alfa Romeo</li>
        <li>Aston Martin</li>
        <li>Audi</li>
        <li>Bentley</li>
        <li>BMW</li>
        <li>Bugatti</li>
        <li>Buick</li>
    </ul>

---------------------------------------------------------------------------------------------
          function genapBiru() {
         
            let list = document.getElementsByTagName("li");

            
            for (let index = 0; index < list.length; index++) {
               
                if (index % 2 === 0) {
                   
                    list[index + 1].className = "biru-dan-tebal";
                }
            }
        }
    </script>


 for (let index = 0; index < list.length; index++) {

 dan code untuk mengakses elemen yang ada di Array tersebut, kita bisa gunakan for loop. Kegunaan   for loop ini adalah kita bisa mengakses setiap data (index) yang ada di sebuah Array dan   mengeksekusi kode untuk setiap index-nya. For loop membutuhkan 3 parameter, yakni :


1.) Inisialisasi, biasanya membuat variabel untuk nilai awal index.

2.) Kondisi, bagian yang menentukan apakah loop akan berjalan lagi atau tidak.         Jika kondisi benar (true), lanjutkan looping. Jika tidak (false), stop looping.

3.) Perubahan, bagian ini dieksekusi setiap iterasi (atau setelah kondisi masih          benar/true). Biasanya digunakan untuk menambah (increment) atau mengurang      (decrement) nilai variabel pada inisialisasi.
Dan itu saja dari saya semoga membantu :)

bloger bintang

Senin, 29 Januari 2024

Mini Project 2 (Modul 5)

Tidak ada komentar:

Posting Komentar

TUGAS DPK Cara kolaborasi di Github

Laporkan Penyalahgunaan