Membuat Aplikasi Ubah Warna Lampu dengan Javascript
Tak di ragukan lagi Javascript ialah bahasa pemrogramman yang powerfull dan banyak sekali di gunakan di beraneka program, dari program web, android, hingga robot. Nah kali ini saya akan menshare bagaimana Cara Membangun Program Ubah Warna Lampu dengan Javascript, yuk kita praktekan teman teman.
pertama-tama tama kalian siapkan gambar berikut:
beri nama gambar gambar tersebut, supaya kita gampang memanggilnya yah teman teman.
lalu kita dapat mulai koding nya, silahkan buka text editor kalian dan ketikan file html berikut dan beri nama dengan nama index.html, oh ya gambar gambar tadi kalian satukan satu folder yah teman teman biar tak berantakan, bikin folder dengan nama img dan masukan gambar gambar tadi ke pada folder tersebut. seperti gambar berikut:
lalu di index ketikan kode HTML berikut.
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>Program Rubah Warna Lampu</title>
<link rel=stylesheet href=https://bootswatch.com/4/sketchy/bootstrap.min.css>
<link rel=stylesheet href=style.css>
</head>
<body>
<br>
<div class=container>
<div class=row>
<div class=col-4 col-xs-4 offset-4 p-2 text-center>
<h5>Program Ubah Warna Lampu</h5>
<div class=m-2 >
<img src=img/lampu1.png alt=Tak di ragukan lagi Javascript ialah bahasa pemrogramman yang powerfull dan banyak seka Membangun Program Ubah Warna Lampu dengan Javascript id=tes>
<img id=merah class=lampu src=img/merah.png alt=Tak di ragukan lagi Javascript ialah bahasa pemrogramman yang powerfull dan banyak seka Membangun Program Ubah Warna Lampu dengan Javascript>
<img id=kuning class=lampu src=img/kuning.png alt=Tak di ragukan lagi Javascript ialah bahasa pemrogramman yang powerfull dan banyak seka Membangun Program Ubah Warna Lampu dengan Javascript>
<img id=hijau class=lampu src=img/hijau.png alt=Tak di ragukan lagi Javascript ialah bahasa pemrogramman yang powerfull dan banyak seka Membangun Program Ubah Warna Lampu dengan Javascript>
</div>
<div class=m-1 b>
<button class=btn btn-danger id=btn1>Merah</button>
<button class=btn btn-warning id=btn2>Kuning</button>
<button class=btn btn-success id=btn3>Hijau</button>
</div>
<button class=btn btn-secondary btn-block id=btn4>Matikan Lampu</button>
</div>
</div>
</div>
<!-- javascript -->
</body>
</html>
bikin file css dan beri nama dengan nama style.css, dan ketikan kode berikut di pada nya.
*{padding: 0;margin: 0}
img.lampu{
position: absolute;
left: 73px;
top: 44px;
display: none;
}
.col-4{
border: 4px dotted grey;
}
h5{
border-bottom: 4px dotted grey;
}
.b{
border-top: 4px dotted grey;
padding-top: 10px;
}bagi tampilan telah selesei dan tampilan nya akan seperti gambar di bawah ini.
kini kita bikin kegunaan nya menggunakan javascript. ketikan script berikut di bawah komen <!– javascript–> yang saya bikin atau sebelum tag penutup body.
nah kode kita telah selesei, dan coba kita jalankan aplikasinya, ketika kita klik diantara tombol, karenanya lampu akan berubah dan ketika kita klik tombol hentikan karenanya seluruh kegunaan di hentikan.
ini contoh ketika kita klik tombol kuning karenanya lampu berubah menjadi kuning.
demikianlah panduan Membangun Program Ubah Warna Lampu dengan Javascript, semoga bermanfaat yah teman teman.
Sumber https://kursuswebsite.org
