Pernah nggak sih, pas lagi asyik ngoding, tiba-tiba ada satu titik koma ajaib yang hilang atau salah nama variabel, terus aplikasi kita nggak jalan sama sekali? Rasanya kayak mau nyalain motor balap tapi businya kotor, padahal bensin full, oli baru, semua udah rapi. Nah, itu dia serunya dunia coding! Setiap error adalah teka-teki, dan setiap solusi adalah kemenangan kecil yang bikin nagih.
Hari ini, kita akan berpetualang sedikit lebih dalam ke inti dari dunia web development, bukan cuma sekadar memperbaiki busi kotor, tapi membangun "mesin" kita sendiri dari nol. Kita akan menciptakan dua aplikasi web yang cukup fundamental namun powerful: sebuah Kalkulator Cerdas dan sebuah Page Builder sederhana. Semuanya hanya dengan bermodalkan trio sakti: HTML, CSS, dan JavaScript murni, tanpa bantuan framework yang kadang bikin kita terlena. Ini adalah cara terbaik untuk benar-benar memahami bagaimana roda-roda di balik layar berputar.
Memulai Petualangan: Kalkulator Cerdas Ala Kita
Kalkulator? Ah, itu kan gampang! Eits, jangan salah. Membuat kalkulator yang fungsional dan responsif itu melatih logika kita bagaikan seorang mekanik yang merakit mesin dari komponen-komponen terpisah. Dulu, saya pernah kelupaan menambahkan parseFloat() atau parseInt() di kalkulator awal saya. Hasilnya? '1' + '1' jadi '11', bukan '2'! Rasanya kayak mau masak nasi goreng tapi lupa nyalain kompor, bahan udah lengkap semua, tapi nggak ada panas. Frustrasi, tapi justru dari situ saya belajar pentingnya detail.
1. Pondasi Kuat dengan HTML
HTML adalah kerangka bodi mobil kita. Kita perlu input untuk menampilkan angka, dan tombol-tombol untuk angka dan operator. Anggap saja ini seperti menata dashboard dan kemudi mobil, setiap elemen harus di tempatnya.
<div class="calculator">
<input type="text" id="display" disabled>
<div class="buttons">
<button>7</button>
<button>8</button>
<button>9</button>
<button class="operator">/</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="operator">*</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="operator">-</button>
<button>0</button>
<button>.</button>
<button class="equal">=</button>
<button class="operator">+</button>
<button class="clear">C</button>
</div>
</div>
2. Sentuhan Estetika dengan CSS
CSS adalah cat bodi, jok yang empuk, dan velg keren. Kita akan membuat kalkulator kita terlihat modern dan responsif, agar nyaman digunakan baik di layar desktop maupun di ponsel. Ini seperti memastikan mobil kita tampil keren di jalanan, tidak peduli kondisi lalu lintasnya.
.calculator {
width: 300px;
margin: 50px auto;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}
#display {
width: 95%;
height: 50px;
margin-bottom: 10px;
text-align: right;
font-size: 2em;
padding: 5px;
border: 1px solid #eee;
background-color: #f9f9f9;
}
.buttons button {
width: 60px;
height: 60px;
margin: 5px;
font-size: 1.5em;
border: none;
border-radius: 5px;
background-color: #e0e0e0;
cursor: pointer;
transition: background-color 0.2s;
}
.buttons button:hover {
background-color: #d0d0d0;
}
.operator { background-color: #f0a04b; color: white; }
.equal { background-color: #4CAF50; color: white; }
.clear { background-color: #f44336; color: white; }
3. Otak Pintar dengan JavaScript
Nah, ini dia mesinnya! JavaScript akan menghidupkan semua tombol, membaca input, melakukan perhitungan, dan menampilkan hasilnya. Ini adalah bagian yang paling menantang sekaligus paling memuaskan, seperti merangkai kabel-kabel di mesin agar semua sistem bekerja harmonis.
const display = document.getElementById('display');
const buttons = document.querySelectorAll('.buttons button');
let currentInput = '';
let operator = null;
let firstOperand = null;
buttons.forEach(button => {
button.addEventListener('click', () => {
const value = button.textContent;
if (value === 'C') {
currentInput = '';
operator = null;
firstOperand = null;
display.value = '';
} else if (value === '=') {
if (firstOperand !== null && operator !== null && currentInput !== '') {
try {
currentInput = String(eval(firstOperand + operator + currentInput));
display.value = currentInput;
firstOperand = null;
operator = null;
} catch (e) {
display.value = 'Error';
currentInput = '';
firstOperand = null;
operator = null;
}
}
} else if (['+', '-', '*', '/'].includes(value)) {
if (currentInput !== '') {
if (firstOperand === null) {
firstOperand = currentInput;
currentInput = '';
operator = value;
} else {
// Chaining operations, e.g., 5 + 3 - 2
firstOperand = String(eval(firstOperand + operator + currentInput));
display.value = firstOperand;
currentInput = '';
operator = value;
}
}
} else {
currentInput += value;
display.value = currentInput;
}
});
});
Dengan tiga bagian ini, kalkulator cerdas kita sudah siap beroperasi. Ingat, bagian eval() bisa berbahaya jika digunakan dengan input dari pengguna yang tidak terverifikasi. Untuk aplikasi sederhana ini, itu tidak masalah, tapi untuk aplikasi yang lebih kompleks, kita perlu membangun parser ekspresi yang lebih aman.
Naik Level: Page Builder Sederhana
Sekarang, mari kita beralih ke proyek yang lebih ambisius dan memicu kreativitas: sebuah Page Builder. Ini seperti memiliki lahan kosong dan alat bangunan lengkap, lalu kita bisa membangun rumah impian kita dengan mudah. Fitur drag-and-drop yang akan kita buat adalah intinya. Waktu pertama kali coba bikin fitur drag-and-drop, saya sering lupa event.preventDefault() di ondragover. Alhasil, elemennya malah mental-mental nggak jelas, kayak mencoba nangkap ikan pakai jaring yang bolong-bolong. Frustrasi tapi lucu, dan lagi-lagi, pelajaran berharga!
1. Kanvas dan Palet Alat: HTML
Kita butuh area kerja (kanvas) dan panel berisi elemen-elemen yang bisa kita seret (palet alat). Ini adalah lahan kosong dan tumpukan bahan bangunan kita.
<div class="page-builder-container">
<div class="toolbar">
<div class="draggable-element" draggable="true" data-type="text">Teks</div>
<div class="draggable-element" draggable="true" data-type="image">Gambar</div>
<div class="draggable-element" draggable="true" data-type="button">Tombol</div>
</div>
<div class="canvas" id="canvas">
<p class="placeholder">Seret elemen ke sini</p>
</div>
</div>
2. Desain yang Menarik: CSS
Kita akan membuat toolbar terlihat rapi dan kanvas terlihat jelas sebagai area kerja. Ini seperti membuat area kerja di lokasi konstruksi kita bersih dan terorganisir, dan bahan bangunan juga tersusun rapi.
.page-builder-container {
display: flex;
margin-top: 30px;
height: 600px;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.toolbar {
width: 200px;
padding: 15px;
background-color: #f8f8f8;
border-right: 1px solid #eee;
display: flex;
flex-direction: column;
gap: 10px;
}
.draggable-element {
padding: 10px;
background-color: #e2f0cb;
border: 1px dashed #a0d468;
cursor: grab;
text-align: center;
border-radius: 4px;
}
.canvas {
flex-grow: 1;
background-color: #fff;
padding: 20px;
position: relative;
overflow: auto;
border: 1px dashed #ccc;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2em;
color: #999;
}
.canvas .placeholder {
user-select: none;
}
.canvas .added-element {
padding: 10px;
margin: 10px;
border: 1px solid #b0e0e6;
background-color: #e0f2f7;
cursor: move;
}
.canvas .added-element.text-block { background-color: #ffe0b2; border-color: #ffb74d; }
.canvas .added-element.image-block { background-color: #c8e6c9; border-color: #81c784; }
.canvas .added-element.button-block { background-color: #bbdefb; border-color: #64b5f6; }
3. Otak Kreatif: JavaScript untuk Drag-and-Drop
Di sinilah keajaiban terjadi! JavaScript akan menangani interaksi drag-and-drop, membuat elemen bisa dipindahkan dari toolbar ke kanvas, dan bahkan memungkinkan pengeditan dasar. Ini adalah kontraktor utama kita yang mengatur semua pekerja dan material.
const toolbarElements = document.querySelectorAll('.draggable-element');
const canvas = document.getElementById('canvas');
let draggedElement = null;
toolbarElements.forEach(element => {
element.addEventListener('dragstart', (e) => {
draggedElement = e.target;
// console.log('Dragging:', draggedElement.dataset.type);
});
});
canvas.addEventListener('dragover', (e) => {
e.preventDefault(); // Penting! Agar elemen bisa di-drop
});
canvas.addEventListener('drop', (e) => {
e.preventDefault();
if (draggedElement) {
const type = draggedElement.dataset.type;
let newElement;
switch (type) {
case 'text':
newElement = document.createElement('p');
newElement.textContent = 'Ini adalah teks baru.';
newElement.contentEditable = true; // Bisa diedit langsung
newElement.classList.add('added-element', 'text-block');
break;
case 'image':
newElement = document.createElement('img');
newElement.src = 'https://via.placeholder.com/150'; // Placeholder gambar
newElement.alt = 'Gambar Placeholder';
newElement.style.maxWidth = '100%';
newElement.classList.add('added-element', 'image-block');
break;
case 'button':
newElement = document.createElement('button');
newElement.textContent = 'Tombol Baru';
newElement.classList.add('added-element', 'button-block');
break;
default:
return;
}
// Hapus placeholder jika ada
const placeholder = canvas.querySelector('.placeholder');
if (placeholder) {
canvas.removeChild(placeholder);
}
canvas.appendChild(newElement);
draggedElement = null;
}
});
Kenapa Harus Vanilla JavaScript?
Mungkin ada yang bertanya, kenapa harus pakai Vanilla JS, padahal ada banyak framework canggih seperti React, Vue, atau Angular? Jawabannya sederhana: pemahaman mendalam. Menggunakan Vanilla JS itu seperti belajar mengendarai mobil transmisi manual. Anda akan benar-benar memahami bagaimana setiap roda gigi bekerja, bagaimana kopling mengatur putaran mesin, dan bagaimana tenaga disalurkan.
Ketika Anda beralih ke mobil otomatis (framework), Anda akan jauh lebih menghargai kemudahan yang ditawarkan karena Anda sudah tahu betapa kompleksnya mekanisme di baliknya. Ini melatih kita untuk:
- Memahami DOM Manipulation: Bagaimana browser merepresentasikan halaman dan cara kita memanipulasinya.
- Logika Dasar JavaScript: Mengasah kemampuan algoritma dan pemecahan masalah tanpa abstraksi tambahan.
- Optimasi Performa: Belajar menulis kode yang efisien karena kita bertanggung jawab atas setiap detailnya.
- Fleksibilitas: Tidak terikat pada satu ekosistem, memungkinkan kita untuk mengadaptasi solusi dengan lebih luas.
Menutup Petualangan Kita
Selamat! Anda telah berhasil menciptakan dua aplikasi web yang cukup fundamental namun powerful. Dari kalkulator yang menghitung angka dengan presisi, hingga page builder yang memungkinkan kreativitas tanpa batas, semua ini adalah bukti bahwa dengan HTML, CSS, dan JavaScript saja, kita bisa membangun apa saja.
Dunia web development itu seperti samudra luas yang penuh dengan ikan-ikan unik. Kita baru saja belajar bagaimana memancing ikan di pinggir pantai. Ada banyak lagi teknik, alat, dan spesies ikan yang bisa kita temukan di tengah lautan. Teruslah bereksperimen, jangan takut error, karena setiap error adalah kesempatan untuk belajar sesuatu yang baru. Jadi, tunggu apa lagi? Buka editor kode Anda dan mulailah berkreasi!