Membangun Dunia Digitalmu Sendiri: Kalkulator Cerdas dan Page Builder Dinamis dengan HTML, CSS, dan JavaScript

PintarApp • Juni 29, 2026
Membangun Dunia Digitalmu Sendiri: Kalkulator Cerdas dan Page Builder Dinamis dengan HTML, CSS, dan JavaScript

Pernahkah kamu merasa frustrasi saat mencoba mencari tahu kenapa hasil perkalian 2 * 2 malah jadi 22? Nah, itu dia pengalaman konyolku di awal-awal belajar JavaScript! Ternyata, aku lupa melakukan konversi tipe data dari string ke angka. Momen-momen seperti itu yang bikin kita kadang garuk-garuk kepala, tapi justru di sanalah proses belajar yang paling berharga terjadi. Dari kesalahan sepele itu, aku belajar bahwa setiap detail kecil dalam kode itu penting, seperti baut kecil di mesin mobil yang menentukan apakah mobil itu bisa jalan mulus atau malah mogok di tengah jalan.

Hari ini, kita akan menyelami lautan kreativitas front-end development dan membangun dua aplikasi web yang cukup menarik: sebuah kalkulator fungsional dan sebuah page builder sederhana. Keduanya adalah proyek yang sangat baik untuk mengasah kemampuanmu dengan fondasi utama web: HTML, CSS, dan JavaScript. Siap untuk menjadi arsitek di dunia digital?

Mengapa Membangun Kalkulator dan Page Builder?

Mungkin kamu berpikir, "Kalkulator kan sudah banyak, page builder juga sudah ada yang canggih." Benar sekali! Tapi, tujuan kita di sini bukan untuk menciptakan sesuatu yang revolusioner dari nol, melainkan untuk memahami cara kerjanya dari dalam. Anggap saja kita sedang membongkar mesin jam tangan mewah. Kita bukan mau bikin jam baru, tapi mau tahu gimana roda-roda kecil itu saling terhubung dan menghasilkan waktu yang presisi.

  • Kalkulator: Ini adalah proyek klasik yang sempurna untuk memahami interaksi DOM (Document Object Model) dan logika dasar JavaScript. Kamu akan belajar bagaimana menangani event klik tombol, memperbarui tampilan, dan memproses operasi matematika.
  • Page Builder: Ini adalah level selanjutnya yang akan membawamu ke dunia manipulasi DOM yang lebih kompleks, drag-and-drop, dan persistensi data. Bayangkan ini seperti kamu sedang menata ulang perabot di rumah. Kamu bisa memindahkan sofa, meja, dan kursi sesuka hati, dan semua itu berkat kekuatan JavaScript.

Kalkulator Sederhana: Mesin Hitung Pribadimu

Mari kita mulai dengan yang lebih simpel: kalkulator. Seperti membangun sebuah mainan mobil remote control. HTML adalah rangka atau bodi mobilnya, CSS adalah cat, stiker, dan desain interiornya, sedangkan JavaScript adalah sirkuit elektronik dan motor penggeraknya yang membuat mobil itu bisa bergerak sesuai perintahmu.

1. Rangka HTML: Struktur Kalkulator (Bodi Mobil)

Kita butuh elemen untuk menampilkan hasil dan tombol-tombol angka serta operator. Berikut contoh kerangka HTML-nya:


<div class="calculator">
<input type="text" class="display" value="0" disabled>
<div class="buttons">
<button class="clear">C</button>
<button class="operator">/</button>
<button class="operator">*</button>
<button class="backspace">&larr;</button>
<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="equals">=</button>
<button class="zero">0</button>
<button>.</button>
</div>
</div>

2. Gaya CSS: Mempercantik Kalkulator (Cat dan Interior)

Dengan CSS, kita bisa mengatur tata letak tombol (misalnya dengan Grid), memberikan warna, ukuran, dan efek hover. Ini penting agar kalkulator kita tidak hanya fungsional tapi juga enak dipandang dan mudah digunakan. Kamu bisa membuat tombol-tombolnya terlihat seperti tombol fisik yang bisa dipencet, atau memberikan sentuhan modern dengan desain flat. Kreativitasmu adalah batasnya!

3. Logika JavaScript: Otak di Balik Angka (Sirkuit dan Motor)

Di sinilah keajaiban terjadi. Kita akan menggunakan JavaScript untuk:

  • Mendengarkan Event: Setiap kali tombol diklik, JavaScript akan menangkapnya. Ini seperti sensor di mobil remote-mu yang tahu kapan kamu menekan tombol maju.
  • Memperbarui Tampilan: Menampilkan angka atau operator yang ditekan di layar kalkulator.
  • Memproses Operasi: Menyimpan angka pertama, operator, angka kedua, lalu menghitung hasilnya ketika tombol '=' ditekan. Ingat pengalaman "2 * 2 = 22" tadi? Di sinilah kita pastikan data yang masuk adalah angka beneran, bukan sekadar teks. Gunakan parseFloat() atau parseInt() untuk mengonversi nilai string menjadi angka.

// Contoh dasar JavaScript untuk kalkulator
const display = document.querySelector('.display');
const buttons = document.querySelector('.buttons');
let currentInput = '0';
let operator = null;
let previousInput = null;
buttons.addEventListener('click', (event) => {
const target = event.target;
if (!target.matches('button')) return; // Pastikan yang diklik adalah tombol
if (target.classList.contains('number')) {
if (currentInput === '0') {
currentInput = target.textContent;
} else {
currentInput += target.textContent;
}
} else if (target.classList.contains('operator')) {
if (operator && previousInput) { // Jika ada operasi sebelumnya yang belum dihitung
// Lakukan perhitungan di sini
}
previousInput = parseFloat(currentInput);
operator = target.textContent;
currentInput = '0'; // Reset currentInput untuk angka berikutnya
} else if (target.classList.contains('equals')) {
// Lakukan perhitungan final
const result = eval(`${previousInput} ${operator} ${parseFloat(currentInput)}`); // Hati-hati dengan eval() di proyek produksi
currentInput = result.toString();
operator = null;
previousInput = null;
} else if (target.classList.contains('clear')) {
currentInput = '0';
operator = null;
previousInput = null;
}
display.value = currentInput;
});

Page Builder Sederhana: Merakit Blok Digitalmu Sendiri

Sekarang, mari kita tingkatkan tantangannya! Membangun page builder itu seperti menjadi kontraktor bangunan yang punya gudang material dan sebidang tanah kosong. HTML adalah pondasi dan struktur dasar tanah serta gudang materialnya, CSS adalah katalog desain untuk setiap material (batu bata, jendela, pintu), dan JavaScript adalah alat beratmu (crane, bulldozer) yang memungkinkan kamu memindahkan, menumpuk, dan menyusun material-material itu menjadi sebuah bangunan yang utuh dan berfungsi.

Salah satu momen paling menantang bagiku saat pertama kali mencoba membangun page builder adalah saat mengatasi masalah z-index dan penanganan event ketika ada banyak elemen yang saling tumpang tindih. Elemen yang harusnya bisa diseret malah tertutup oleh elemen lain, atau event kliknya salah tertangkap. Rasanya seperti mencoba memperbaiki mobil balap F1 dengan obeng biasa – butuh alat yang tepat dan pemahaman yang mendalam tentang bagaimana setiap bagian bekerja.

1. HTML: Kanvas dan Palet Elemen (Pondasi dan Gudang Material)

Kita akan memerlukan dua area utama: sebuah "toolbox" yang berisi elemen-elemen yang bisa diseret (misalnya teks, gambar, tombol) dan sebuah "canvas" tempat elemen-elemen itu diletakkan.


<div class="page-builder-container">
<div class="toolbox">
<div class="draggable-item" draggable="true" data-type="text">Teks</div>
<div class="draggable-item" draggable="true" data-type="image">Gambar</div>
<div class="draggable-item" draggable="true" data-type="button">Tombol</div>
</div>
<div class="canvas" id="drop-area">
<p>Seret elemen ke sini</p>
</div>
</div>

2. CSS: Visualisasi Interaksi (Katalog Desain)

CSS akan sangat membantu dalam memberikan umpan balik visual saat pengguna berinteraksi. Misalnya, mengubah tampilan elemen saat diseret (:hover atau class saat dragover), atau memberikan gaya pada elemen yang sedang dipilih/diedit.

3. JavaScript: Otak di Balik Kreativitas (Alat Beratmu)

Ini adalah bagian paling inti dan paling seru. JavaScript akan menangani semua interaksi:

  • Drag and Drop API: Menggunakan dragstart, dragover, dragleave, dan drop untuk memungkinkan pengguna menyeret elemen dari toolbox ke canvas. Ini seperti operator crane yang mengatur setiap gerakan material bangunan.
  • Manipulasi DOM: Ketika sebuah elemen dijatuhkan, JavaScript akan membuat salinan elemen tersebut dan menambahkannya ke canvas. Kita juga perlu menambahkan fungsionalitas untuk mengedit teks, mengubah atribut gambar, atau mengaitkan URL ke tombol.
  • Penyimpanan Data: Untuk membuat page builder-mu berguna, kamu perlu cara untuk menyimpan tata letak yang sudah dibuat. localStorage adalah pilihan yang bagus untuk permulaan. Ini seperti menyimpan denah bangunan yang sudah kamu buat, agar bisa dibuka lagi nanti.

// Contoh dasar JavaScript untuk Page Builder (Drag & Drop)
const draggableItems = document.querySelectorAll('.draggable-item');
const dropArea = document.getElementById('drop-area');
let draggedItem = null;
draggableItems.forEach(item => {
item.addEventListener('dragstart', (e) => {
draggedItem = e.target;
e.dataTransfer.setData('text/plain', e.target.dataset.type); // Kirim tipe elemen
console.log('Dragging:', e.target.dataset.type);
});
});
dropArea.addEventListener('dragover', (e) => {
e.preventDefault(); // Mencegah perilaku default browser (membuka link saat drag)
dropArea.style.backgroundColor = '#f0f0f0'; // Umpan balik visual
});
dropArea.addEventListener('dragleave', () => {
dropArea.style.backgroundColor = 'transparent';
});
dropArea.addEventListener('drop', (e) => {
e.preventDefault();
dropArea.style.backgroundColor = 'transparent';
if (draggedItem) {
const itemType = e.dataTransfer.getData('text/plain');
let newElement;
switch (itemType) {
case 'text':
newElement = document.createElement('p');
newElement.textContent = 'Ini teks baru. Klik untuk edit.';
break;
case 'image':
newElement = document.createElement('img');
newElement.src = 'https://via.placeholder.com/150'; // Placeholder
newElement.alt = 'Gambar Placeholder';
break;
case 'button':
newElement = document.createElement('button');
newElement.textContent = 'Tombol Baru';
break;
default:
return;
}
newElement.classList.add('dropped-item');
newElement.setAttribute('contenteditable', 'true'); // Membuat elemen bisa diedit langsung
dropArea.appendChild(newElement);
draggedItem = null; // Reset
}
});
// Tambahkan fungsionalitas edit dan simpan state ke localStorage

Kata Penutup: Teruslah Bereksplorasi!

Membangun kalkulator dan page builder adalah perjalanan yang luar biasa untuk memahami kekuatan HTML, CSS, dan JavaScript. Dari sekadar menampilkan teks hingga menciptakan interaksi yang kompleks, kamu telah melihat bagaimana tiga serangkai ini bekerja sama membentuk pengalaman web yang dinamis. Ingat, setiap baris kode yang kamu tulis adalah fondasi untuk ide-ide yang lebih besar dan lebih ambisius di masa depan.

Jadi, jangan pernah berhenti bereksperimen. Setelah ini, kamu bisa mencoba menambahkan fitur memori ke kalkulatormu, atau membuat elemen page builder bisa diubah ukurannya, diputar, atau disimpan ke database. Dunia web itu luas, dan kamu punya alat untuk menjelajahinya. Selamat coding!

HTML CSS JavaScript Web Development