Membangun Kalkulator dan Page Builder Web: Dari Nol Hingga Interaktif
PintarApp•Agustus 19, 2026
Pernah nggak sih lagi asyik ngoding, eh tiba-tiba muncul error yang bikin kepala pusing tujuh keliling? Kemarin itu saya ngalamin pas lagi coba bikin fungsi kalkulator sederhana. Nggak ada angin nggak ada hujan, angka yang tampil di layar malah ngaco banget! Ternyata oh ternyata, salahnya cuma kepeleset pas ngetik nama variabel. Bener-bener kayak lagi masang baut di mobil, salah ukuran dikit, performanya langsung nggak maksimal. Nah, pengalaman kayak gitu yang bikin saya sadar, pentingnya membangun fondasi yang kokoh, sekecil apapun proyeknya. Kali ini, kita bakal coba bikin dua aplikasi web yang cukup menarik: kalkulator interaktif dan page builder sederhana, semuanya pakai HTML, CSS, dan JavaScript.
Mengapa Kombinasi HTML, CSS, dan JavaScript?
Bagi para pemula, HTML, CSS, dan JavaScript adalah trio sakti yang wajib dikuasai untuk membangun aplikasi web. Ibaratnya, kalau Anda mau bikin rumah, HTML itu adalah kerangka dasarnya (tembok, atap, pintu), CSS adalah cat dan ornamennya biar kelihatan cantik dan menarik, sementara JavaScript adalah sistem kelistrikan dan plumbing-nya yang bikin semua fungsi berjalan. Dengan ketiga teknologi ini, kita bisa menciptakan aplikasi web yang fungsional dan responsif tanpa perlu kerumitan framework yang mungkin terasa berlebihan untuk proyek awal.
Membangun Aplikasi Kalkulator: Fondasi Aritmetika Digital
Membuat kalkulator mungkin terdengar klise, tapi ini adalah latihan yang sangat baik untuk memahami bagaimana JavaScript berinteraksi dengan elemen HTML dan bagaimana menangani input pengguna.
Struktur HTML (index.html)
Kita akan mulai dengan membuat struktur dasar HTML untuk kalkulator. Ini seperti menyiapkan semua bahan sebelum mulai memasak.
Kalkulator Interaktif
Ini adalah "otak" dari kalkulator kita.
javascript
let display = document.querySelector('.calculator-display');
let currentInput = '';
let operator = null;
let previousInput = '';
function appendNumber(number) {
currentInput += number;
display.value = currentInput;
}
function chooseOperation(op) {
if (currentInput === '') return;
if (previousInput !== '') {
calculateResult();
}
operator = op;
previousInput = currentInput;
currentInput = '';
}
function calculateResult() {
if (operator === null || previousInput === '' || currentInput === '') return;
let result;
const prev = parseFloat(previousInput);
const curr = parseFloat(currentInput);
switch (operator) {
case '+':
result = prev + curr;
break;
case '-':
result = prev - curr;
break;
case '*':
result = prev * curr;
break;
case '/':
result = prev / curr;
break;
default:
return;
}
display.value = result;
currentInput = result.toString();
previousInput = '';
operator = null;
}
function clearDisplay() {
currentInput = '';
operator = null;
previousInput = '';
display.value = '';
}
Membangun Page Builder Sederhana: Kendali Penuh atas Tampilan
Page builder memungkinkan pengguna untuk membuat halaman web secara visual tanpa perlu menulis kode. Untuk versi sederhana ini, kita akan fokus pada penambahan elemen dasar seperti teks dan gambar, serta kemampuan memindahkannya.
Struktur HTML Dasar (index.html)
Kita akan membuat area kerja di mana pengguna bisa menarik dan menempatkan elemen.
Page Builder Sederhana
Tambah Elemen:
Tampilan Builder (builder-style.css)
CSS untuk mengatur tata letak kontroller dan area kerja.
css
.controls {
background-color: #e0e0e0;
padding: 15px;
margin-bottom: 20px;
text-align: center;
border-radius: 5px;
}
.controls button, .controls h3 {
margin: 5px;
}
.canvas {
width: 80%;
min-height: 400px;
border: 2px dashed #ccc;
margin: 0 auto;
position: relative; /* Penting untuk positioning elemen di dalamnya */
background-color: #fff;
padding: 20px;
}
.draggable {
cursor: move;
position: absolute; /* Agar bisa dipindahkan */
user-select: none; /* Mencegah seleksi teks saat drag */
border: 1px solid transparent; /* Border transparan agar tidak mengganggu tampilan awal */
padding: 5px;
}
.draggable:hover {
border: 1px solid #007bff;
}
.draggable img {
max-width: 100%;
height: auto;
display: block; /* Menghilangkan spasi bawah pada gambar */
}
Logika Builder (builder-script.js)
Ini dia bagian yang paling seru, membuat elemen bisa ditambahkan dan dipindahkan. Ini seperti menyusun lego, kita bisa menaruh balok di mana saja dan menggabungkannya.
javascript
const canvas = document.getElementById('canvas');
const addTextBtn = document.getElementById('add-text');
const addImageBtn = document.getElementById('add-image');
const imageUpload = document.getElementById('image-upload');
let currentElement = null;
let offsetX, offsetY;
// Menambahkan Elemen Teks
addTextBtn.addEventListener('click', () => {
const textElement = document.createElement('div');
textElement.classList.add('draggable');
textElement.contentEditable = true; // Agar bisa diedit
textElement.textContent = 'Teks Baru';
textElement.style.left = '50px'; // Posisi awal
textElement.style.top = '50px';
canvas.appendChild(textElement);
makeDraggable(textElement);
});
// Menambahkan Elemen Gambar
addImageBtn.addEventListener('click', () => {
imageUpload.click(); // Membuka dialog upload file
});
imageUpload.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (event) => {
const imgElement = document.createElement('div');
imgElement.classList.add('draggable');
const img = document.createElement('img');
img.src = event.target.result;
imgElement.appendChild(img);
imgElement.style.left = '50px';
imgElement.style.top = '50px';
canvas.appendChild(imgElement);
makeDraggable(imgElement);
}
reader.readAsDataURL(file);
}
});
// Fungsi untuk membuat elemen bisa digeser
function makeDraggable(element) {
element.addEventListener('mousedown', (e) => {
currentElement = element;
offsetX = e.clientX - element.getBoundingClientRect().left;
offsetY = e.clientY - element.getBoundingClientRect().top;
element.style.cursor = 'grabbing';
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
});
}
function onMouseMove(e) {
if (!currentElement) return;
const canvasRect = canvas.getBoundingClientRect();
let newX = e.clientX - canvasRect.left - offsetX;
let newY = e.clientY - canvasRect.top - offsetY;
// Batasi agar elemen tidak keluar dari canvas
newX = Math.max(0, Math.min(newX, canvasRect.width - currentElement.offsetWidth));
newY = Math.max(0, Math.min(newY, canvasRect.height - currentElement.offsetHeight));
currentElement.style.left = newX + 'px';
currentElement.style.top = newY + 'px';
}
function onMouseUp() {
if (currentElement) {
currentElement.style.cursor = 'move';
}
currentElement = null;
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
}
Penutup: Perjalanan Belajar yang Berkelanjutan
Membangun kalkulator dan page builder sederhana ini hanyalah permulaan. Ada banyak sekali fitur lain yang bisa ditambahkan, seperti operasi matematika yang lebih kompleks, penyimpanan layout, atau bahkan kemampuan styling elemen. Namun, dengan fondasi HTML, CSS, dan JavaScript yang sudah kita bangun, Anda kini memiliki bekal yang cukup untuk terus mengeksplorasi dunia pengembangan web. Ingat, dalam ngoding, seperti dalam kehidupan, konsistensi dan kemauan untuk terus belajar adalah kunci utama untuk mencapai hasil yang memuaskan. Selamat mencoba!
