Membangun Kalkulator Interaktif dan Page Builder Ringan: Awal Mula Petualangan Kodemu

PintarApp • September 02, 2026
Membangun Kalkulator Interaktif dan Page Builder Ringan: Awal Mula Petualangan Kodemu
Pernah nggak sih kalian pas lagi ngoding, tiba-tiba semua variabel jadi aneh, fungsi nggak jalan, padahal udah yakin banget bener? Nah, itu yang sering banget kejadian sama aku di awal-awal. Dulu, pas pertama kali bikin fitur kalkulator sederhana, aku lupa ngasih titik koma di akhir baris, eh alhasil script JS-nya error melulu. Rasanya kayak lagi masak, bumbu udah pas, cara udah bener, tapi lupa masukin garam. Hasilnya? Hambar! Butuh waktu lumayan buat nyari kesalahannya. Pengalaman kayak gitu justru jadi guru terbaik buat kita, kan? Hari ini, kita bakal coba merangkai dua hal menarik: aplikasi web kalkulator yang bisa ngitungin angka dengan cepat, dan sedikit sentuhan page builder yang memungkinkan kita merangkai elemen-elemen dasar di halaman web. Semuanya bakal kita bangun pakai teknologi dasar web: HTML, CSS, dan JavaScript. Jangan khawatir, ini bakal santai, mengedukasi, dan pastinya original.

Mengapa Membangun Kalkulator dan Page Builder Sederhana?

Mungkin ada yang bertanya, buat apa repot-repot bikin kalkulator lagi kalau di komputer udah ada? Atau page builder? Kan udah banyak yang canggih. Nah, jawabannya simpel: ini adalah cara yang luar biasa efektif untuk memahami cara kerja teknologi dasar web secara mendalam. Ibaratnya, kalau mau jadi mekanik handal, kita harus mulai dari bongkar pasang mesin motor sendiri, bukan langsung servis mobil mewah. Kalkulator mengajarkan kita tentang:
  • Manipulasi angka dan string di JavaScript.
  • Penanganan event user (klik tombol).
  • Memperbarui tampilan antarmuka (DOM manipulation).
Sedangkan, ide page builder sederhana mengajarkan kita tentang:
  • Struktur HTML yang dinamis.
  • CSS untuk styling dan layout.
  • JavaScript untuk interaksi antar elemen.
Kombinasi keduanya ini bakal jadi pondasi yang kuat buat proyek-proyek web yang lebih kompleks nanti.

Fondasi: HTML Struktur Dasar

Pertama, kita bikin kerangka bangunannya pakai HTML. Untuk kalkulator, kita butuh area tampilan (layar kalkulator) dan tombol-tombolnya. Untuk page builder, kita butuh area di mana elemen-elemen akan ditempatkan dan tombol untuk menambahkan elemen. Contoh struktur HTML dasar untuk kalkulator: 
<!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 Sederhana</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Kalkulator & Page Builder</h1>
<!-- Bagian Kalkulator -->
<div class="calculator">
<div class="display" id="calculator-display">0</div>
<div class="buttons">
<button class="btn" data-value="7">7</button>
<button class="btn" data-value="8">8</button>
<button class="btn" data-value="9">9</button>
<button class="btn operator" data-value="/">/</button>
<button class="btn" data-value="4">4</button>
<button class="btn" data-value="5">5</button>
<button class="btn" data-value="6">6</button>
<button class="btn operator" data-value="*">*</button>
<button class="btn" data-value="1">1</button>
<button class="btn" data-value="2">2</button>
<button class="btn" data-value="3">3</button>
<button class="btn operator" data-value="-">-</button>
<button class="btn" data-value="0">0</button>
<button class="btn" data-value=".">.</button>
<button class="btn equals" data-value="=">=</button>
<button class="btn operator" data-value="+">+</button>
<button class="btn clear" data-value="clear">C</button>
</div>
</div>
<hr>
<!-- Bagian Page Builder -->
<h2>Page Builder Sederhana</h2>
<div class="builder-controls">
<button id="add-heading-btn">Tambah Judul</button>
<button id="add-paragraph-btn">Tambah Paragraf</button>
<button id="add-image-btn">Tambah Gambar</button>
</div>
<div id="page-content" class="page-area">
<p>Area konten Anda akan muncul di sini.</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Sentuhan Visual: CSS untuk Tampilan Menarik

HTML hanyalah kerangka. Untuk membuatnya terlihat apik, kita butuh CSS. Ibaratnya, kalau HTML itu tulang, CSS itu kulit, rambut, dan pakaiannya. Kita ingin kalkulator terlihat rapi, tombol-tombolnya nyaman diklik, dan area page builder punya ruang yang cukup. Beberapa contoh styling CSS (dalam file `style.css`): 
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: flex-start; /* Ubah ke flex-start agar tidak selalu di tengah vertikal */
min-height: 100vh;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
.container {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 700px; /* Batasi lebar maksimum */
text-align: center;
}
h1, h2 {
color: #333;
margin-bottom: 20px;
}
hr {
border: 0;
height: 1px;
background: #ddd;
margin: 30px 0;
}
/* Style Kalkulator */
.calculator {
margin-top: 20px;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
width: 300px; /* Lebar kalkulator */
margin-left: auto;
margin-right: auto; /* Pusatkan kalkulator */
box-shadow: 0 0 5px rgba(0,0,0,0.05);
}
.display {
background-color: #222;
color: #fff;
font-size: 2em;
padding: 20px;
text-align: right;
min-height: 50px; /* Tinggi minimal display */
box-sizing: border-box;
overflow-x: auto; /* Untuk handle jika teks terlalu panjang */
display: flex;
align-items: center;
justify-content: flex-end;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px; /* Jarak antar tombol kecil */
background-color: #ccc; /* Background untuk gap */
}
.btn {
background-color: #f9f9f9;
border: none;
padding: 20px;
font-size: 1.2em;
cursor: pointer;
transition: background-color 0.2s ease;
}
.btn:hover {
background-color: #e0e0e0;
}
.btn.operator {
background-color: #f0ad4e;
color: white;
}
.btn.operator:hover {
background-color: #ec971f;
}
.btn.equals {
background-color: #5cb85c;
color: white;
grid-column: span 1; /* Tombol = ambil 1 kolom */
}
.btn.equals:hover {
background-color: #4cae4c;
}
.btn.clear {
background-color: #d9534f;
color: white;
grid-column: span 4; /* Tombol C ambil semua kolom */
}
.btn.clear:hover {
background-color: #c9302c;
}
/* Style Page Builder */
.builder-controls {
margin-bottom: 20px;
}
.builder-controls button {
margin: 5px;
padding: 10px 15px;
background-color: #0275d8;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.builder-controls button:hover {
background-color: #025aa5;
}
.page-area {
border: 1px dashed #ccc;
padding: 20px;
min-height: 200px;
text-align: left;
border-radius: 5px;
margin-top: 20px;
box-shadow: inset 0 0 5px rgba(0,0,0,0.05); /* Shadow dalam untuk area page */
}
.page-area h3, .page-area p, .page-area img {
margin-bottom: 15px;
}
.page-area img {
max-width: 100%;
height: auto;
display: block; /* Agar margin bottom berfungsi dengan baik */
margin-top: 10px;
}
/* Responsive adjustments */
@media (max-width: 600px) {
.container {
padding: 20px;
}
.calculator {
width: 100%; /* Kalkulator full width di layar kecil */
}
.btn.clear {
grid-column: span 2; /* Tombol C jadi 2 kolom di layar kecil */
}
.builder-controls button {
display: block; /* Tombol builder jadi blok */
width: calc(100% - 10px); /* Full width dengan sedikit margin */
margin-bottom: 10px;
}
}

Aksi di Balik Layar: JavaScript untuk Interaktivitas

Ini bagian paling seru! JavaScript adalah "otak" dari aplikasi kita. Dia yang akan mengurus logika kalkulator dan cara elemen-elemen di page builder ditambahkan dan dikelola. Mari kita buat file `script.js` yang berisi logika kita: 
document.addEventListener('DOMContentLoaded', () => {
// --- Logika Kalkulator ---
const display = document.getElementById('calculator-display');
const buttons = document.querySelectorAll('.calculator .btn');
let currentInput = '';
let operator = null;
let previousInput = '';
let waitingForSecondOperand = false;
buttons.forEach(button => {
button.addEventListener('click', () => {
const value = button.getAttribute('data-value');
if (button.classList.contains('clear')) {
currentInput = '';
operator = null;
previousInput = '';
waitingForSecondOperand = false;
display.textContent = '0';
return;
}
if (button.classList.contains('operator')) {
if (currentInput === '') return; // Jangan lakukan apa-apa jika tidak ada input
if (previousInput !== '') {
// Jika sudah ada operasi sebelumnya, lakukan perhitungan dulu
const result = calculate();
display.textContent = result;
previousInput = result;
} else {
previousInput = currentInput;
}
operator = value;
waitingForSecondOperand = true;
currentInput = ''; // Reset input setelah operator dipilih
return;
}
if (button.classList.contains('equals')) {
if (operator === null || previousInput === '' || currentInput === '') {
return; // Tidak bisa menghitung jika tidak ada operator, operand pertama, atau operand kedua
}
const result = calculate();
display.textContent = result;
previousInput = result; // Hasil jadi operand pertama untuk perhitungan selanjutnya
operator = null; // Reset operator setelah hasil dihitung
currentInput = ''; // Reset currentInput
waitingForSecondOperand = false; // Reset status menunggu
return;
}
// Menangani input angka dan desimal
if (waitingForSecondOperand) {
currentInput = value;
waitingForSecondOperand = false;
} else {
currentInput += value;
}
display.textContent = currentInput;
});
});
function calculate() {
const prev = parseFloat(previousInput);
const current = parseFloat(currentInput);
if (isNaN(prev) || isNaN(current)) return ''; // Handle non-numeric inputs
switch (operator) {
case '+':
return prev + current;
case '-':
return prev - current;
case '*':
return prev * current;
case '/':
if (current === 0) return 'Error'; // Pembagian dengan nol
return prev / current;
default:
return current; // Jika tidak ada operator, kembalikan input saat ini
}
}
// --- Logika Page Builder ---
const pageContent = document.getElementById('page-content');
const addHeadingBtn = document.getElementById('add-heading-btn');
const addParagraphBtn = document.getElementById('add-paragraph-btn');
const addImageBtn = document.getElementById('add-image-btn');
addHeadingBtn.addEventListener('click', () => {
const newHeading = document.createElement('h3');
newHeading.textContent = 'Judul Baru';
// Tambahkan event listener untuk mengedit jika diperlukan
newHeading.contentEditable = true;
newHeading.addEventListener('blur', () => {
if (newHeading.textContent.trim() === '') {
newHeading.remove(); // Hapus jika kosong
}
});
pageContent.appendChild(newHeading);
});
addParagraphBtn.addEventListener('click', () => {
const newParagraph = document.createElement('p');
newParagraph.textContent = 'Ini adalah paragraf baru yang bisa Anda edit.';
// Tambahkan event listener untuk mengedit jika diperlukan
newParagraph.contentEditable = true;
newParagraph.addEventListener('blur', () => {
if (newParagraph.textContent.trim() === '') {
newParagraph.remove(); // Hapus jika kosong
}
});
pageContent.appendChild(newParagraph);
});
addImageBtn.addEventListener('click', () => {
const imageUrl = prompt('Masukkan URL gambar:');
if (imageUrl) {
const newImage = document.createElement('img');
newImage.src = imageUrl;
newImage.alt = 'Gambar yang ditambahkan';
pageContent.appendChild(newImage);
}
});
});

Bagaimana Kode JavaScript Bekerja?

  • Kalkulator:
  • Kita mengumpulkan semua tombol kalkulator dan menambahkan 'event listener' pada setiap klik.
  • Ketika sebuah tombol diklik, kita mengambil nilai `data-value` dari tombol tersebut.
  • Logika memisahkan antara angka, operator, tombol sama dengan (`=`), dan tombol hapus (`C`).
  • Variabel `currentInput`, `operator`, dan `previousInput` digunakan untuk menyimpan keadaan kalkulator saat ini.
  • Fungsi `calculate()` melakukan operasi matematika berdasarkan operator yang dipilih.
  • Perlu diperhatikan penanganan kasus seperti pembagian dengan nol atau input yang tidak valid.
  • Page Builder:
  • Kita mengambil referensi ke area konten (`#page-content`) dan tombol-tombol kontrol.
  • Setiap tombol memiliki 'event listener' yang akan membuat elemen HTML baru (`h3`, `p`, `img`) saat diklik.
  • `document.createElement()` digunakan untuk membuat elemen baru.
  • `appendChild()` digunakan untuk menambahkan elemen baru ke dalam `page-area`.
  • Properti `contentEditable = true` pada elemen `h3` dan `p` memungkinkan pengguna untuk langsung mengedit teks di dalamnya, seperti pada halaman web sungguhan.
  • Kita juga menambahkan listener `blur` untuk menghapus elemen jika pengguna mengosongkan isinya setelah mengedit.

Kesimpulan dan Langkah Selanjutnya

Membuat kalkulator interaktif dan page builder sederhana ini adalah langkah awal yang fantastis untuk mengasah skill coding Anda. Anda telah belajar bagaimana HTML membentuk struktur, CSS mempercantik tampilan, dan JavaScript menghidupkan interaksi. Ini baru permulaan! Anda bisa mengembangkan proyek ini lebih jauh:
  • Tambahkan lebih banyak fungsi kalkulator (akar kuadrat, persentase, dll.).
  • Sempurnakan page builder dengan lebih banyak jenis elemen (video, link, input form).
  • Implementasikan fitur 'drag and drop' untuk mengatur posisi elemen di page builder.
  • Tambahkan penyimpanan data sederhana menggunakan Local Storage agar konten page builder tidak hilang saat browser ditutup.
  • Perbaiki validasi input dan penanganan error agar aplikasi lebih tangguh.
Ingat, koding itu seperti bermain LEGO. Mulai dari balok-balok kecil, lalu sambungkan dengan kreatifitas Anda. Selamat bereksperimen dan teruslah belajar!
HTML CSS JavaScript Web Development