Ixyelnoit.com - Berawal dari sebuah pertanyan "Bagaimana cara membuat color picker yang mudah menggunakan HTML5?". Nah pada postingan kali ini saya akan mengajarkan kalian cara membuat color picker menggunakan HTML5, color picker ini biasa digunakan pada sebuah website yang memiliki fungsi memilih warna.
Disini saya akan menjelaskan dulu apa itu HTML5 dan color picker, kalian hanya simak baik-baik postingan ini dan kalian pasti akan memahaminya sendiri.
HTML5 - Adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan.
Color Picker - Widget antarmuka pengguna grafis, biasanya ditemukan dalam perangkat lunak grafik atau online, digunakan untuk memilih warna dan terkadang untuk membuat skema warna.
Dan itulah beberapa penjelasan dari saya apa itu HTML5 dan apa itu color picker
dan sekarang kita akan membuat color picker kalian tinggal copy paste script yang ada di bawahi sini.
JavaScript
function getColor() {
document.getElementById("colorHex").innerHTML = 'HEX : ' + document.getElementById("inputColor").value;
document.getElementById("colorRGB").innerHTML = 'RGB : '+ hexToRgb(document.getElementById("inputColor").value);
}
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
var r = parseInt(result[1], 16);
var g = parseInt(result[2], 16);
var b = parseInt(result[3], 16);
return 'RGB('+r+','+g+','+b+')';
}HTML
<h3>Pick a Color:</h3>
<input id="inputColor" type="color" value="#ff1a1a"/>
<button onclick="getColor()">Get Color</button>
<p id="colorHex"></p>
<p id="colorRGB"></p>
CSS
input{
width:20%;
cursor: pointer;
}
button{
height:27px;
}Well, gitu saja untuk postingan dari saya semoga bisa bermanfaat bagi kalian dan berusahalah untuk menjadi programmer.
Sekian....