Cara Mengubah dan Memilih Warna dengan Javascript
Terkadang kita sering bingung ketika kita ingin mengubah dan memilih kode warna dan pastinya kita mesti mencari kode warna yang sesuai bagi tampilan laman, walaupun hakekatnya memang banyak web yang telah menyediakan kode warna yang dapat kita gunakan. Sekarang ini kalian dapat merancang kumpulan kode warna yang dapat kalian gunakan, minimal bikin kalian gunakan pribadi, cara nya lumayan gampang kita hanya perlu mengumpulkan kode warna yang akan kita gunakan, berikut ini akan saya berikan panduan yakni bagaimana Cara Mengubah dan Memilih Warna dengan Javascript. Simak strategi nya berikut ini.
Seketika saja, silahkan kalian bikin struktur HTML5 seperti berikut bagi melihat warna yang terdapat.
<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 bagi 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 yaitu, kita akan merancang kegunaan dimana ketika kita klik tombol warna akan secara otomatis berubah warna sesuai dengan warna yang telah terdapat di sintak javascript. Bagi merancang kegunaan 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;
}Di sintak var bgcolhex silahkan kalian dapat isikan kupulan warna yang akan dimanfaatkan. Setelah seluruh sintak diatas diketikan berikutnya simpan file nya kemudian jalankan di browser masing-masing dan lihat hasil nya, bagi mengubah dan memilih warna silahkan kalian tinggal klik tombol change.
Bagus begitulah tadi panduan mengenai bagaimana Cara Mengubah dan Memilih Warna dengan Javascript, semoga dapat bermanfaat 🙂
Bagi lebih jelasnya panduan diatas kalian pun dapat lihat hasilnya di demo dibawah ini.
Sumber https://kursuswebsite.org
