Cara Memberikan Warna Background Body dengan Warna list dari array -

Pada hari senin yang cerah ini kita akan mencoba cara memberikan warna background body dengan warna list dari array, jadi nantinya warna pada background akan berubah-rubah tergantung kita memilih yang mana, oiya disini nantinya kita akan memilih warna background pada body dengan list yang sudah ada di select, oke bagaimana cara membuatnya simak terus ya teman-teman.

Oke jadi nanti kasusnya disini list itu akan kita dapatkan dengan data array, jadi nanti semua warna yang sudah saya inputkan ke array, dan nanti kita dari array kita akan tampilkan di list dengan struktur HTML yaitu select dan option, dan disini strukturnya saya akan coba menampilkannya dengan bootstrap ya,Â jadi supaya terlihat rapi dan cantik, oiya kenapa haru kita masukin ke array dulu ka, kenapa tidak langsung aja tulis di select optionya, jadi kenapa saya buat seperti ini, di karenakan data array nanti kita bisa kita tambahkan dan kurangkan kapan pun tentunya butuh tambahan khusus lagi untuk itu, jadi supaya kita lebih fleksibel saja, walaupun untuk warna saya rasa tidak usah menggunakan array sudah cukup, tidak apa saya cuma ingin memberi tau saja,

Lanjut ya, setelah kita berhasil menampilkan data list arraynyaÂ ke dalam select option dengan warna-warnanya, nanti kita akan pilih salah satu warna itu dan yang terjadi adalah warna pada background akan berubah sesuai dengan option warna yang kita pilih seperti itu ya kira-kira, dan yang kita gunakan untuk cara memberikan warna background body dengan warna list dari array adalah bahasa pemrograman javascriptnya, sudah bisa di bayangkan ya, oke langsung saja kita lihat cukup simple ko seperti ini:

<!DOCTYPE html>
<html>
<head>
	<title>Cara Memberikan warna background body dengan warna list dari array</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-md-2"></div>
		<div class="col-md-8">
			<img src="https://cwe.ac.id/marketing/wp-content/uploads/2018/05/kursus-seo-terbaik-di-jakarta-dumet-school.png" class="img-fluid">

			<div class="input-group mb-3">
			  <select class="custom-select" id="inputGroupSelect">

			  </select>
			</div>

		</div>
		<div class="col-md-2"></div>
	</div>
</div>	
<script type="text/javascript">
	var buah = ["Aqua", "Aquamarine", "Bisque", "Black", "Brown", "Chartreuse", "Chocolate", "Coral", "Cyan", "Fuchsia", "Indigo", "Lime"];

	var select = document.querySelector("#inputGroupSelect");
	for(var i = 0; i<buah.length; i++){
		select.innerHTML += `<option>${buah[i]}</option>`
	}
	var option = document.querySelectorAll("option")
	for(var j=0; j<option.length; j++){
		option[j].addEventListener("click", function(){
			document.body.style.background = this.innerText
		})
	}
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Cara Memberikan warna background body dengan warna list dari array</title>

</head>

<body>

</select>

</div>

</div>

var buah = ["Aqua", "Aquamarine", "Bisque", "Black", "Brown", "Chartreuse", "Chocolate", "Coral", "Cyan", "Fuchsia", "Indigo", "Lime"];

var select = document.querySelector("#inputGroupSelect");

for(var i = 0; i<buah.length; i++){

select.innerHTML += `<option>${buah[i]}</option>`

}

var option = document.querySelectorAll("option")

for(var j=0; j<option.length; j++){

option[j].addEventListener("click", function(){

document.body.style.background = this.innerText

})

}

</script>

</body>

</html>

Silahkan teman-teman tulis dan lihat hasilnya apakah akan seperti ini:

warna yang teman-teman lihat itu adalah hasil dari select optionya, dengan warna coral, dan untuk live hasilnya seperti ini klik kodenya See the Pen:

See the Pen OBwOQv by bento (@masbeni) on CodePen.

oke saya rasa cukup sampai disini belajar kita tentang cara memberikan warna background body dengan warna list dari array semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.

Cara Memberikan Warna Background Body dengan Warna list dari array

Facebook DUMET School

Categories