Membangun Dunia Digital Anda: Kalkulator & Page Builder Sederhana dengan HTML, CSS, dan JavaScript

PintarApp • Juli 02, 2026
Membangun Dunia Digital Anda: Kalkulator & Page Builder Sederhana dengan HTML, CSS, dan JavaScript
Pernah gak sih kalian lagi ngoding, udah semangat banget ngerjain fitur A, eh tiba-tiba ada bug nyelip di fitur B yang tadinya jalan lancar jaya? Rasanya tuh kayak lagi mau masak nasi goreng seenak-enaknya, eh pas mau masukin telur, eh telurnya malah pecah di luar wajan. Bete banget kan? Nah, pengalaman itu sering banget dialami sama programmer, termasuk saya. Tapi justru dari situlah kita belajar, kan? Kali ini, kita bakal bikin sesuatu yang lebih stabil dan bikin seneng, yaitu aplikasi web kalkulator dan juga sedikit sentuhan page builder sederhana pakai senjata andalan kita: HTML, CSS, dan JavaScript. Gak perlu server yang canggih, ini semua berjalan di browser kalian! Mari kita mulai petualangan ngoding kita. Tujuannya simpel: membuat dua alat bantu yang sangat berguna bagi siapapun yang bergelut di dunia web. Kalkulator adalah alat dasar, tapi sangat penting untuk perhitungan cepat. Page builder, meskipun sederhana di sini, akan memberikan gambaran bagaimana kita bisa membuat antarmuka yang dinamis dan bisa diatur oleh pengguna.

Dasar-Dasar yang Perlu Dibangun

Sebelum kita mulai "memasak" kode, mari kita siapkan "bahan-bahan" nya dulu.

Struktur dengan HTML

HTML ibarat kerangka bangunan. Di sinilah kita menentukan elemen-elemen apa saja yang akan ada di halaman web kita. Untuk kalkulator, kita butuh tombol-tombol angka, tombol operasi (+, -, *, /), tombol sama dengan (=), dan area untuk menampilkan hasil. Untuk page builder, kita akan menyiapkan area "canvas" tempat pengguna bisa menarik dan menaruh elemen, serta panel kontrol untuk memilih elemen. Ini contoh kasar struktur HTML kita: 

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulator & Page Builder Seru</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Selamat Datang di Creator Toolkit Anda!</h1>
<section id="calculator-section">
<h2>Kalkulator Sederhana</h2>
<div class="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<button onclick="appendNumber('7')">7</button>
<button onclick="appendNumber('8')">8</button>
<button onclick="appendNumber('9')">9</button>
<button onclick="setOperator('/')">/</button>
<button onclick="appendNumber('4')">4</button>
<button onclick="appendNumber('5')">5</button>
<button onclick="appendNumber('6')">6</button>
<button onclick="setOperator('*')">*</button>
<button onclick="appendNumber('1')">1</button>
<button onclick="appendNumber('2')">2</button>
<button onclick="appendNumber('3')">3</button>
<button onclick="setOperator('-')">-</button>
<button onclick="appendNumber('0')">0</button>
<button onclick="calculate()">=</button>
<button onclick="clearDisplay()">C</button>
<button onclick="setOperator('+')">+</button>
</div>
</div>
</section>
<hr>
<section id="page-builder-section">
<h2>Page Builder Mini</h2>
<div class="controls">
<h3>Tambahkan Elemen:</h3>
<button onclick="addElement('
Judul H1
')">Judul H1</button>
<button onclick="addElement('<p>Paragraf Teks</p>')">Paragraf</button>
<button onclick="addElement('<img src=\'https://via.placeholder.com/150\' alt=\'Placeholder\'>')">Gambar Placeholder</button>
</div>
<div id="canvas" class="canvas" contenteditable="true">
<!-- Elemen akan ditambahkan di sini -->
</div>
</section>
<script src="script.js"></script>
</body>
</html>

Tampilan yang Menarik dengan CSS

CSS adalah "dapur" kita. Di sinilah kita menata tampilan agar enak dilihat. Kita bisa mengatur warna, ukuran font, tata letak, dan segala sesuatu yang berhubungan dengan estetika. Tanpa CSS, website kita akan terlihat seperti daftar belanjaan mentah tanpa keranjang. Ini sedikit contoh CSS yang bisa kita gunakan: 

body {
font-family: sans-serif;
margin: 20px;
background-color: #f4f4f4;
}
h1, h2, h3 {
color: #333;
}
.calculator {
width: 300px;
margin: 20px auto;
border: 1px solid #ccc;
padding: 10px;
background-color: #e0e0e0;
border-radius: 5px;
}
#display {
width: 95%;
padding: 10px;
margin-bottom: 10px;
font-size: 24px;
text-align: right;
border: 1px solid #bbb;
border-radius: 3px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
.buttons button {
padding: 15px;
font-size: 18px;
cursor: pointer;
border: 1px solid #aaa;
border-radius: 3px;
background-color: #f9f9f9;
}
.buttons button:hover {
background-color: #ddd;
}
.controls {
margin-bottom: 20px;
padding: 15px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
}
.controls button {
padding: 8px 12px;
margin-right: 5px;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 3px;
background-color: #e9e9e9;
}
.canvas {
width: 90%;
min-height: 300px;
margin: 20px auto;
padding: 20px;
border: 2px dashed #aaa;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

Menghidupkan Segala Sesuatu dengan JavaScript

JavaScript adalah "mesin" dari aplikasi kita. Di sinilah logika bekerja, interaksi terjadi, dan semuanya menjadi hidup. Ini seperti mekanik yang merakit mesin mobil. Tanpa mereka, mobilnya hanya akan menjadi tumpukan besi.

Fungsi Kalkulator

Kita akan membuat beberapa fungsi JavaScript:
  • appendNumber(number): Menambahkan angka ke layar.
  • setOperator(operator): Menyimpan operator yang dipilih.
  • calculate(): Melakukan perhitungan ketika tombol '=' ditekan.
  • clearDisplay(): Mengosongkan layar.
Dan ini kodenya: 

let firstOperand = '';
let operator = '';
let secondOperand = '';
let waitingForSecondOperand = false;
const display = document.getElementById('display');
function appendNumber(number) {
if (waitingForSecondOperand) {
display.value = number;
waitingForSecondOperand = false;
} else {
display.value = display.value === '0' ? number : display.value + number;
}
}
function setOperator(op) {
if (firstOperand === '') {
firstOperand = display.value;
} else if (operator) {
// Jika operator sudah ada, lakukan perhitungan dulu sebelum mengganti operator
calculate();
}
operator = op;
waitingForSecondOperand = true;
}
function calculate() {
if (operator === '') return;
secondOperand = display.value;
let result = 0;
switch (operator) {
case '+':
result = parseFloat(firstOperand) + parseFloat(secondOperand);
break;
case '-':
result = parseFloat(firstOperand) - parseFloat(secondOperand);
break;
case '*':
result = parseFloat(firstOperand) * parseFloat(secondOperand);
break;
case '/':
result = parseFloat(firstOperand) / parseFloat(secondOperand);
break;
}
display.value = result;
firstOperand = result; // Hasil menjadi operand pertama untuk perhitungan selanjutnya
operator = '';
waitingForSecondOperand = false;
}
function clearDisplay() {
display.value = '0';
firstOperand = '';
operator = '';
secondOperand = '';
waitingForSecondOperand = false;
}

Fungsi Page Builder

Untuk page builder, kita akan membuat fungsi yang lebih simpel:
  • addElement(htmlContent): Menambahkan konten HTML ke dalam area canvas.
Dan kodenya: 

const canvas = document.getElementById('canvas');
function addElement(htmlContent) {
canvas.innerHTML += htmlContent;
}

Menggabungkan Semuanya dan Eksplorasi Lebih Lanjut

Sekarang kita punya semua "bahan" dan "resep". Kita tinggal menggabungkannya menjadi satu file HTML, satu file CSS, dan satu file JavaScript. Dengan file-file ini, Anda sudah bisa menjalankan kalkulator dan page builder sederhana di browser Anda. Ini adalah titik awal. Dari sini, Anda bisa berinovasi:
  • Kalkulator: Tambahkan fitur seperti tombol desimal (.), tombol persen (%), memori, atau bahkan fungsi ilmiah.
  • Page Builder: Buat lebih banyak jenis elemen yang bisa ditambahkan (misalnya, link, tabel, input form). Tambahkan fungsi drag-and-drop agar pengguna bisa mengatur posisi elemen. Berikan opsi styling sederhana seperti mengganti warna latar belakang atau font. Anda bahkan bisa membuat fitur save/load untuk konten yang sudah dibuat.
Membuat aplikasi web seperti ini menggunakan HTML, CSS, dan JavaScript adalah cara yang fantastis untuk belajar fundamental pengembangan web. Ini seperti belajar dasar-dasar menggambar sebelum membuat lukisan masterpiece. Kuncinya adalah konsisten berlatih, jangan takut mencoba hal baru, dan yang terpenting, jangan menyerah saat menghadapi "bug" – anggap saja itu sebagai tantangan untuk menjadi programmer yang lebih baik! Selamat berkreasi!
HTML CSS JavaScript Web Development