Terkadang kita sering bingung ketika kita ingin mengubah dan memilih kode warna dan tentunya kita harus mencari kode warna yang sesuai untuk tampilan website, walaupun sebenarnya memang banyak web yang telah menyediakan kode warna yang bisa kita gunakan. Sekarang kalian bisa membuat kumpulan kode warna yang bisa kalian gunakan, minimal buat kalian gunakan pribadi, cara nya cukup mudah kita hanya perlu mengumpulkan kode warna yang akan kita pakai, berikut ini akan saya berikan tutorial yakni bagaimana Cara Mengubah dan Memilih Warna dengan Javascript. Simak langkah-langkah nya berikut ini.
Langsung saja, silahkan kalian buat struktur HTML5 seperti berikut untuk melihat warna yang tersedia.
<body> <link href='http://fonts.googleapis.com/css?family=Cutive+Mono' rel='stylesheet' type='text/css'> <div class="wrapper"> <div class="subwrapp" id="ubah"> <a href='#' id="clickme" onclick="change(), changeText()"><span>Change</span></a> <p id="colorvalue">#fff</p> </div> </div> </body>
Setelah itu, kita desain tampilan terlebih dahulu agar kode warna yang kita pilih akan terlihat menarik. Berikut sintak CSS3 untuk desain kode warna.
body{
margin:0;
padding:0;
background:#f2f2f2;
}
.wrapper {
width: 100%;
height: 100vh;
display:flex;
justify-content: center;
align-items: center;
}
.subwrapp{
width: 400px;
height: 400px;
border-radius: 50%;
background:white;
box-shadow: 0px 5px 0px #ccc;
display:flex;
align-items: center;
}
a {
background: #666 none repeat scroll 0 0;
border-radius: 50%;
color: #fafafa;
font-family: "Cutive Mono";
left: 335px;
padding: 30px;
position: relative;
text-decoration: none;
text-transform: uppercase;
top: -170px;
width: 50px;
z-index: 1;
text-align: center;
}
a:hover{
background: #3DBBED;
color:#fff;
border: 2px solid #D55391;
}
p{
font-family: 'Cutive Mono';
color:#222;
font-size:1.4em;
text-transform:uppercase;
padding:0;
margin:0;
}
span {
margin-top:20px;
}
Terakhir adalah, kita akan membuat fungsi dimana ketika kita klik tombol warna akan secara otomatis berubah warna sesuai dengan warna yang sudah tersedia pada sintak javascript. Untuk membuat fungsi ini kita akan menggunakan script javascript.
document.getElementById('ubah').style.background = '#fff';
var bgcolors = ['#4E2008', '#A23607', '#EFEACC', '#7A6A46', '#4B4934', '#3DBBED', '#A09C2E', '#E82B27',
'#FFDF00', '#D55391', '#4B1431'];
var i = 0;
function change(){
document.getElementById("ubah").style.backgroundColor = bgcolors[i];
}
var bgcolhex = ['#4E2008', '#A23607', '#EFEACC', '#7A6A46', '#4B4934', '#3DBBED', '#A09C2E', '#E82B27',
'#FFDF00', '#D55391', '#4B1431'];
function changeText(){
document.getElementById("colorvalue").innerHTML = bgcolhex[i++];
if(i == bgcolhex.length) i = 0;
}
Pada sintak var bgcolhex silahkan kalian bisa isikan kupulan warna yang akan dipakai. Setelah semua sintak diatas diketikan selanjutnya simpan file nya kemudian jalankan pada browser masing-masing dan lihat hasil nya, untuk mengubah dan memilih warna silahkan kalian tinggal klik tombol change.
Baik itulah tadi tutorial mengenai bagaimana Cara Mengubah dan Memilih Warna dengan Javascript, semoga bisa bermanfaat 
Untuk lebih jelasnya tutorial diatas kalian juga bisa lihat hasilnya pada demo dibawah ini.
The post Cara Mengubah dan Memilih Warna dengan Javascript appeared first on Kursus Website Terbaik.