Pada artikel sebelumnya saya sudah membuat kode warna menggunakan RGBA disini kita akan melanjutkan bagaimana cara membuat kode hexa warna generator dengan VueJS, karena disini adalah lanjutan artikel kemarin dan saya juga masih menggunkan template yang kemarin jadi hasilnya nantinya akan ada RGBA dan HEXA ya, mari simak terus ya teman-teman.
Bagi teman-teman yang baru saja bergabung cara membuat kode hexa warna generator dengan VueJS, teman-teman bisa simak artikel sebelumnya ya, karena disini saya anggap teman-teman sudah paham tentang VueJS, jika belum tau apa itu VueJS teman-teman juga bisa liat artikel saya sebelum-belumnya karena disitu saya juga menjelaskan apa itu VueJS, dan untuk kasus kali ini ketika kita menginputkan suat value nilai RGBA maka kode hexa pun akan muncul ya, oke kode hexa sendiri saya membuatnya seperti ini
|
1 |
parseInt(this.red).toString(16); |
ini lah kode yang membuat kode hexa, jadi nantinya nilai itu akan dari 0-9 dimana akan mengasilkan 0-9 juga, tetapi ketika value menunjukan huruf a, yang tadinya #090000 menjadi #0a0000 dan ketika sudah mencapi huruf “f” maka secara otomatis huruf f itu berada pada index pertama dan ketika di jalankan kembali akan di mulai dari index pertama “1” dan index kedua “0”. begitu seterusnya, supaya enak kita lihat langsung saja cara pembuatannya seperti ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
hexa(){ var varRed = parseInt(this.red).toString(16); var varGreen = parseInt(this.green).toString(16); var varBlue = parseInt(this.blue).toString(16); if (this.red < 15) { varRed = '0' + varRed } if (this.green < 15) { varGreen = '0' + varGreen } if (this.blue < 15) { varBlue = '0' + varBlue } return this.hexa = '#' + varRed + varGreen + varBlue; } |
kode ini saya masukan pada computed, dan ini lah kode lengkapnya
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cara Membuat Kode Hexa Warna Generator dengan VueJS</title> <style type="text/css"> .box{width: 300px; height: 200px; border: 1px solid #666; float: left; margin-right : 20px;} .container{ width: 800px; margin:auto; margin-top: 20px } </style> </head> <body> <div id="app"> <colorgenerator></colorgenerator> </div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> Vue.component('colorgenerator',{ template: ` <div class="container"> <h1>Cara Membuat Kode Hexa Warna Generator dengan VueJS</h1> <div class="box" :style="{background: background}"> </div> <div class="auturan"> <div> <input type="range" min="0" max="255" v-model="red"> <input type='number' v-model='red' /> </div> <div> <input type="range" min="0" max="255" v-model="green"> <input type='number' v-model='green' /> </div> <div> <input type="range" min="0" max="255" v-model="blue"> <input type='number'v-model='blue' /> </div> <div> <input type="range" min="0" max="1" step="0.1" v-model="opaci"> <input type='number'v-model='opaci' /> </div> </div> <hr> <div> {{background}} </div> <hr> <div> Kode HEXA: {{hexa}} </div> </div> `, data(){ return{ red: 0, green: 0, blue:0, opaci:1 } }, computed:{ background(){ return this.background = "RGBA("+this.red +", "+this.green + ", "+ this.blue + ", " + this.opaci + ")" }, hexa(){ var varRed = parseInt(this.red).toString(16); var varGreen = parseInt(this.green).toString(16); var varBlue = parseInt(this.blue).toString(16); if (this.red < 15) { varRed = '0' + varRed } if (this.green < 15) { varGreen = '0' + varGreen } if (this.blue < 15) { varBlue = '0' + varBlue } return this.hexa = '#' + varRed + varGreen + varBlue; } } }) new Vue({ el: "#app" }) </script> </body> </html> |
silahkan teman-teman copy dan lihat hasilnya, seperti ini:
dan teman-teman bisa lihat demonya dsini demo,
dan saya rasa cukup sampai disini belajar kita tentang cara membuat kode hexa warna generator dengan VueJS, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.