Mengulik Otak Kreatif Web: Membangun Kalkulator dan Page Builder dengan HTML, CSS, JS

PintarApp • Juni 25, 2026
Mengulik Otak Kreatif Web: Membangun Kalkulator dan Page Builder dengan HTML, CSS, JS
Dulu, saya pernah merasa seperti montir pemula yang berusaha menghidupkan mesin mobil hanya dengan obeng dan tang seadanya. Panik saat kode saya tidak merespons, layar kosong melompong padahal sudah mengetik berjam-jam. Rasanya seperti lupa memasang busi padahal sudah mengisi bensin, padahal bensinnya sudah penuh. Itu adalah momen di mana saya menyadari bahwa fondasi itu krusial. Memahami betul bagaimana setiap komponen bekerja, bahkan yang paling dasar sekalipun, adalah kunci untuk membangun sesuatu yang kokoh dan berfungsi, tidak peduli seberapa kompleks nantinya. Nah, hari ini kita akan "membongkar mesin" dan melihat bagaimana tiga sahabat karib di dunia web—HTML, CSS, dan JavaScript—bisa kita gunakan untuk menciptakan dua aplikasi yang fundamental namun powerful: kalkulator dan sebuah page builder sederhana. Siap untuk petualangan merakit kode? Mari kita mulai!

Membangun Otak Digital Anda: Kalkulator Web Sederhana

Aplikasi kalkulator mungkin terdengar sepele, tapi ini adalah proyek yang sangat baik untuk memahami interaksi antara HTML, CSS, dan JavaScript. Ibaratkan kita sedang merakit sebuah robot sederhana.

HTML: Kerangka Robot

HTML adalah tulangnya, kerangkanya. Ini adalah bagian yang akan kita gunakan untuk menempatkan tombol angka, tombol operasi, dan layar untuk menampilkan hasilnya. Jika diibaratkan seperti mobil, HTML adalah rangka sasis dan bodi mobilnya. Tanpa rangka, tidak ada tempat untuk memasang mesin atau roda.


<div class="calculator">
<input type="text" class="display" readonly>
<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 class="clear">C</button>
<button>0</button>
<button class="equals">=</button>
<button class="operator">+</button>
</div>
</div>

Kode di atas adalah sketsa kasar bagaimana kita mengatur elemen-elemen kalkulator di halaman web.

CSS: Pakaian dan Gaya Robot

Setelah kerangka berdiri, kita perlu memberikannya penampilan. CSS adalah "cat dan interior" dari mobil kita. Ini yang membuat tombol-tombolnya rapi, warnanya enak dilihat, dan layarnya pas di tempatnya. CSS bertanggung jawab membuat kalkulator kita responsif dan memiliki sentuhan desain yang modern. Tanpa CSS, tombol-tombol akan terlihat seperti daftar panjang tanpa bentuk, tidak menarik dan sulit digunakan.


.calculator {
width: 320px;
margin: 50px auto;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.display {
width: 100%;
padding: 15px;
font-size: 2em;
text-align: right;
border: none;
background-color: #333;
color: white;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.buttons button {
width: 25%;
padding: 20px;
font-size: 1.5em;
border: 1px solid #eee;
background-color: #f0f0f0;
cursor: pointer;
transition: background-color 0.2s;
}
.buttons button:hover {
background-color: #ddd;
}

Dengan CSS, kita bisa menyulap tumpukan elemen HTML menjadi kalkulator yang fungsional dan estetis.

JavaScript: Mesin dan Otak Robot

Ini adalah bagian paling seru! Jika HTML adalah rangka dan CSS adalah cat, maka JavaScript adalah mesin dan sistem kelistrikan yang membuat mobil kita bisa melaju. JavaScript bertugas menangani setiap klik tombol, melakukan perhitungan, dan menampilkan hasilnya di layar. Ini yang menghidupkan kalkulator kita.


const display = document.querySelector('.display');
const buttons = document.querySelectorAll('.buttons button');
let currentInput = '';
let operator = null;
let firstOperand = null;
buttons.forEach(button => {
button.addEventListener('click', (e) => {
const value = e.target.textContent;
if (value === 'C') {
currentInput = '';
operator = null;
firstOperand = null;
display.value = '';
return;
}
if (value === '=') {
if (firstOperand !== null && operator !== null && currentInput !== '') {
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;
firstOperand = result;
currentInput = '';
operator = null;
}
return;
}
if (e.target.classList.contains('operator')) {
if (currentInput === '') return;
if (firstOperand === null) {
firstOperand = parseFloat(currentInput);
} else if (operator !== null) {
// If there's already an operand and operator, calculate first
// (advanced logic to handle chained operations)
}
operator = value;
currentInput = ''; // Clear current input for the next number
return;
}
// For number buttons
currentInput += value;
display.value = currentInput;
});
});

Kode di atas adalah intinya. Kita 'mendengarkan' setiap kali tombol diklik (event listener), lalu memutuskan apa yang harus dilakukan: apakah itu angka, operator, atau perintah 'clear' atau 'equals'. JavaScript inilah yang menjadi juru masak yang mencampur bahan-bahan (angka) dan mengolahnya sesuai resep (operator) hingga menghasilkan hidangan (hasil) yang lezat.

Melangkah ke Level Berikutnya: Page Builder Sederhana - Arsitek Digital Anda

Setelah berhasil dengan kalkulator, mari kita tantang diri dengan sesuatu yang lebih ambisius: sebuah page builder sederhana. Bayangkan Anda adalah seorang arsitek. Kalkulator adalah membangun satu jenis furnitur, sedangkan page builder adalah merancang dan membangun seluruh rumah, bahkan bisa memindahkan dinding dan menata ulang isinya sesuai keinginan.

HTML: Kanvas Kosong untuk Kreasi

Untuk page builder, HTML kita akan lebih seperti kanvas kosong dengan beberapa "perkakas" di sampingnya. Kita membutuhkan area di mana pengguna bisa "menjatuhkan" elemen (seperti teks, gambar, atau tombol) dan panel perkakas yang berisi elemen-elemen tersebut.


<div class="toolbar">
<button draggable="true" data-type="text">Add Text</button>
<button draggable="true" data-type="image">Add Image</button>
<button draggable="true" data-type="button">Add Button</button>
</div>
<div class="page-editor">
<!-- Elemen yang di-drag akan muncul di sini -->
</div>

toolbar adalah tempat perkakas kita, dan page-editor adalah area tempat kita membangun "rumah" digital kita.

CSS: Panduan Visual dan Penempatan

CSS di page builder berperan sebagai "aturan tata kota" dan "cetak biru visual". Ini mengatur bagaimana toolbar terlihat, bagaimana area editor responsif, dan bagaimana elemen yang di-drag memiliki visual feedback (misalnya, area drop yang berubah warna). CSS juga akan memastikan elemen-elemen yang ditambahkan ke editor memiliki gaya dasar agar tidak terlihat berantakan.


.toolbar {
width: 150px;
height: 100vh;
padding: 15px;
background-color: #f5f5f5;
float: left;
border-right: 1px solid #ddd;
}
.page-editor {
min-height: 100vh;
margin-left: 170px; /* Space for toolbar */
border: 2px dashed #ccc;
padding: 20px;
}
.page-editor.drag-over {
background-color: #e0f7fa; /* Visual feedback for drag */
}
.editable-element {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #aaa;
background-color: white;
cursor: grab;
}

Kita menggunakan CSS untuk membuat pengalaman "membangun" menjadi lebih intuitif.

JavaScript: Sang Sutradara Orkestra

Di sinilah JavaScript benar-benar bersinar. Jika kita adalah seorang arsitek, JavaScript adalah mandor proyek yang mengawasi segalanya. Ia akan menangani:

  • Drag and Drop: Mengaktifkan tombol di toolbar agar bisa di-drag, dan mendeteksi kapan elemen dijatuhkan ke area editor. Ini seperti memindahkan balok-balok LEGO dari kotak ke meja konstruksi. Kita akan menggunakan event seperti dragstart, dragover, dragleave, dan drop.
  • Menambah dan Menghapus Elemen: Saat sebuah elemen dijatuhkan, JavaScript akan membuat elemen HTML baru (misalnya <p> untuk teks, <img> untuk gambar) dan menambahkannya ke dalam page-editor. Kita juga bisa menambahkan fungsionalitas untuk menghapus elemen. Ini seperti menambahkan furnitur baru ke dalam rumah atau membuang yang tidak diinginkan.
  • Mengubah Konten: Mungkin kita ingin bisa mengklik teks dan langsung mengeditnya. JavaScript bisa melakukan ini dengan fitur seperti contenteditable="true" dan event input atau blur.
  • Menyimpan dan Memuat: Agar hasil kerja kita tidak hilang, JavaScript bisa menggunakan localStorage untuk menyimpan konfigurasi halaman yang sudah dibangun, dan memuatnya kembali saat halaman dibuka. Ini seperti menyimpan cetak biru rumah agar bisa dibangun ulang kapan saja. 

const toolbar = document.querySelector('.toolbar');
const pageEditor = document.querySelector('.page-editor');
let draggedType = null;
toolbar.addEventListener('dragstart', (e) => {
draggedType = e.target.dataset.type;
console.log('Dragging:', draggedType);
});
pageEditor.addEventListener('dragover', (e) => {
e.preventDefault(); // Allow drop
pageEditor.classList.add('drag-over');
});
pageEditor.addEventListener('dragleave', () => {
pageEditor.classList.remove('drag-over');
});
pageEditor.addEventListener('drop', (e) => {
e.preventDefault();
pageEditor.classList.remove('drag-over');
if (draggedType) {
let newElement;
switch (draggedType) {
case 'text':
newElement = document.createElement('p');
newElement.textContent = 'Ini teks baru. Klik untuk mengedit.';
newElement.contentEditable = 'true';
break;
case 'image':
newElement = document.createElement('img');
newElement.src = 'https://via.placeholder.com/150'; // Placeholder image
newElement.alt = 'Placeholder Image';
break;
case 'button':
newElement = document.createElement('button');
newElement.textContent = 'Klik Saya!';
break;
default:
break;
}
if (newElement) {
newElement.classList.add('editable-element');
pageEditor.appendChild(newElement);
console.log('Element added:', draggedType);
}
}
draggedType = null; // Reset
});

Melalui manipulasi DOM, event handling, dan sedikit logika, JavaScript mengubah sebuah halaman statis menjadi alat kreasi yang interaktif. Ini adalah bagian yang paling menantang sekaligus paling memuaskan saat kode berhasil berjalan.

Tantangan dan Kesenangan dalam Membangunnya

Membangun aplikasi seperti kalkulator dan page builder ini, meskipun menggunakan teknologi dasar, tidak lepas dari tantangan. Anda mungkin akan mengalami momen di mana kalkulator menghitung salah, atau elemen page builder tidak mau di-drag. Rasanya seperti mesin mobil yang tiba-tiba ngadat di tengah jalan, padahal kemarin baik-baik saja. Ini adalah saatnya kita berperan sebagai mekanik andal, membuka kap mesin, memeriksa satu per satu kabel dan komponen (debug kode JavaScript!), hingga menemukan sumber masalahnya. Proses ini, meski terkadang frustrasi, adalah bagian terbaik dari belajar coding. Setiap bug yang terpecahkan adalah seperti memenangkan pertarungan kecil dan menambah gudang pengalaman kita.

Kepuasan melihat kalkulator berfungsi dengan benar, atau berhasil men-drag dan meletakkan elemen di page builder, jauh lebih besar dari yang Anda bayangkan. Ini adalah bukti nyata bahwa dengan memahami dasar-dasar HTML, CSS, dan JavaScript, Anda sudah memegang kunci untuk membangun hampir semua hal di web. Mulai dari aplikasi sederhana hingga sistem yang kompleks, semuanya berakar dari tiga pilar ini.

Penutup: Jangan Takut Mencoba!

Jadi, kita sudah melihat bagaimana HTML bertindak sebagai struktur, CSS sebagai desainer visual, dan JavaScript sebagai otak di balik interaksi. Dari kalkulator sederhana hingga page builder yang interaktif, ketiga teknologi ini bekerja sama harmonis menciptakan pengalaman web yang kaya. Ini adalah gerbang untuk Anda menjadi seorang "arsitek digital" atau "montir web" yang andal. Jangan pernah meremehkan kekuatan fundamental. Mulailah dengan proyek-proyek kecil, pahami setiap baris kode, dan jangan takut mencoba hal-hal baru.

Ingat, setiap programmer hebat dimulai dari menulis baris kode pertama mereka dan menghadapi bug pertamanya. Jadi, siapkan editor kode Anda, buat secangkir kopi, dan mulailah petualangan membangun aplikasi web Anda sendiri. Selamat ngoding!

HTML CSS JavaScript Web Development