Membangun Jagoan Web Multifungsi: Kalkulator dan Page Builder Sendiri dengan HTML, CSS, JS!

PintarApp • September 20, 2026
Membangun Jagoan Web Multifungsi: Kalkulator dan Page Builder Sendiri dengan HTML, CSS, JS!

Pernahkah Anda merasa seperti montir yang mencoba menyalakan mesin tua? Dulu, saya seringkali merasa begitu saat pertama kali mencoba membuat interaktivitas di web. Ada saja error kecil yang bikin pusing tujuh keliling, seperti salah menempatkan tanda kurung di JavaScript atau lupa satu properti CSS. Rasanya ingin menyerah. Tapi, dari kegagalan-kegagalan kecil itulah saya belajar satu hal: fondasi itu penting. Dan fondasi web modern, sebagian besarnya, masih bertumpu pada trio maut HTML, CSS, dan JavaScript.

Hari ini, kita akan membongkar rahasia di balik dua aplikasi web yang mungkin terlihat kompleks namun sebenarnya bisa kita bangun dengan modal dasar tersebut: sebuah kalkulator interaktif dan page builder sederhana. Siap untuk menjadi arsitek dan insinyur web sekaligus? Mari kita mulai!

Membangun Kalkulator Impian Anda: Lebih dari Sekadar Menghitung

Siapa yang tidak butuh kalkulator? Dari belanja di pasar hingga menghitung anggaran proyek, alat ini esensial. Membuat kalkulator sendiri bukan hanya tentang fungsionalitas, tapi juga tentang memahami bagaimana input pengguna diolah menjadi output yang berarti. Mari kita analogikan ini seperti merakit sebuah jam tangan. Setiap komponen punya perannya sendiri.

Bagian 1: Kerangka Utama (HTML)

Ini adalah "casing" dan "tombol" jam tangan Anda. Kita butuh sebuah area untuk menampilkan angka dan serangkaian tombol untuk angka dan operasi matematika. Struktur HTML untuk kalkulator kita akan sangat straightforward:


<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>

Setiap <button> akan menjadi pemicu aksi, dan <input type="text"> dengan atribut readonly adalah layar penampil angka.

Bagian 2: Tampilan Cantik (CSS)

Setelah kerangkanya jadi, saatnya memberi "desain" pada jam tangan. Ini adalah bagian CSS untuk kalkulator. Kita bisa membuat kalkulator kita terlihat modern atau retro, sesuai selera. Gunakan Flexbox atau Grid untuk menata tombol agar rapi, berikan warna yang menarik, dan buat tombol-tombolnya terasa "nyata" saat disentuh (atau diklik).

  • Gunakan display: grid; pada container tombol untuk pengaturan layout yang presisi.
  • Atur padding dan margin agar setiap tombol punya ruang napas.
  • Tambahkan efek :hover untuk respons visual saat kursor berada di atas tombol.

Dengan sedikit sentuhan CSS, kalkulator kita tidak hanya fungsional tapi juga enak dipandang. Ibaratnya, jam tangan kita jadi punya muka yang menawan!

Bagian 3: Otak di Balik Angka (JavaScript)

Inilah "mesin" utama jam tangan, yang membuat semua komponen bergerak dan menunjukkan waktu (atau dalam kasus kita, hasil perhitungan). Dengan JavaScript, kita akan mendengarkan setiap klik tombol, mengumpulkan angka, dan melakukan operasi matematika. Logikanya sederhana: saat tombol angka diklik, tambahkan ke tampilan. Saat tombol operasi diklik, simpan operator dan angka pertama. Saat tombol sama dengan diklik, hitung hasilnya!


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', () => {
const value = button.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;
currentInput = result.toString();
firstOperand = null;
operator = null;
}
return;
}
if (['+', '-', '*', '/'].includes(value)) {
if (currentInput !== '') {
firstOperand = parseFloat(currentInput);
operator = value;
currentInput = ''; // Reset input for the next number
}
return;
}
currentInput += value;
display.value = currentInput;
});
});

Kode di atas adalah versi yang sangat disederhanakan. Anda bisa menambahkan validasi input, penanganan error (misalnya pembagian dengan nol), atau bahkan fitur memori. Intinya, JavaScript kalkulator ini adalah jantung yang membuatnya hidup.

Membangun Page Builder Sederhana: Kanvas Kreatif Anda Sendiri

Bayangkan Anda memiliki kotak LEGO. Anda bisa mengambil balok-balok, menyusunnya, dan menciptakan apa pun yang Anda inginkan. Itulah esensi dari page builder: sebuah alat yang memungkinkan pengguna membuat layout halaman web secara visual, tanpa perlu menulis baris kode. Ini adalah salah satu aplikasi yang sangat powerful untuk mempelajari interaksi JavaScript yang kompleks seperti drag-and-drop.

Bagian 1: Alat dan Kanvas (HTML)

Sama seperti kotak LEGO, kita butuh "balok-balok" (elemen) yang bisa digambar dan "alas" tempat kita menyusunnya. Dalam HTML untuk page builder, kita akan memiliki dua area utama:

  • Toolbox: Berisi elemen-elemen yang bisa di-drag (misalnya teks, gambar, tombol).
  • Canvas: Area di mana elemen-elemen tersebut akan di-drop dan disusun.

<div class="page-builder-container">
<div class="toolbox">
<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"></div>
</div>

Atribut draggable="true" sangat penting di sini, karena ini yang memberi tahu browser bahwa elemen tersebut bisa dipindahkan.

Bagian 2: Penataan Panggung (CSS)

Agar balok-balok LEGO kita terlihat rapi dan kanvasnya jelas, kita butuh CSS untuk page builder. Kita akan mengatur layout toolbox dan canvas, memberikan batas visual, dan mungkin sedikit gaya pada elemen yang bisa di-drag agar terlihat lebih intuitif. Penting juga untuk memberikan gaya pada elemen saat sedang di-drag atau saat ada elemen yang 'diarahkan' ke atas canvas.

  • .canvas { min-height: 500px; border: 2px dashed #ccc; } untuk menunjukkan area drop.
  • Gunakan cursor: grab; pada elemen yang bisa di-drag.
  • Pertimbangkan gaya untuk elemen :active atau saat di-drag.

Bagian 3: Sang Arsitek (JavaScript)

Inilah bagian terseru! JavaScript page builder kita akan menjadi "arsitek" yang mengawasi proses pembangunan. Kita akan mengimplementasikan fungsionalitas drag-and-drop. Ini melibatkan beberapa event:

  • dragstart: Saat elemen mulai digeser. Kita simpan data elemen yang sedang digeser.
  • dragover: Saat elemen digeser di atas area lain. Penting untuk mencegah perilaku default browser agar drop bisa terjadi.
  • drop: Saat elemen dilepas di area tertentu. Di sinilah kita "memindahkan" elemen dari toolbox ke canvas.

const toolbox = document.querySelector('.toolbox');
const canvas = document.querySelector('.canvas');
let draggedElement = null;
toolbox.addEventListener('dragstart', (e) => {
draggedElement = e.target;
// Store type of element being dragged
e.dataTransfer.setData('text/plain', e.target.dataset.type);
});
canvas.addEventListener('dragover', (e) => {
e.preventDefault(); // Allow drop
});
canvas.addEventListener('drop', (e) => {
e.preventDefault();
const dataType = e.dataTransfer.getData('text/plain');
let newElement;
if (dataType === 'text') {
newElement = document.createElement('p');
newElement.textContent = 'Klik untuk edit teks';
newElement.setAttribute('contenteditable', 'true'); // Make it editable
} else if (dataType === 'image') {
newElement = document.createElement('img');
newElement.src = 'https://via.placeholder.com/150'; // Placeholder image
newElement.alt = 'Gambar Placeholder';
} else if (dataType === 'button') {
newElement = document.createElement('button');
newElement.textContent = 'Klik Saya';
}
if (newElement) {
newElement.classList.add('canvas-element');
canvas.appendChild(newElement);
}
});

Selain drag-and-drop, Anda bisa mengembangkan fitur seperti:

  • Mengedit Konten: Gunakan atribut contenteditable="true" pada elemen teks agar bisa langsung diedit.
  • Menyimpan Layout: Gunakan localStorage atau kirim data ke server untuk menyimpan layout yang dibuat.
  • Resizing dan Repositioning: Menggunakan JavaScript untuk mengubah ukuran atau posisi elemen yang sudah ada di canvas.

Kreativitas Anda adalah batasnya. Dari sini, Anda bisa membangun page builder HTML CSS JS yang semakin canggih!

Penutup: Kekuatan Fondasi Web

Melihat bagaimana HTML, CSS, dan JavaScript bisa disulap menjadi kalkulator yang fungsional dan page builder yang interaktif adalah bukti nyata betapa kuatnya fondasi web ini. Tanpa kerangka kerja atau pustaka tambahan yang rumit, kita sudah bisa menciptakan aplikasi yang berguna dan memberikan pengalaman pengguna yang menarik.

Pelajaran terpenting di sini adalah: jangan takut untuk memulai dari yang paling dasar. Membangun sendiri dari nol memberikan pemahaman yang mendalam tentang setiap lapisan aplikasi. Ini seperti menguasai resep dasar masakan sebelum mencoba hidangan yang paling kompleks. Setelah Anda menguasai dasar-dasarnya, dunia web development akan terasa seperti taman bermain yang tak terbatas.

Jadi, tunggu apa lagi? Ambil editor kode Anda, dan mulailah membangun jagoan web multifungsi Anda sendiri!

HTML CSS JavaScript Web Development