Membangun Mimpi Interaktif: Kalkulator dan Page Builder dengan HTML, CSS, JS Murni

Pernah merasa gemas saat kode JavaScript Anda sepertinya punya pikiran sendiri? Saya pernah, bahkan sering. Ingat sekali waktu saya mencoba membuat elemen-elemen dinamis dan berharap mereka bisa "dengar" instruksi saya, tapi malah seperti sedang berbicara dengan kucing di pagi hari — diabaikan sepenuhnya! Ternyata, keteledoran kecil saya dalam urutan eksekusi script atau event delegation lah biang keroknya. Pengalaman itu, meskipun bikin pusing, justru jadi pemicu semangat saya untuk lebih mendalami trio serangkai web: HTML, CSS, dan JavaScript.

Nah, hari ini, mari kita ubah pengalaman "gemas" itu menjadi sebuah petualangan membangun sesuatu yang luar biasa, namun tetap menggunakan fondasi yang sederhana. Kita akan membuat dua aplikasi web yang sangat interaktif dan fungsional: sebuah kalkulator dan sebuah page builder dasar. Ini bukan sekadar latihan ngoding, tapi lebih ke eksplorasi bagaimana tiga serangkai ini bisa berkolaborasi layaknya tim ahli di bengkel mobil. HTML sebagai rangka dan body mobil, CSS sebagai cat dan interior yang memukau, dan JavaScript adalah mesin serta sistem kelistrikan yang menghidupkannya.

Mengapa HTML, CSS, dan JavaScript Adalah Senjata Utama Anda?

Di era serba framework dan library ini, terkadang kita lupa betapa powerful-nya dasar-dasar ini. Membangun aplikasi dari nol dengan HTML, CSS, dan JS murni bukan hanya melatih pemahaman fundamental Anda, tapi juga memberikan fleksibilitas tanpa batas. Anda seperti seorang chef yang meracik bumbu sendiri, bukan sekadar menggunakan bumbu instan. Hasilnya? Rasa yang unik dan otentik!

HTML (HyperText Markup Language): Fondasi struktural. Ibarat tulang belulang dan otot yang membentuk tubuh aplikasi Anda. Tanpanya, tidak ada apa-apa.
CSS (Cascading Style Sheets): Sentuhan estetika. Ini adalah desainer interior aplikasi Anda, yang menentukan warna, layout, dan gaya visual agar nyaman dilihat dan digunakan.
JavaScript: Otak dan otot. Ini yang membuat aplikasi Anda hidup, merespons interaksi pengguna, dan melakukan komputasi kompleks.

Proyek Pertama: Kalkulator Sederhana Tapi Powerful

Membuat kalkulator adalah proyek "Hello World" versi interaktif. Ini adalah cara terbaik untuk memahami dasar-dasar event handling dan DOM manipulation di JavaScript.

Anatomi Kalkulator Kita: Seperti Kompor Gas di Dapur

Bayangkan kalkulator sebagai kompor gas Anda.

HTML: Ini adalah bodi kompor, tungku, dan tombol-tombol putarannya. Struktur dasar di mana semua elemen diletakkan.
CSS: Ini adalah warna kompor, peletakan tombol yang rapi, dan display angka yang jelas. Membuat kompor Anda terlihat modern dan mudah digunakan.
JavaScript: Ini adalah mekanisme di balik tombol putarannya. Saat Anda memutar tombol "api besar", ia akan membaca input Anda dan menyalakan api sesuai instruksi. Saat Anda menekan angka, ia akan menampilkannya. Saat Anda menekan operator, ia akan menyimpan operasi tersebut. Dan saat Anda menekan "=", ia akan menghitung hasil masakan Anda.

Bagaimana Kita Membangunnya?

HTML: Struktur Dasar
Kita akan membuat sebuah div sebagai wadah utama, sebuah input type="text" yang disabled sebagai layar kalkulator, dan banyak tombol untuk angka dan operasi.

<div class="calculator">
<input type="text" class="display" disabled>
<div class="buttons">
<button>7</button>
<button>8</button>
<!-- ... tombol lainnya ... -->
<button class="operator">+</button>
<button class="equals">=</button>
</div>
</div>

CSS: Membuatnya Tampak Apik
Dengan CSS, kita akan mengatur lebar, tinggi, warna latar, font, dan membuat tombol-tombol tersusun rapi menggunakan Flexbox atau Grid. Jangan lupa sentuhan :hover agar tombolnya responsif!

.calculator {
width: 300px;
margin: 50px auto;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}
.display {
width: 100%;
height: 60px;
font-size: 2em;
text-align: right;
padding: 10px;
background: #222;
color: #0f0;
border: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.buttons button {
padding: 20px;
font-size: 1.5em;
border: 1px solid #ddd;
background-color: #f0f0f0;
cursor: pointer;
}
.buttons button:hover {
background-color: #e0e0e0;
}

JavaScript: Otak di Balik Angka
Ini bagian paling seru! Kita akan mengambil elemen-elemen HTML, menambahkan event listener ke setiap tombol, dan membuat logika untuk menangani input angka, operator, dan proses perhitungan. Ini melibatkan manipulasi DOM untuk memperbarui layar kalkulator dan menggunakan fungsi seperti eval() (hati-hati dengan ini di aplikasi produksi!) atau membangun parser ekspresi sendiri.

const display = document.querySelector('.calculator .display');
const buttons = document.querySelectorAll('.calculator button');
let currentInput = '';
let operator = null;
let firstOperand = null;
buttons.forEach(button => {
button.addEventListener('click', () => {
const value = button.textContent;
if (button.classList.contains('number')) {
currentInput += value;
display.value = currentInput;
} else if (button.classList.contains('operator')) {
if (currentInput) {
firstOperand = parseFloat(currentInput);
operator = value;
currentInput = '';
}
} else if (button.classList.contains('equals')) {
if (firstOperand !== null && currentInput !== '' && operator !== null) {
const secondOperand = parseFloat(currentInput);
let result;
switch (operator) {
case '+': result = firstOperand + secondOperand; break;
case '-': result = firstOperand - secondOperand; break;
case '*': result = firstOperand * secondOperand; break;
case '/': result = firstOperand / secondOperand; break;
}
display.value = result;
currentInput = result.toString();
operator = null;
firstOperand = null;
}
} else if (button.classList.contains('clear')) {
currentInput = '';
operator = null;
firstOperand = null;
display.value = '';
}
});
});

Proyek Kedua: Page Builder Sederhana (Konsep Drag-and-Drop)

Ini adalah level berikutnya, seperti dari membuat kue rumahan ke membuat patung pahatan. Page builder adalah inti dari banyak CMS modern. Dengan HTML, CSS, dan JS, kita bisa membuat versi sederhananya yang memungkinkan kita menarik dan meletakkan elemen di halaman.

Anatomi Page Builder Kita: Bengkel Modifikasi Mobil Virtual

Bayangkan Anda memiliki bengkel modifikasi mobil virtual.

HTML: Ini adalah lantai bengkel Anda (area kerja) dan rak-rak suku cadang (panel elemen).
CSS: Ini adalah tata letak bengkel yang rapi, alat-alat yang tertata, dan cat yang menarik. Membuat bengkel Anda profesional dan nyaman digunakan.
JavaScript: Ini adalah para mekanik ahli di bengkel Anda.
- Mekanik 1 (Drag-and-Drop): Dia yang mengambil suku cadang (elemen HTML seperti teks, gambar, tombol) dari rak dan memindahkannya ke mobil (area kerja). Dia tahu bagaimana mengangkatnya (draggable) dan di mana meletakkannya (dropzone).
- Mekanik 2 (Penambah & Penghapus Bagian): Saat Anda bilang "pasang bumper ini!", dia akan menambahkannya ke mobil. Jika Anda bilang "copot knalpot yang itu!", dia akan mencopotnya.
- Mekanik 3 (Pengatur Properti): Dia yang bisa mengubah warna cat, ukuran ban, atau jenis jok mobil. Dia mengedit properti elemen yang sudah ada di area kerja.
- Mekanik 4 (Penyimpan Blueprint): Setelah mobil selesai dimodifikasi, dia menyimpan semua detailnya dalam sebuah blueprint (JSON/Local Storage) agar bisa dibongkar dan dirakit ulang kapan saja.

Bagaimana Kita Membangunnya?

HTML: Panel Elemen dan Area Kerja
Kita butuh sebuah panel di sisi kiri dengan beberapa elemen yang bisa di-drag (misalnya, teks, gambar, tombol) dan area kosong di kanan sebagai "kanvas" tempat elemen-elemen itu akan dijatuhkan.

<div class="container">
<div class="sidebar">
<div class="draggable-item" draggable="true" id="text-block">Teks</div>
<div class="draggable-item" draggable="true" id="image-block">Gambar</div>
<div class="draggable-item" draggable="true" id="button-block">Tombol</div>
</div>
<div class="canvas" id="drop-area">
<p>Jatuhkan elemen di sini!</p>
</div>
</div>

CSS: Tata Letak Menarik
CSS akan membuat sidebar dan canvas terlihat jelas, memberikan gaya pada elemen yang bisa di-drag, dan mungkin menambahkan indikator visual saat sebuah elemen sedang di-drag atau bisa dijatuhkan.

.container {
display: flex;
height: calc(100vh - 50px); /* Kurangi tinggi header/footer jika ada */
}
.sidebar {
width: 200px;
background-color: #f4f4f4;
padding: 15px;
border-right: 1px solid #ccc;
}
.draggable-item {
background-color: #fff;
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
cursor: grab;
text-align: center;
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.canvas {
flex-grow: 1;
border: 2px dashed #aaa;
margin: 15px;
background-color: #fafafa;
position: relative;
padding: 20px;
}
.canvas.hover { /* Untuk visual feedback saat dragging */
border-color: #555;
background-color: #e9e9e9;
}

JavaScript: Menghidupkan Interaksi
Ini bagian paling kompleks. Kita akan menggunakan API Drag and Drop bawaan browser.

Event Drag: Menandai elemen yang sedang di-drag (dragstart).

Event Dropzone: Mengizinkan area untuk menerima drop (dragover, drop).

const draggableItems = document.querySelectorAll('.draggable-item');
const dropArea = document.getElementById('drop-area');
let draggedItem = null;
draggableItems.forEach(item => {
item.addEventListener('dragstart', (e) => {
draggedItem = item;
e.dataTransfer.setData('text/plain', item.id); // Penting untuk transfer data
});
});
dropArea.addEventListener('dragover', (e) => {
e.preventDefault(); // Mencegah perilaku default (misalnya membuka link)
dropArea.classList.add('hover');
});
dropArea.addEventListener('dragleave', () => {
dropArea.classList.remove('hover');
});
dropArea.addEventListener('drop', (e) => {
e.preventDefault();
dropArea.classList.remove('hover');
if (draggedItem) {
const id = e.dataTransfer.getData('text/plain');
const originalItem = document.getElementById(id);
// Buat salinan elemen, agar elemen asli tetap di sidebar
const newItem = document.createElement('div');
newItem.textContent = originalItem.textContent;
newItem.className = 'dropped-item'; // Tambahkan kelas untuk styling/interaksi
newItem.style.position = 'absolute'; // Untuk penempatan bebas
newItem.style.left = `${e.clientX - dropArea.getBoundingClientRect().left}px`;
newItem.style.top = `${e.clientY - dropArea.getBoundingClientRect().top}px`;
// Tambahkan fitur edit/hapus
newItem.contentEditable = 'true'; // Bisa diedit langsung
newItem.addEventListener('click', (ev) => {
// Contoh: Bisa munculkan panel properti di sini
console.log('Item clicked for editing!', ev.target);
});
dropArea.appendChild(newItem);
draggedItem = null;
}
});

Menambahkan & Menghapus Elemen: Gunakan document.createElement() dan element.appendChild() atau element.removeChild().
Mengedit Properti: Ini bisa melibatkan panel properti di samping kanan yang muncul saat elemen diklik, memungkinkan pengguna mengubah teks, warna, ukuran, dll.
Menyimpan & Memuat Layout: Serialisasikan struktur DOM Anda menjadi JSON dan simpan di localStorage atau kirim ke server.

Kesimpulan: Seniman, Tukang Kayu, dan Arsitek Web

Membangun kalkulator dan page builder dengan HTML, CSS, dan JavaScript murni adalah pengalaman yang sangat berharga. Anda tidak hanya belajar syntax, tetapi juga bagaimana ketiga teknologi ini bersinergi secara mendalam. Anda akan merasa seperti seorang seniman yang memahat, seorang tukang kayu yang membangun, dan seorang arsitek yang merancang, semuanya dalam satu waktu.

Proyek-proyek ini mengajarkan Anda tentang DOM manipulation, event handling, logika pemrograman, dan desain interaksi. Ini adalah fondasi yang kokoh untuk menjelajahi framework atau library yang lebih kompleks di masa depan. Jadi, jangan ragu untuk bereksperimen, berkreasi, dan tentu saja, jangan takut error. Karena dari setiap error, kita belajar satu hal baru yang membuat kita menjadi programmer yang lebih hebat. Selamat mencoba!