Halo para kawan-kawan pengulik kode! Pernahkah kamu merasa gatal ingin menciptakan sesuatu yang interaktif di web, tapi bingung harus mulai dari mana? Dulu, saya pernah menghabiskan semalaman hanya untuk mencoba membuat sebuah tombol sederhana bisa mengubah warna latar belakang. Rasanya seperti mencoba memperbaiki mesin mobil dengan obeng bekas, tanpa tahu mana mur mana baut. Tapi justru dari kebingungan itulah, saya menemukan kekuatan sejati dari tiga serangkai web: HTML, CSS, dan JavaScript.
Hari ini, kita akan menyelami petualangan seru membangun dua aplikasi web yang cukup kompleks namun fundamental: sebuah kalkulator web dan, yang lebih ambisius, sebuah page builder sederhana. Kita akan melihat bagaimana tiga sekawan ini bisa bersinergi menciptakan pengalaman pengguna yang menarik, tanpa perlu framework atau library tambahan yang "berat". Anggap saja ini sesi bengkel kita, di mana kita merakit motor kustom dari nol!
Mesin Hitung Pribadi Anda: Merakit Kalkulator Web dari Nol
Membangun kalkulator itu seperti merakit jam tangan. Setiap bagian, sekecil apapun, harus berfungsi dengan presisi agar waktu (atau dalam kasus ini, angka) bisa ditampilkan dengan benar. Kesalahan kecil di satu titik bisa membuat jamnya mati total. Dulu, saya pernah pusing tujuh keliling saat mencoba menangani urutan operasi (kali, bagi, tambah, kurang) dengan benar, seringkali hasilnya malah NaN (Not a Number) karena salah menangani input string!
Bagian Tubuh: HTML untuk Struktur Kalkulator
HTML adalah kerangka utama kalkulator kita. Ibarat sasis pada mobil, ia menyediakan tempat untuk semua tombol dan layar. Kita akan butuh sebuah input untuk menampilkan angka, dan serangkaian tombol untuk angka (0-9) dan operator (+, -, *, /).
<div class="calculator">
<input type="text" class="display" value="0" disabled>
<div class="buttons">
<button class="button operator">AC</button>
<button class="button operator">+/-</button>
<button class="button operator">%</button>
<button class="button operator">/</button>
<button class="button">7</button>
<button class="button">8</button>
<button class="button">9</button>
<button class="button operator">*</button>
<!-- Lanjutkan dengan tombol angka dan operator lainnya -->
<button class="button operator">=</button>
</div>
</div>
Kecantikan & Fungsionalitas: CSS untuk Tampilan Memukau
CSS adalah cat dan finishing body mobil kita. Dengan CSS, kita bisa membuat kalkulator terlihat modern, responsif, dan mudah digunakan. Kita bisa menggunakan display: grid untuk menata tombol agar rapi seperti keyboard kalkulator sungguhan.
.calculator {
width: 320px;
background-color: #333;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0,0,0,0.5);
padding: 20px;
}
.display {
width: 100%;
height: 60px;
background-color: #444;
color: #fff;
text-align: right;
font-size: 2.5em;
border: none;
border-radius: 5px;
margin-bottom: 15px;
padding: 0 10px;
box-sizing: border-box;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.button {
width: 100%;
height: 60px;
font-size: 1.8em;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: #666;
color: #fff;
transition: background-color 0.2s ease;
}
.button:hover {
background-color: #888;
}
.operator {
background-color: #f7923c;
}
.operator:hover {
background-color: #ff9d47;
}
Otak di Balik Angka: JavaScript untuk Logika Perhitungan
Inilah mesin sesungguhnya! JavaScript akan mendengarkan setiap ketukan tombol, memproses input, dan melakukan perhitungan. Kita akan menyimpan "ekspresi" perhitungan dalam sebuah string, dan ketika tombol '=' ditekan, kita akan mengevaluasi string tersebut. Hati-hati dengan fungsi eval() karena isu keamanan; untuk proyek ini, kita anggap cukup. Namun, di proyek nyata, disarankan untuk membangun parser ekspresi sendiri atau menggunakan library yang aman.
const display = document.querySelector('.display');
const buttons = document.querySelectorAll('.button');
let currentExpression = '';
buttons.forEach(button => {
button.addEventListener('click', () => {
const value = button.textContent;
if (value === 'AC') {
currentExpression = '';
display.value = '0';
} else if (value === '=') {
try {
// HATI-HATI! eval() bisa berbahaya jika input tidak dikontrol.
// Untuk demo sederhana, ini cukup. Untuk produksi, hindari atau validasi ketat.
currentExpression = eval(currentExpression.replace(/%/g, '/100')).toString();
display.value = currentExpression;
} catch (error) {
display.value = 'Error';
currentExpression = '';
}
} else if (value === '+/-') {
if (currentExpression !== '' && currentExpression !== '0') {
if (currentExpression.startsWith('-')) {
currentExpression = currentExpression.substring(1);
} else {
currentExpression = '-' + currentExpression;
}
display.value = currentExpression;
}
} else {
currentExpression += value;
display.value = currentExpression;
}
});
});
Kanvas Digital Tanpa Batas: Merancang Page Builder Sederhana
Page builder adalah level berikutnya dalam petualangan kita. Ini seperti punya studio seni sendiri, di mana kita bisa menarik elemen (kuas, kanvas, cat) dan menatanya sesuka hati untuk menciptakan sebuah karya. Dulu, saya pernah iseng mencoba membuat ini dan frustrasi karena elemen yang saya drag malah "loncat-loncat" tidak mau diam di tempat yang saya inginkan. Ternyata kuncinya ada pada event preventDefault() dan memahami koordinat! Ilmu dasar banget, tapi sering lupa.
Konsep Dasar: Blok Bangunan & Kanvas
Ide intinya adalah memiliki "palet" elemen di satu sisi (misalnya, teks, gambar, tombol) dan area "kanvas" di sisi lain tempat elemen-elemen ini bisa ditarik dan ditempatkan. Elemen yang sudah ada di kanvas juga bisa diedit.
Struktur HTML & CSS: Toolbox & Workspace
Kita akan membuat dua area utama: sidebar untuk elemen yang bisa di-drag, dan main content area sebagai kanvas.
<div class="page-builder">
<div class="sidebar">
<h3>Elements</h3>
<div class="draggable-element" draggable="true" data-type="text">Text Block</div>
<div class="draggable-element" draggable="true" data-type="button">Button</div>
<div class="draggable-element" draggable="true" data-type="image">Image Placeholder</div>
</div>
<div class="canvas" id="drop-zone">
<!-- Elemen yang di-drop akan muncul di sini -->
</div>
</div>
Untuk CSS, pastikan .canvas memiliki tinggi minimum dan background agar terlihat jelas sebagai area drop. Elemen yang di-drop bisa diberi styling dasar seperti border agar terlihat terpisah.
JavaScript untuk Interaktivitas: Keajaiban Drag-and-Drop
Ini adalah bagian paling seru. Kita akan menggunakan API Drag and Drop bawaan browser.
draggable="true"pada elemen yang bisa ditarik.dragstart: Saat elemen mulai ditarik, kita simpan informasi elemen tersebut.dragover: Saat elemen berada di atas area drop, kita harus memanggilevent.preventDefault()agar drop event bisa terpicu.drop: Saat elemen dilepas di area drop, kita ambil informasi yang disimpan, buat elemen baru, dan tambahkan ke DOM.contenteditable="true": Atribut ini bisa kita tambahkan ke elemen teks yang di-drop agar langsung bisa diedit oleh pengguna.
const draggableElements = document.querySelectorAll('.draggable-element');
const dropZone = document.getElementById('drop-zone');
let draggedElementType = null;
draggableElements.forEach(element => {
element.addEventListener('dragstart', (e) => {
draggedElementType = e.target.dataset.type;
e.dataTransfer.setData('text/plain', draggedElementType); // Simpan tipe elemen
});
});
dropZone.addEventListener('dragover', (e) => {
e.preventDefault(); // Ini penting agar drop event bisa terpicu!
e.dataTransfer.dropEffect = 'copy';
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
const dataType = e.dataTransfer.getData('text/plain');
let newElement;
switch (dataType) {
case 'text':
newElement = document.createElement('p');
newElement.textContent = 'Klik untuk edit teks';
newElement.setAttribute('contenteditable', 'true');
newElement.style.border = '1px dashed #ccc';
newElement.style.padding = '10px';
newElement.style.margin = '10px 0';
break;
case 'button':
newElement = document.createElement('button');
newElement.textContent = 'Klik Saya';
newElement.style.padding = '10px 20px';
newElement.style.margin = '10px 0';
newElement.style.backgroundColor = '#007bff';
newElement.style.color = '#fff';
newElement.style.border = 'none';
newElement.style.borderRadius = '5px';
newElement.style.cursor = 'pointer';
// Tambahkan contenteditable untuk label button
newElement.setAttribute('contenteditable', 'true');
break;
case 'image':
newElement = document.createElement('img');
newElement.src = 'https://via.placeholder.com/150'; // Placeholder image
newElement.alt = 'Placeholder Image';
newElement.style.maxWidth = '100%';
newElement.style.height = 'auto';
newElement.style.display = 'block';
newElement.style.margin = '10px 0';
break;
default:
return;
}
dropZone.appendChild(newElement);
// Tambahkan event listener untuk drag-resize atau edit lebih lanjut jika diperlukan
});
Tentu saja, ini adalah versi yang sangat dasar. Untuk page builder yang lebih canggih, kamu perlu menambahkan fitur seperti menggeser elemen yang sudah di-drop, mengubah ukuran, menghapus, atau bahkan menyimpan dan memuat layout. Itu semua bisa dicapai dengan logika JavaScript yang lebih kompleks!
Mengapa Harus Vanilla? Kekuatan Tanpa Framework
Membangun aplikasi seperti ini dengan HTML, CSS, dan JavaScript "murni" (sering disebut Vanilla JS) mungkin terasa lebih melelahkan di awal dibandingkan langsung memakai React, Vue, atau Angular. Tapi ini seperti belajar mengendarai sepeda tanpa roda bantu. Kamu memang butuh usaha lebih untuk menjaga keseimbangan, namun setelah menguasainya, kamu akan punya pemahaman yang jauh lebih dalam tentang bagaimana sebuah sepeda bekerja, dan kamu bisa mengendarainya di medan apapun!
Keuntungan dari Vanilla JS adalah:
- Pemahaman Fundamental yang Kuat: Kamu benar-benar memahami cara kerja DOM, event listener, dan bagaimana browser berinteraksi.
- Performa Optimal: Tanpa overhead framework, aplikasi bisa lebih ringan dan cepat.
- Kontrol Penuh: Kamu punya kendali penuh atas setiap baris kode, tanpa abstraksi yang menyembunyikan detail.
- Tidak Ada Ketergantungan: Proyekmu tidak akan rusak karena ada perubahan mayor di versi framework terbaru.
Menutup Tirai: Petualanganmu Baru Dimulai!
Dari kalkulator sederhana hingga page builder yang interaktif, kita sudah melihat betapa kuatnya kombinasi HTML, CSS, dan JavaScript. Ini bukan hanya tentang membuat aplikasi, tetapi juga tentang melatih logika, memecahkan masalah, dan merasakan kepuasan saat melihat ide-ide kita menjadi kenyataan di layar. Ingat, dunia koding itu seperti lautan luas; semakin kamu berani berlayar jauh dari pantai, semakin banyak penemuan menakjubkan yang akan kamu temui. Jadi, teruslah bereksperimen, teruslah berkarya, dan jangan pernah takut untuk mengotori tanganmu dengan kode!
Selamat mencoba dan happy coding!