Membangun Mesin Kreativitas Web: Kalkulator & Page Builder dengan HTML, CSS, JS Murni

ikramlink • Maret 23, 2026
Membangun Mesin Kreativitas Web: Kalkulator & Page Builder dengan HTML, CSS, JS Murni

Halo Bro/Sis Programmer! Mari Kita Bedah Proyek Seru!

Apa kabar nih, kawan-kawan developer? Semoga tetap semangat ngodingnya ya! Hari ini, kita mau ngulik sesuatu yang fundamental tapi super powerfull: bikin aplikasi web kalkulator dan page builder menggunakan "trio maut" HTML, CSS, dan JavaScript murni. Yup, tanpa framework ribet, tanpa library berat. Murni pakai jurus-jurus dasar yang justru jadi pondasi kuat buat lo berkreasi.

Mungkin ada yang mikir, "alah, kalkulator doang, gampang!". Eits, jangan salah. Dari project "sesimpel" kalkulator, kita bisa belajar banyak banget soal DOM manipulation, event handling, sampai basic logic development. Nah, kalau page builder, ini level selanjutnya. Kita akan mencoba merasakan sensasi jadi "arsitek" web yang bisa menyusun elemen-elemen secara dinamis. Keren kan?

Percayalah, project semacam ini bukan cuma buat pamer skill. Ini adalah latihan mental, latihan logika, dan latihan kesabaran yang luar biasa. Ibaratnya, ini kayak bootcamp mini yang bisa bikin skill front-end lo makin diasah. Yuk, tanpa basa-basi lagi, langsung kita mulai petualangan koding kita!

Bagian 1: Si Kalkulator Pintar di Browser Kita

Kalkulator adalah salah satu project "hello world" yang sering banget dijadiin gerbang masuk ke dunia JS. Tapi, di balik kesederhanaannya, ini adalah playground yang sempurna buat eksplorasi. Kita akan bikin kalkulator yang bisa operasi dasar (tambah, kurang, kali, bagi) dan tentu saja, terlihat cakep!

Struktur HTML: Tulang Belakang Kalkulator

Pertama, kita butuh "kerangka" atau struktur HTML-nya. Bayangin aja kalkulator fisik di tangan lo. Ada layar buat nampilin angka, dan tombol-tombol numerik serta operator. Simpel aja, kita pakai satu `div` utama sebagai container, lalu `input` untuk display, dan `button` untuk setiap angka dan operator.


<div class="calculator">
    <input type="text" class="calculator-screen" value="" disabled />
    <div class="calculator-keys">
        <button type="button" class="operator" value="+">+</button>
        <button type="button" class="operator" value="-">-</button>
        <button type="button" class="operator" value="*">×</button>
        <button type="button" class="operator" value="/">÷</button>

        <button type="button" value="7">7</button>
        <button type="button" value="8">8</button>
        <button type="button" value="9">9</button>

        <button type="button" value="4">4</button>
        <button type="button" value="5">5</button>
        <button type="button" value="6">6</button>

        <button type="button" value="1">1</button>
        <button type="button" value="2">2</button>
        <button type="button" value="3">3</button>

        <button type="button" value="0">0</button>
        <button type="button" class="decimal" value=".">.</button>
        <button type="button" class="all-clear" value="all-clear">AC</button>
        <button type="button" class="equal-sign operator" value="=">=</button>
    </div>
</div>

Gampang kan? Setiap tombol kita kasih `value` sesuai isinya biar nanti gampang diambil pakai JavaScript. Untuk display, kita pakai `disabled` biar user nggak bisa ngetik langsung di sana, tapi hanya bisa lewat tombol.

CSS: Make It Pretty!

HTML tanpa CSS itu kayak makan nasi goreng tanpa kerupuk, ada yang kurang! Nah, di sini kita pakai CSS buat ngatur layout tombol-tombolnya biar rapi kayak kalkulator beneran. Kita bisa pakai Flexbox atau Grid buat layouting tombol. Saya pribadi lebih suka Grid untuk layout 2D seperti ini, rasanya lebih intuitif.


.calculator {
    border: 1px solid #ccc;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
}

.calculator-screen {
    width: 100%;
    height: 100px;
    border: none;
    background-color: #252525;
    color: #fff;
    text-align: right;
    padding-right: 20px;
    padding-left: 10px;
    font-size: 4rem;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.calculator-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 kolom sama besar */
    grid-gap: 1px;
    background-color: #eee;
}

.calculator-keys button {
    height: 60px;
    font-size: 2rem;
    background-color: #f5f5f5;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.calculator-keys button:hover {
    background-color: #e0e0e0;
}

.operator {
    background-color: #f7922d;
    color: #fff;
}

.operator:hover {
    background-color: #e6801b;
}

.equal-sign {
    background-color: #2e86c1;
    color: #fff;
    grid-column: -2 / -1; /* menempati kolom terakhir */
    grid-row: 2 / span 4; /* menempati baris 2 sampai 5 */
    height: unset; /* override tinggi default */
}

.all-clear {
    background-color: #c0392b;
    color: #fff;
}

Nah, di CSS itu ada trik kecil di bagian `.equal-sign` yang saya suka banget pakai Grid. Dengan `grid-column` dan `grid-row`, kita bisa bikin tombol `=` itu melar, menempati beberapa sel sekaligus. Ini powerful banget buat desain yang tidak seragam!

JavaScript: Otak di Balik Angka

Ini dia bagian paling seru! JavaScript adalah "otak" yang akan menghidupkan kalkulator kita. Kita akan melakukan beberapa hal:

  1. Mendapatkan referensi ke elemen display dan semua tombol.
  2. Menambahkan event listener ke setiap tombol.
  3. Merespon klik tombol untuk menampilkan angka atau melakukan perhitungan.

Untuk perhitungan, cara paling cepat (tapi hati-hati!) adalah pakai fungsi `eval()`. Kenapa hati-hati? Karena `eval()` bisa mengeksekusi string JavaScript apa pun, jadi rawan kalau inputnya dari user yang tidak dipercaya. Tapi untuk kalkulator sederhana ini, kita bisa pakai dengan batasan input yang ketat.


const calculator = document.querySelector('.calculator');
const keys = calculator.querySelector('.calculator-keys');
const display = document.querySelector('.calculator-screen');

let displayValue = '0';
let firstOperand = null;
let operator = null;
let waitingForSecondOperand = false;

function updateDisplay() {
    display.value = displayValue;
}

updateDisplay();

keys.addEventListener('click', (event) => {
    const { target } = event;
    if (!target.matches('button')) {
        return;
    }

    const value = target.value;

    switch (value) {
        case '+':
        case '-':
        case '*':
        case '/':
            handleOperator(value);
            break;
        case '=':
            calculate();
            break;
        case '.':
            inputDecimal(value);
            break;
        case 'all-clear':
            resetCalculator();
            break;
        default:
            if (Number.isInteger(parseFloat(value))) {
                inputDigit(value);
            }
    }

    updateDisplay();
});

function inputDigit(digit) {
    if (waitingForSecondOperand === true) {
        displayValue = digit;
        waitingForSecondOperand = false;
    } else {
        displayValue = displayValue === '0' ? digit : displayValue + digit;
    }
}

function inputDecimal(dot) {
    if (waitingForSecondOperand === true) {
        displayValue = '0.';
        waitingForSecondOperand = false;
        return;
    }
    if (!displayValue.includes(dot)) {
        displayValue += dot;
    }
}

function handleOperator(nextOperator) {
    const inputValue = parseFloat(displayValue);

    if (operator && waitingForSecondOperand)  {
        operator = nextOperator;
        return;
    }

    if (firstOperand === null) {
        firstOperand = inputValue;
    } else if (operator) {
        const result = performCalculation[operator](firstOperand, inputValue);
        displayValue = String(result);
        firstOperand = result;
    }

    waitingForSecondOperand = true;
    operator = nextOperator;
}

const performCalculation = {
    '/': (firstOperand, secondOperand) => firstOperand / secondOperand,
    '*': (firstOperand, secondOperand) => firstOperand * secondOperand,
    '+': (firstOperand, secondOperand) => firstOperand + secondOperand,
    '-': (firstOperand, secondOperand) => firstOperand - secondOperand
};

function calculate() {
    if (firstOperand === null || operator === null) {
        return;
    }
    const inputValue = parseFloat(displayValue);
    const result = performCalculation[operator](firstOperand, inputValue);

    displayValue = String(result);
    firstOperand = result;
    operator = null;
    waitingForSecondOperand = false;
}

function resetCalculator() {
    displayValue = '0';
    firstOperand = null;
    operator = null;
    waitingForSecondOperand = false;
}

Kode JavaScript di atas sedikit lebih kompleks dari sekadar `eval()`, ini untuk memastikan logika kalkulator kita lebih robust. Ada state `firstOperand`, `operator`, dan `waitingForSecondOperand` untuk nangani urutan operasi. Ini pendekatan yang lebih realistis dan aman daripada langsung `eval(display.value)` yang bisa jadi celah keamanan kalau aplikasi kita lebih dari sekadar kalkulator pribadi.

Saya ingat dulu pertama kali bikin kalkulator, nyerah pas bagian tanda koma (decimal) sama tombol `AC`. Rasanya kayak butuh banget state management yang bener. Tapi setelah beberapa kali coba dan baca-baca, ternyata kuncinya cuma di 3 variabel state itu. Makanya, kalau lagi mentok ngoding, jangan langsung nyerah bro, coba istirahat dulu, nanti pas balik bisa jadi nemu pencerahan.

Bagian 2: Membangun Page Builder Sederhana Kita Sendiri

Oke, kalau kalkulator tadi latihan otot, page builder ini latihan otak tingkat lanjut! Kita akan coba bikin versi mini dari page builder yang memungkinkan kita menambahkan elemen-elemen (misalnya paragraf, heading, gambar) ke halaman web secara dinamis. Ini adalah gerbang menuju aplikasi web yang lebih interaktif dan powerful.

Konsep Page Builder: Arsitek di Tangan Kita

Bayangkan lo punya kanvas kosong, terus di sampingnya ada "toolbox" berisi berbagai macam elemen. Lo tinggal klik salah satu elemen, dan elemen itu langsung muncul di kanvas. Itu esensi dari page builder. Kita akan fokus pada:

  1. Toolbar dengan tombol untuk menambahkan berbagai jenis elemen (misal: Text, Heading, Button).
  2. Area kanvas tempat elemen-elemen tersebut akan muncul.
  3. Fungsionalitas dasar untuk menambahkan elemen.
  4. (Optional tapi keren) Membuat elemen yang ditambahkan bisa diedit secara langsung (inline editing).

Struktur HTML: Toolbar dan Kanvas Kosong

Untuk HTML-nya, kita butuh dua area utama: satu untuk toolbar dan satu lagi untuk area "kanvas" tempat user akan "membangun" halamannya. Kita bisa pakai `div` untuk toolbar, dan `div` lainnya dengan atribut `contenteditable="true"` sebagai kanvas, atau bisa juga area drop zone biasa yang akan kita manipulasikan isinya.


<div class="page-builder-container">
    <div class="sidebar">
        <h3>Element Toolbox</h3>
        <button class="add-element-btn" data-type="heading">Add Heading</button>
        <button class="add-element-btn" data-type="paragraph">Add Paragraph</button>
        <button class="add-element-btn" data-type="image">Add Image</button>
        <button class="add-element-btn" data-type="button">Add Button</button>
    </div>
    <div class="main-content">
        <h2>Your Page Canvas</h2>
        <div id="page-canvas" class="page-canvas">
            <!-- Elements will be injected here -->
            <p>Start building your page by adding elements from the toolbox!</p>
        </div>
    </div>
</div>

Di sini, setiap tombol di toolbox punya `data-type` yang nanti akan kita manfaatkan di JavaScript untuk menentukan elemen apa yang harus dibuat.

CSS: Mempercantik Kanvas dan Toolbox

Layouting untuk page builder ini biasanya dua kolom: sidebar dan main content. Kita bisa pakai Flexbox atau Grid lagi. Untuk elemen yang ditambahkan, kita kasih sedikit styling biar kelihatan batasnya dan gampang diidentifikasi.


.page-builder-container {
    display: flex;
    min-height: 80vh;
    border: 1px solid #ccc;
    margin-top: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.sidebar {
    width: 250px;
    background-color: #f4f4f4;
    padding: 20px;
    border-right: 1px solid #eee;
    display: flex;
    flex-direction: column;
}

.sidebar h3 {
    margin-top: 0;
    color: #333;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.add-element-btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s;
}

.add-element-btn:hover {
    background-color: #0056b3;
}

.main-content {
    flex-grow: 1;
    padding: 20px;
    background-color: #fff;
}

.page-canvas {
    border: 2px dashed #bbb;
    min-height: 500px;
    padding: 15px;
    background-color: #fdfdfd;
    position: relative; /* Penting untuk positioning elemen */
}

/* Styling for injected elements */
.page-canvas > *:not(:last-child) { /* kasih margin bawah kecuali elemen terakhir */
    margin-bottom: 15px;
}

.page-canvas h1, .page-canvas h2, .page-canvas h3, .page-canvas p, .page-canvas button, .page-canvas img {
    border: 1px solid #e0e0e0;
    padding: 10px;
    margin: 5px 0;
    background-color: #fff;
    cursor: grab; /* Indikasi bisa di-drag */
    min-height: 40px; /* Biar gampang diklik/pilih */
}

.page-canvas img {
    max-width: 100%;
    height: auto;
    display: block;
    background-color: #f0f0f0;
    text-align: center; /* Untuk placeholder */
    line-height: 100px;
    font-size: 0.9em;
    color: #888;
    position: relative;
    overflow: hidden;
}

.page-canvas img::after {
    content: "Image Placeholder";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 100%;
    text-align: center;
}

.page-canvas button {
    display: inline-block;
    padding: 8px 15px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

Saya sengaja kasih styling lumayan detail di atas biar elemen-elemen yang nanti ditambahin kelihatan "hidup" di kanvas. Bagian `img::after` itu cuma trik CSS buat bikin placeholder teks di dalam elemen gambar kalau belum ada URL-nya.

JavaScript: Sang Perakit Halaman

Di JavaScript untuk page builder, kita akan banyak mainan dengan `document.createElement()` dan `appendChild()`. Ini adalah inti dari manipulasi DOM secara dinamis. Kita juga akan pakai event delegation biar nggak perlu nambah event listener ke setiap elemen yang baru dibuat.


const pageCanvas = document.getElementById('page-canvas');
const sidebar = document.querySelector('.sidebar');

sidebar.addEventListener('click', (event) => {
    const { target } = event;
    if (!target.matches('.add-element-btn')) {
        return;
    }

    const elementType = target.dataset.type;
    let newElement;

    switch (elementType) {
        case 'heading':
            newElement = document.createElement('h2');
            newElement.textContent = 'New Heading Title';
            newElement.setAttribute('contenteditable', 'true'); // Membuat bisa diedit
            break;
        case 'paragraph':
            newElement = document.createElement('p');
            newElement.textContent = 'This is a new paragraph. Click to edit.';
            newElement.setAttribute('contenteditable', 'true');
            break;
        case 'image':
            newElement = document.createElement('img');
            newElement.src = 'https://via.placeholder.com/150'; // Placeholder image
            newElement.alt = 'Placeholder Image';
            newElement.style.width = '150px'; // Set a default width
            newElement.style.height = '150px'; // Set a default height
            break;
        case 'button':
            newElement = document.createElement('button');
            newElement.textContent = 'Click Me';
            newElement.setAttribute('contenteditable', 'true');
            break;
        default:
            return;
    }

    // Tambahkan class agar styling CSS bisa diterapkan
    newElement.classList.add('page-element'); 
    pageCanvas.appendChild(newElement);

    // Fokus ke elemen baru jika bisa diedit
    if (newElement.getAttribute('contenteditable') === 'true') {
        newElement.focus();
    }
});

// Optional: Menambahkan fungsionalitas drag and drop sederhana (hanya indikasi)
let draggedElement = null;

pageCanvas.addEventListener('dragstart', (e) => {
    if (e.target.classList.contains('page-element')) {
        draggedElement = e.target;
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/plain', e.target.id || 'dragged-element'); // Mengirim data agar dragstart valid
        // Bisa tambahkan class untuk visual feedback saat di-drag
        e.target.style.opacity = '0.5';
    }
});

pageCanvas.addEventListener('dragover', (e) => {
    e.preventDefault(); // Mengizinkan drop
    e.dataTransfer.dropEffect = 'move';
});

pageCanvas.addEventListener('dragleave', (e) => {
    // Bersihkan feedback visual jika ada
});

pageCanvas.addEventListener('drop', (e) => {
    e.preventDefault();
    if (draggedElement && e.target.parentNode === pageCanvas) {
        // Logika sederhana: pindahkan elemen ke sebelum elemen target
        // Ini bisa lebih kompleks untuk menyisipkan di posisi yang tepat
        if (e.target !== draggedElement) {
            pageCanvas.insertBefore(draggedElement, e.target);
        }
    }
    if (draggedElement) {
        draggedElement.style.opacity = '1'; // Kembalikan opacity
        draggedElement = null;
    }
});

pageCanvas.addEventListener('dragend', (e) => {
    if (draggedElement) {
        draggedElement.style.opacity = '1';
    }
    draggedElement = null;
});

Di kodingan page builder ini, bagian `contenteditable="true"` itu magic banget buat bikin elemen bisa diedit langsung di browser. Untuk drag and drop, saya kasih contoh sederhana yang cuma memindahkan elemen *sebelum* elemen lain yang di-drop-in. Implementasi drag and drop yang lebih canggih (misalnya insert di tengah-tengah teks atau indikator visual saat drag) itu butuh JavaScript yang lebih advance lagi, mungkin dengan menghitung posisi mouse relatif terhadap elemen lain. Tapi ini udah cukup buat ngasih ide dasar.

Pengalaman saya bikin fitur drag and drop itu sering banget makan waktu. Rasanya kayak lagi main puzzle yang tiap bagian harus pas. Kadang suka error gara-gara `preventDefault()` kelupaan, atau koordinat mouse yang meleset. Tapi begitu berhasil, sensasinya itu lho, kayak jadi superhero JavaScript!

Menggabungkan Kekuatan: Kalkulator di dalam Page Builder?

Kalau kita udah punya kedua "senjata" ini, bisa nggak ya kita gabungkan? Tentu saja bisa! Konsepnya gini: kita bisa menambahkan tombol di page builder toolbox kita yang fungsinya adalah "Add Calculator Widget". Nah, pas tombol itu diklik, dia akan meng-inject seluruh HTML kalkulator kita (lengkap dengan CSS dan JS-nya) ke dalam kanvas page builder. Ini disebut sebagai membuat "widget" atau "komponen" yang bisa pakai ulang.

Untuk project ini, itu akan jadi PR yang seru banget buat lo eksplorasi lebih lanjut. Kuncinya ada di bagaimana mengelola JS dari kalkulator agar bisa di-initialize ketika widget-nya ditambahkan ke kanvas. Mungkin dengan fungsi `initCalculator()` yang dipanggil setiap kali kalkulator baru ditambahkan.

Best Practices & Tips Tambahan

Baik kalkulator maupun page builder, ada beberapa praktik terbaik yang bisa lo terapkan untuk bikin kodingan lo makin mantap:

  • Modularitas: Pisahkan kodingan JS lo ke dalam fungsi-fungsi kecil yang punya tugas spesifik. Jangan bikin satu fungsi super panjang yang ngurusin semuanya.
  • Komentar Kode: Jangan malas nulis komentar! Semakin kompleks aplikasinya, semakin banyak komentar yang lo butuhin. Ini bukan cuma buat orang lain, tapi juga buat lo sendiri di masa depan.
  • Penanganan Error (Error Handling): Apa yang terjadi kalau user masukin input aneh? Atau kalau ada elemen yang nggak ketemu? Pastikan aplikasi lo nggak langsung crash, tapi kasih feedback yang jelas.
  • Accessibility (A11y): Pastikan aplikasi lo bisa diakses oleh semua orang, termasuk mereka yang pakai screen reader atau keyboard navigation. Pakai semantic HTML, tambahkan `aria-label`, dll.
  • Responsiveness: Pastikan kalkulator dan page builder lo tampil bagus di berbagai ukuran layar (handphone, tablet, desktop). Media queries di CSS adalah teman terbaik lo.
  • Performance: Untuk page builder, manipulasi DOM bisa jadi berat. Coba optimasi dengan meminimalisir manipulasi DOM yang berulang atau pakai teknik debouncing/throttling untuk event yang sering.
  • Version Control (Git): Selalu pakai Git! Ini wajib banget. Bayangin kalau lo ngoding seharian terus besoknya ada bug parah dan lo nggak tahu kapan itu muncul. Dengan Git, lo bisa balik ke versi sebelumnya dengan mudah.

Penutup: Terus Bereksplorasi!

Nah, bro/sis, itu tadi panduan lengkap (tapi tetap ringkas) buat bikin kalkulator dan page builder sederhana menggunakan HTML, CSS, dan JS murni. Dari project ini, lo udah belajar banyak banget, mulai dari manipulasi DOM, event handling, CSS layouting modern (Flexbox/Grid), sampai logika aplikasi yang lebih kompleks.

Ingat, ini baru permulaan. Masih banyak banget yang bisa dieksplorasi dan dikembangkan dari kedua aplikasi ini. Mungkin lo mau nambah fungsi scientific di kalkulator? Atau fitur drag-and-drop yang lebih canggih di page builder? Bahkan mungkin fitur "save layout" di page builder? Langit adalah batasnya!

Jangan takut untuk bereksperimen, jangan takut error. Error adalah guru terbaik lo. Teruslah ngoding, teruslah belajar, dan jangan pernah berhenti penasaran. Kalau ada pertanyaan atau mau sharing pengalaman ngoding project ini, jangan ragu tulis di kolom komentar ya!

Sampai jumpa di artikel selanjutnya, salam ngoding!

HTML CSS JavaScript Web Development