Cara Mengganti Warna Menggunakan Javascript
Pada kesempatan kali ini kita kan belajar membangun mengenai bagaimana cara mengubah warna object menggunakan Javascript. Pada kasus ini saya akan menampilkan sebuah object mobil yang dapat diganti warna mobilnya. Lalu bagaimana cara menggantinya yuk mari simak pada pembahasan dibawah ini:
Baiklah sebelum dimulai rekan rekan dapat menyimpan gambar mobil atau object benda lain supaya nanti dapat berganti warna. Jadi dikala kita klik di gambar akan berubah warna. yuk seketika saja ikutin strategi berikut ini:
Langkah pertama-tama:
Bikin file HTML yang berisi code seperti dibawah ini:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>Cara Mengubah Background Dengan Javascript</title>
<img src=car.jpg alt=Pada kesempatan kali ini kita kan belajar membangun mengenai bagaimana cara mengubah warna o Cara Mengganti Warna Menggunakan Javascript>
<div id=bg></div>
Lalu berikutnya tambahkan style css seperti berikut:
*{
margin: 0;
padding: 0;
}
body{overflow: hidden;}
#bg{
position: absolute;
top:0;
width: 100%;
height: 100vh;
mix-blend-mode: hue;
}
img{width: 100%}Langkah Kedua
Nah kini tinggal menambahkan script dari javascript yang dapat rekan rekan ketikkan seperti dibawah ini:
const bg = document.getElementById('bg');
function randomColor(){
return Math.floor(Math.random() * 255);
}
bg.addEventListener('click', () =>{
bg.style.backgroundColor = 'rgba('+randomColor()+','+randomColor()+','+randomColor()+')'
})Apabila telah selesai mengetikkan segala code diatas, coba simpan lalu jalankan di browser masing-masing. Dan hasilnya kan seperti tampilan berikut ini:
Saya kira lumayan pada pembahasan kali ini semoga dapat menambah referensi belajar rekan rekan segala. Selamat mencoba dan hingga jumpa.
terima kasih
Sumber https://kursuswebsite.org
