JAVASCRIPT

Contoh Program Javascript Sederhana Event Click Part 2


Dalam artikel ini saya akan membuat sebuah program sederhana dengan javascript event click pada part 2. pada part 1 saya telah membuat program dengan javascript event click juga ketika tombol di klik maka akan muncul berupa penambahan nilai. nah program yang saya akan buat ini ketika tombol di klik maka background pada website akan berubah warna dengan di tambahi transisi jadi akan berubah dengan sedikit lambat yang saya lakukan ini murni menggunakan vanilla javascript.


Program yang saya buat moga bisa jadi referensi kalian yah dan menambah ilmu pengetahuan jika kalian sedang mendalami bahasa pemrograman javascript ini. nah kalian buat dulu dengan nama index.html

<!doctype html>
   <html lang="en">
  <head>
    <title>Event Click Javascript Part 2</title>
  </head>   
    
  <body>         
     <br>
     <br>
     <br>
     <!--Buat tombol-->
     <center><button type="button" id="warna">Ganti Warna!</button></center>
      
            
      <script src="script.js"></script>
  </body>
</html>

Lalu kalian buat juga file javascript nya jangan lupa. kalian beri nama file script.js 

//buat variabel
let btn_warna = document.getElementById('warna');

//ketika tombol di klik
btn_warna.addEventListener('click', function(){
    
    //buat transisi ketika warna berubah
document.body.style.transition='1s';
    
    //buat variabel dengan fungsi math round dan math random
const r=Math.round(Math.random()* 255 + 1);
const g=Math.round(Math.random()* 255 + 1);
const b=Math.round(Math.random()* 255 + 1);
    
    //ketika sudah di klik ganti warna background website
document.body.style.backgroundColor='rgb('+ r +','+ g +','+ b +')';
});

Nah program yang saya buat bisa di lihat di sini agar tahu gambarannya bagaimana. kode yang saya buat di atas bisa di modifikasi lagi sesuai selera kalian :D