Cara Memberikan Warna Random Pada Tag Input

Assalamuâ€™alaikum warahmatullahi wabarakatuh

Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips seputar dunia website, pada kesempatan kali ini saya akan memberikan tips tentang Cara Memberikan Warna Random Pada Tag Input dengan javascript. Dalam latihan kali ini kita akan membuat sebuah warna random pada tag input, idenya yaitu ketika form input di masukkan ke dalam tag input maka border pada tag input akan berubah sesuai warna di dalam array. Warna border akan otomatis berganti dengan sendirinya, dan kita akan memanfaatkan fungsi setTimeout() javascript.

Langsung saja kita implementasikan Cara Memberikan Warna Random Pada Tag Input, teman – teman siapkan text editornya dan ketikan array yang di dalamnya banyak nama – nama warna yang nantinya kita akan tampilkan pada bordernya.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cara Memberikan Warna Random Pada Tag Input</title>
	<style>
		body {
			font-family: sans-serif;
			margin: 10%
		}
	</style>
</head>
<body>
	<input type="text" placeholder="Random Color"> 
</body>
</html>

Save terlebih dahulu struktur html nya di atas ini, kemudian kita akan buat array color

var colors = [
  'darksalmon', 'hotpink', 'lightskyblue', 'goldenrod', 'peachpuff',
  'mediumspringgreen', 'cornflowerblue', 'blanchedalmond', 'lightslategrey'
];

Kemudian masukkan script javascript nya di bawah ini

var e = document.querySelector('input');
warna = 0

e.style.borderWidth ="5px"
e.style.borderStyle ="solid";
function hasil(){
	e.style.color=colors[warna++]
	e.style.borderColor =colors[warna++];	
}

Untuk mengatur border pada text input, kemudian kita akan tambahkan fungsi setTimeout() untuk mengaktifkan warna random nya dan kita gunakan jugaÂ onkeyup()

e.onkeyup = function(){
	if (warna > colors.length) {
		warna = 0
	}else{
		setTimeout(hasil(),1000)
	}
}

Jika sudah save dan buka pada browser, lelu teman – teman masukkan text ini ke dalam form input dengan bersamaan teman – teman mengetik warna border juga akan silih berganti sesuai warna yang sudah kita siapkan pada array.

Baik, sekian pada artikel kali ini tentang Cara Memberikan Warna Random Pada Tag Input dan kita akan jumpa kembali pada artikel yang akan datang. Terimakasih dan semoga bermanfaat untuk teman – teman yang saat ini sedang belajar javascript. Sampai jumpa.

Assalamuâ€™alaikum warahmatullahi wabarakatuh

Cara Memberikan Warna Random Pada Tag Input

Kategori