Wajah menggunakan warna gaya javascript
|
Color picker adalah aplikasi yang berfungsi untuk mengetahui kode pada setiap warna yang ditampilkan pada gambar di layar komputer atau situs web. Nah, kali ini kita akan mencoba membuat sebuah aplikasi color picker yang akan menampilkan tiga struktur warna sekaligus Lalu, bagaimana caranya membuat aplikasi picker color dengan JavaScript? . Baca memainkan. Instal Wajah PHP dari XAMPP di Windows Tutorial1. Unduh skrip Pemilih Warna. Letakkan semua folder dan pendukung file di folder PickerColor 2. Buka XAMPP Control Panel, serta aktifkan Apache 3. Buka program teks editor yang ter-install di komputer kamu, disini saya menggunakan teks editor Notepad++. Ketikkan kode HTML5 berikut ini
Simpan kode HTML5 diatas di folder xampplite, htdocs, buat folder baru dengan nama PickerColor lalu simpan kode diatas dengan nama index. html 4. Untuk melihat hasil script code diatas, kamu bisa buka browser kamu ketiklah http. //localhost/PickerColor  5. Untuk membuat background aplikasi, buka kembali lembar baru di teks editor dan ketikkan script code CSS berikut ini ________satu_______Simpan kode CSS diatas di folder xampplite, htdocs, pilih folder PickerColor lalu buat folder baru dengan nama st lalu simpan kode diatas dengan nama styles. css 6. Muat ulang alamat situs web http. //localhost/PickerColor. Tampilan background aplikasi picker color 7. Untuk menampilkan aplikasi picker color, buka kembali lembar baru di teks editor dan ketikkan script code JavaScript berikut ini const pickrContainer = document.querySelector('.pickr-container');
const themeContainer = document.querySelector('.theme-container');
const themes = [
[
'classic',
{
swatches: [
'rgba(244, 67, 54, 1)',
'rgba(233, 30, 99, 0.95)',
'rgba(156, 39, 176, 0.9)',
'rgba(103, 58, 183, 0.85)',
'rgba(63, 81, 181, 0.8)',
'rgba(33, 150, 243, 0.75)',
'rgba(3, 169, 244, 0.7)',
'rgba(0, 188, 212, 0.7)',
'rgba(0, 150, 136, 0.75)',
'rgba(76, 175, 80, 0.8)',
'rgba(139, 195, 74, 0.85)',
'rgba(205, 220, 57, 0.9)',
'rgba(255, 235, 59, 0.95)',
'rgba(255, 193, 7, 1)'
],
components: {
preview: true,
opacity: true,
hue: true,
interaction: {
hex: true,
rgba: true,
hsva: true,
input: true,
clear: true,
save: true
}
}
}
],
[
'monolith',
{
swatches: [
'rgba(244, 67, 54, 1)',
'rgba(233, 30, 99, 0.95)',
'rgba(156, 39, 176, 0.9)',
'rgba(103, 58, 183, 0.85)',
'rgba(63, 81, 181, 0.8)',
'rgba(33, 150, 243, 0.75)',
'rgba(3, 169, 244, 0.7)'
],
defaultRepresentation: 'HEXA',
components: {
preview: true,
opacity: true,
hue: true,
interaction: {
hex: false,
rgba: false,
hsva: false,
input: true,
clear: true,
save: true
}
}
}
],
[
'nano',
{
swatches: [
'rgba(244, 67, 54, 1)',
'rgba(233, 30, 99, 0.95)',
'rgba(156, 39, 176, 0.9)',
'rgba(103, 58, 183, 0.85)',
'rgba(63, 81, 181, 0.8)',
'rgba(33, 150, 243, 0.75)',
'rgba(3, 169, 244, 0.7)'
],
defaultRepresentation: 'HEXA',
components: {
preview: true,
opacity: true,
hue: true,
interaction: {
hex: false,
rgba: false,
hsva: false,
input: true,
clear: true,
save: true
}
}
}
]
];
const buttons = [];
let pickr = null;
for (const [theme, config] of themes) {
const button = document.createElement('button');
button.innerHTML = theme;
buttons.push(button);
button.addEventListener('click', () => {
const el = document.createElement('p');
pickrContainer.appendChild(el);
// Delete previous instance
if (pickr) {
pickr.destroyAndRemove();
}
// Apply active class
for (const btn of buttons) {
btn.classList[btn === button ? 'add' : 'remove']('active');
}
// Create fresh instance
pickr = new Pickr(Object.assign({
el, theme,
default: '#42445a'
}, config));
});
themeContainer.appendChild(button);
}
buttons[0].click();
Simpan kode JavaScript diatas di folder xampplite, htdocs, pilih folder PickerColor, pilih folder st lalu simpan kode diatas dengan nama script. js 8. Muat ulang alamat situs web. http. //localhost/PickerColor. Tampilan awal dari aplikasi picker color Aplikasi ini menampilkan 3 pilihan struktur warna yaitu classic, monolith, dan nano. Untuk menampilkan struktur warna klasik, klik tombol klasik, ketuk warna untuk membuka pilihan warna, dan pilih warna Untuk menampilkan struktur warna monolit, klik tombol monolit, ketuk warna untuk membuka pilihan warna, dan pilih warna Untuk menampilkan struktur warna nano, klik tombol nano, tap warna untuk membuka pilihan warna, dan pilih warna 9. Selesai. Menarik sekali bukan? Catatan Htdocs adalah salah satu folder bawaan dari XAMPP, yang fungsinya khusus untuk menyimpan berkas-berkas yang akan dijalankan, seperti berkas PHP, HTML, CSS, dan JavaScript Kemudian, mungkin ada yang menanyakan maksud dari http. //localhost/PickerColor. Localhost merupakan server lokal pada komputer. Localhost dapat diaktifkan ketika anda meng-klik start Apache di XAMPP Control Panel. Pick Color menunjuk pada folder Picker Color saya di xampp lite, htdocs. Serta, indeks. html dan gaya. css adalah nama file yang tersimpan kode script di atas Demikian penjelasan dari tutorial Face Membuat Aplikasi Picker Color dengan JavaScript. selamat mencoba |
