Menguak Rahasia Front-End: Membangun Kalkulator dan Page Builder Sendiri dengan HTML, CSS, JS!

PintarApp • Juli 12, 2026
Menguak Rahasia Front-End: Membangun Kalkulator dan Page Builder Sendiri dengan HTML, CSS, JS!

Pernah nggak sih, pas lagi asyik-asyiknya ngoding JavaScript, tiba-tiba ada error undefined nongol padahal logikanya udah berasa bener banget di kepala? Rasanya kayak lagi nyari kunci motor yang padahal udah di tangan. Saya pernah tuh, waktu awal-awal belajar manipulasi DOM buat bikin elemen dinamis, sampai pusing tujuh keliling cuma gara-gara salah penulisan getElementById atau querySelector yang nggak ngambil elemen dengan benar. Tapi justru dari situ saya sadar, seberapa detail dan "cerewetnya" browser itu dalam memahami instruksi kita. Dan uniknya, dari pondasi yang terlihat sederhana itu, HTML, CSS, dan JavaScript, kita bisa membangun aplikasi yang kompleks dan fungsional.

Hari ini, mari kita buka bengkel digital kita. Kita akan merakit dua "mesin" menarik yang akan menguji sekaligus memperdalam pemahaman kita tentang trio sakti front-end: HTML, CSS, dan JavaScript. Kita akan bikin kalkulator sederhana yang responsif, dan yang lebih seru lagi, sebuah pondasi page builder minimalis yang bisa drag-and-drop elemen. Siap-siap, karena kita akan belajar sambil bermain dengan kreativitas!

Kenapa HTML, CSS, JS itu Fondasi Sakti?

Bayangkan Anda sedang membangun sebuah rumah. HTML itu ibaratnya adalah denah dan kerangka bangunannya: pondasi, dinding, atap, pintu, jendela. Semua elemen struktural yang memberi bentuk dan fungsi dasar pada rumah Anda. Tanpa HTML, web itu cuma kumpulan teks tanpa struktur.

Kemudian, ada CSS. Ini adalah pekerjaan desainer interior dan eksterior Anda. CSS yang memutuskan warna cat dinding, jenis ubin lantai, bentuk jendela, gaya furnitur, bahkan penataan taman. Dengan CSS, rumah (atau web) Anda menjadi cantik, rapi, dan nyaman dipandang. CSS membuat kerangka HTML yang kaku menjadi hidup dan estetis.

Terakhir, JavaScript (JS) adalah sistem kelistrikan, air, dan bahkan otomatisasi rumah pintar Anda. JS yang membuat lampu bisa menyala saat saklar ditekan, air mengalir saat keran dibuka, atau bahkan pintu gerbang otomatis terbuka saat mobil mendekat. Di dunia web, JS yang membuat tombol bisa diklik, form bisa diisi, konten bisa berubah dinamis, dan interaksi user menjadi responsif. Ini adalah otaknya, ototnya, dan jiwanya sebuah aplikasi web.

Merancang Otak Berhitung (Kalkulator)

Membangun kalkulator itu seperti merakit mainan LEGO. Kita mulai dari bagian-bagian kecil, lalu menggabungkannya menjadi satu kesatuan yang berfungsi. Ini adalah proyek klasik yang sangat bagus untuk melatih logika dan interaksi.

HTML Struktur Kalkulator: Tulang Belulang Antarmuka

Kalkulator butuh layar untuk menampilkan angka dan tombol untuk input. Anggap saja ini seperti dashboard mobil. Ada speedometer (layar) dan tombol-tombol AC, radio (input angka dan operasi). Struktur HTML-nya sederhana, sebuah wadah utama dan di dalamnya ada layar dan kumpulan tombol.


<div class="calculator">
<div class="display">0</div>
<div class="buttons">
<button class="clear">AC</button>
<button class="operator">/</button>
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="operator">*</button>
<!-- Lanjutkan dengan angka dan operator lain -->
<button class="equal">=</button>
</div>
</div>

CSS Gaya Kalkulator: Baju Keren yang Memikat

Setelah kerangka ada, saatnya mendandani! Dengan CSS, kita bisa membuat kalkulator kita terlihat modern, retro, atau futuristik. Kita bisa menggunakan display: grid untuk menata tombol-tombol agar rapi seperti deretan kunci piano, memberi warna latar belakang yang keren, dan membuat tombol memiliki efek saat di-hover atau di-klik. Ini seperti memilih cat mobil dan desain velgnya.


.calculator {
width: 300px;
background-color: #333;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
overflow: hidden;
}
.display {
background-color: #222;
color: #fff;
font-size: 3em;
padding: 20px;
text-align: right;
font-family: 'Segment7', monospace; /* Contoh font keren */
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
button {
background-color: #555;
color: #fff;
border: 1px solid #444;
padding: 20px;
font-size: 1.5em;
cursor: pointer;
transition: background-color 0.2s;
}
button:hover {
background-color: #777;
}
/* Styling khusus untuk operator dan tombol '=' */
.operator { background-color: #f90; }
.equal { background-color: #0c0; grid-column: span 2; }

JavaScript Logika Kalkulator: Mesin Penggerak Otomatis

Inilah bagian paling seru! JS akan menghidupkan kalkulator kita. Ketika kita menekan angka, JS akan menampilkannya di layar. Ketika menekan operator, JS akan menyimpannya. Dan ketika menekan sama dengan, JS akan melakukan perhitungan. Ini mirip seperti ECU (Electronic Control Unit) di mobil yang memproses input dari pedal gas, rem, dan setir, lalu menerjemahkannya menjadi aksi mesin. Kita akan menggunakan addEventListener untuk mendeteksi klik tombol, dan logika sederhana untuk mengelola angka dan operasi.


const display = document.querySelector('.display');
const buttons = document.querySelector('.buttons');
let currentInput = '0';
let operator = null;
let firstOperand = null;
let waitingForSecondOperand = false;
buttons.addEventListener('click', (event) => {
const { target } = event;
if (!target.matches('button')) {
return;
}
if (target.classList.contains('number')) {
if (waitingForSecondOperand) {
currentInput = target.textContent;
waitingForSecondOperand = false;
} else {
currentInput = currentInput === '0' ? target.textContent : currentInput + target.textContent;
}
display.textContent = currentInput;
return;
}
if (target.classList.contains('operator')) {
handleOperator(target.textContent);
return;
}
if (target.classList.contains('equal')) {
calculate();
return;
}
if (target.classList.contains('clear')) {
currentInput = '0';
firstOperand = null;
operator = null;
waitingForSecondOperand = false;
display.textContent = currentInput;
return;
}
});
function handleOperator(nextOperator) {
const inputValue = parseFloat(currentInput);
if (operator && waitingForSecondOperand) {
operator = nextOperator;
return;
}
if (firstOperand === null) {
firstOperand = inputValue;
} else if (operator) {
const result = performCalculation[operator](firstOperand, inputValue);
currentInput = String(result);
firstOperand = result;
}
waitingForSecondOperand = true;
operator = nextOperator;
display.textContent = currentInput;
}
const performCalculation = {
'/': (firstOperand, secondOperand) => firstOperand / secondOperand,
'*': (firstOperand, secondOperand) => firstOperand * secondOperand,
'+': (firstOperand, secondOperand) => firstOperand + secondOperand,
'-': (firstOperand, secondOperand) => firstOperand - secondOperand,
};
function calculate() {
if (operator === null || waitingForSecondOperand) {
return;
}
const secondOperand = parseFloat(currentInput);
const result = performCalculation[operator](firstOperand, secondOperand);
currentInput = String(result);
firstOperand = result;
operator = null;
waitingForSecondOperand = false;
display.textContent = currentInput;
}

Kode di atas adalah versi sederhana, Anda bisa mengembangkannya lagi dengan menambahkan fungsi desimal, negatif, atau membatasi input.

Membangun Kreativitas Tanpa Batas (Page Builder Sederhana)

Sekarang, tantangan yang lebih kompleks namun sangat memuaskan: membuat pondasi page builder sederhana. Bayangkan Anda seorang arsitek yang bisa dengan mudah menambahkan dinding, jendela, atau perabot ke dalam denah rumah hanya dengan menyeretnya. Itu yang akan kita coba lakukan!

HTML Awal Page Builder: Kanvas Kosong Kita

Kita butuh area kerja atau "kanvas" tempat elemen akan dijatuhkan, dan sebuah "toolbar" yang berisi elemen-elemen yang bisa diseret (div, teks, gambar). Ini seperti punya studio seni kosong dengan meja penuh peralatan melukis.


<div class="page-builder-container">
<div class="toolbar">
<div class="draggable-item" draggable="true" data-type="text">Text Block</div>
<div class="draggable-item" draggable="true" data-type="image">Image Block</div>
<div class="draggable-item" draggable="true" data-type="button">Button Block</div>
<!-- Tambahkan elemen lain -->
</div>
<div class="canvas" id="drop-zone">
<p>Drag & Drop elements here!</p>
</div>
</div>

CSS untuk Tampilan Page Builder: Menyusun Studio Kerja

CSS akan membuat toolbar dan kanvas terlihat jelas, serta memberikan visualisasi saat elemen diseret. Kita akan memberi highlight pada area yang siap menerima elemen yang diseret. Ibarat menata meja kerja seniman agar semua alat mudah dijangkau dan kanvasnya siap menerima goresan.


.page-builder-container {
display: flex;
gap: 20px;
margin-top: 20px;
}
.toolbar {
width: 200px;
border: 1px solid #ccc;
padding: 15px;
background-color: #f0f0f0;
border-radius: 8px;
}
.draggable-item {
background-color: #007bff;
color: white;
padding: 10px;
margin-bottom: 10px;
cursor: grab;
border-radius: 5px;
text-align: center;
}
.draggable-item:hover {
opacity: 0.9;
}
.canvas {
flex-grow: 1;
min-height: 400px;
border: 2px dashed #aaa;
background-color: #fff;
padding: 20px;
border-radius: 8px;
}
.canvas.hovered {
border-color: #007bff; /* Efek saat di-hover */
background-color: #e6f7ff;
}
.canvas .added-element {
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
background-color: #f9f9f9;
cursor: move; /* Untuk nanti bisa di-drag juga */
}

JavaScript untuk Interaksi Page Builder: Tangan Ajaib Sang Seniman

Inilah inti dari page builder kita. JavaScript akan mengelola fungsionalitas drag-and-drop. Kita akan menggunakan API Drag & Drop bawaan browser. Ini seperti seorang koki yang mengambil bahan-bahan dari rak bumbu, lalu menyusunnya dengan indah di atas piring. Kita akan:

  • Menandai elemen yang bisa diseret (draggable="true").
  • Mendengarkan event dragstart untuk mengetahui elemen mana yang sedang diseret.
  • Mencegah perilaku default browser pada dragover dan drop di area kanvas.
  • Mendengarkan event drop untuk menambahkan elemen ke kanvas.
  • Menambahkan fungsionalitas contenteditable agar teks bisa langsung diedit.


const draggables = document.querySelectorAll('.draggable-item');
const dropZone = document.getElementById('drop-zone');
let draggedItem = null;
draggables.forEach(item => {
item.addEventListener('dragstart', (e) => {
draggedItem = item;
e.dataTransfer.setData('text/plain', item.dataset.type); // Simpan tipe elemen
});
});
dropZone.addEventListener('dragover', (e) => {
e.preventDefault(); // Penting untuk memungkinkan drop
dropZone.classList.add('hovered');
});
dropZone.addEventListener('dragleave', () => {
dropZone.classList.remove('hovered');
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
dropZone.classList.remove('hovered');
const dataType = e.dataTransfer.getData('text/plain');
let newElement;
switch (dataType) {
case 'text':
newElement = document.createElement('p');
newElement.textContent = 'Ini adalah blok teks yang bisa diedit.';
newElement.setAttribute('contenteditable', 'true');
break;
case 'image':
newElement = document.createElement('img');
newElement.src = 'https://via.placeholder.com/150'; // Ganti dengan URL gambar default
newElement.alt = 'Placeholder Image';
newElement.style.maxWidth = '100%';
break;
case 'button':
newElement = document.createElement('button');
newElement.textContent = 'Klik Saya';
newElement.style.padding = '10px 20px';
newElement.style.backgroundColor = '#28a745';
newElement.style.color = 'white';
newElement.style.border = 'none';
newElement.style.borderRadius = '5px';
newElement.setAttribute('contenteditable', 'true'); // Untuk edit teks tombol
break;
default:
return;
}
newElement.classList.add('added-element'); // Tambahkan kelas untuk styling tambahan
dropZone.appendChild(newElement);
draggedItem = null; // Reset item yang diseret
});

Kode di atas baru pondasi dasar. Untuk fungsionalitas yang lebih canggih seperti mengubah ukuran, menghapus, atau menyimpan layout, Anda perlu logika JS yang lebih kompleks dan mungkin bantuan dari framework atau library. Tapi ini sudah cukup untuk merasakan "keajaiban" page builder!

Tips Jitu Agar Aplikasi Web Kamu SEO Friendly

Meskipun kita fokus ke fungsionalitas, jangan lupakan agar aplikasi kita mudah ditemukan di internet. Ini seperti memastikan rumah yang sudah kita bangun tadi punya alamat yang jelas dan mudah diakses:

  • Gunakan HTML Semantik: Selalu gunakan tag HTML yang sesuai dengan fungsinya (<header>, <nav>, <main>, <article>, <section>, <footer>). Ini membantu search engine memahami struktur dan konten halaman Anda.
  • Optimasi Gambar: Gunakan atribut alt pada tag <img>. Kompres ukuran gambar agar loading lebih cepat.
  • Responsif Itu Wajib: Pastikan desain Anda adaptif untuk berbagai ukuran layar (mobile, tablet, desktop) menggunakan CSS media queries. Google sangat menyukai situs yang responsif.
  • Performa Cepat: Minimalkan file CSS dan JS Anda. Hindari JavaScript yang memblokir render halaman. Kecepatan loading adalah faktor penting bagi SEO.
  • Struktur URL yang Jelas: Meskipun aplikasi kita klien-sisi, jika ada bagian yang bisa memiliki URL unik (misal, fitur page builder yang disimpan), pastikan URL-nya deskriptif.

Penutup: Mari Bereksperimen!

Dari kalkulator sederhana hingga pondasi page builder yang interaktif, kita sudah melihat betapa kuatnya kombinasi HTML, CSS, dan JavaScript. Mereka adalah kunci untuk membuka pintu kreativitas tak terbatas di dunia pengembangan web. Jangan takut untuk mencoba, memecahkan masalah (ingat cerita undefined saya?), dan terus bereksperimen. Setiap baris kode adalah langkah kecil menuju mahakarya digital Anda.

Sekarang, giliran Anda! Ambil kode-kode di atas, modifikasi, tambahkan fitur baru, dan buatlah sesuatu yang benar-benar unik. Dunia web menanti inovasi Anda!

HTML CSS JavaScript Web Development