Membuat Aplikasi Ubah Warna Lampu dengan Javascript

Tidak di ragukan lagi Javascript adalah bahasa pemrogramman yang powerfull dan banyak sekali di pakai di berbagai aplikasi, dari aplikasi web, android, sampai robot. Nah kali ini saya akan menshare bagaimana Cara Membuat Aplikasi Ubah Warna Lampu dengan Javascript, yuk kita praktekan teman teman.

pertama tama kalian siapkan gambar berikut:

beri nama gambar gambar tersebut, supaya kita mudah memanggilnya yah teman teman.

lalu kita bisa 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 tidak berantakan, buat folder dengan nama img dan masukan gambar gambar tadi ke dalam folder tersebut. seperti gambar berikut:

lalu di index ketikan kode HTML berikut.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Aplikasi 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>Aplikasi Ubah Warna Lampu</h5>
				<div class="m-2 ">
					<img src="img/lampu1.png" alt="" id="tes">
					<img id="merah" class="lampu" src="img/merah.png" alt="">
					<img id="kuning" class="lampu" src="img/kuning.png" alt="">
					<img id="hijau" class="lampu" src="img/hijau.png" alt="">
				</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>

buat file css dan beri nama dengan nama style.css, dan ketikan kode berikut di dalam 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;
}

untuk tampilan sudah selesei dan tampilan nya akan seperti gambar di bawah ini.

sekarang kita buat fungsi nya menggunakan javascript. ketikan script berikut di bawah komen <!– javascript–> yang saya buat atau sebelum tag penutup body.

nah kode kita sudah selesei, dan coba kita jalankan aplikasinya, ketika kita klik salah satu tombol, maka lampu akan berubah dan ketika kita klik tombol hentikan maka semua fungsi di hentikan.

ini contoh ketika kita klik tombol kuning maka lampu berubah menjadi kuning.

sekian tutorial Membuat Aplikasi Ubah Warna Lampu dengan Javascript, semoga bermanfaat yah teman teman.