KELAS : X-RPPL
Tujuan dari pembahasaan mini project ini adalah membuat membuat sebuah list yang di berikan warna dengan menggunakan javascript
.png)
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 danuntuk document.getElementsByTagName("li"); sendiri adalah untuk memanggil kode yang ada di html tag namedibawah 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>
.png)
.png)
.png)
.png)
.png)
.png)
