Merangkai Otak Hitung dan Kanvas Kreatif: Membangun Kalkulator & Page Builder Murni HTML, CSS, JS

Pernahkah Anda merasa terlalu bergantung pada framework atau library modern? Saya pribadi sering, bahkan pernah suatu ketika mencoba membangun komponen kecil dan akhirnya malah menarik seluruh ekosistem React atau Vue hanya untuk sebuah fitur kecil. Rasanya seperti mau membetulkan engsel pintu yang berderit, tapi malah membeli satu set perkakas bengkel lengkap yang isinya ribuan alat dan hanya terpakai satu obeng saja. Memang efektif, tapi kadang terasa "overkill" dan bikin bingung. Nah, kali ini, mari kita kembali ke akar, kembali ke "jeroan" paling fundamental di dunia web: HTML, CSS, dan JavaScript murni!

Artikel ini akan membawa Anda dalam perjalanan merakit dua aplikasi web yang cukup kompleks, tetapi dengan filosofi kesederhanaan dan kemandirian: sebuah kalkulator fungsional dan sebuah page builder dinamis. Keduanya akan kita bangun tanpa bantuan framework apa pun, murni dengan kehebatan trio dasar yang sudah ada sejak zaman baheula. Bayangkan ini seperti seorang koki handal yang, alih-alih memakai mesin canggih, memilih untuk menggunakan pisau dan talenan saja untuk menciptakan hidangan bintang lima. Hasilnya? Pemahaman mendalam, performa optimal, dan kepuasan luar biasa saat melihat kreasi Anda berfungsi.

Persiapkan diri Anda, buka editor kode favorit Anda, dan mari kita mulai merakit "otak digital" serta "kanvas kreatif" ini!

Bagian 1: Merakit Otak Digital – Kalkulator Fungsional

Membangun kalkulator mungkin terdengar sepele, tapi ini adalah proyek fundamental yang sangat bagus untuk melatih logika dan interaksi DOM (Document Object Model) dengan JavaScript. Dulu, waktu pertama kali belajar JS, saya pernah debugging kalkulator sederhana sampai seharian penuh hanya karena lupa satu tanda kurung atau salah penempatan event listener. Rasanya seperti montir yang sudah membongkar seluruh mesin mobil tapi ternyata masalahnya hanya di kabel busi yang kendur. Frustrasi, tapi begitu ketemu solusinya, rasanya seperti menemukan harta karun!

1.1. Pondasi HTML: Rangka Kalkulator

HTML adalah tulang punggung aplikasi kita. Untuk kalkulator, kita butuh "layar" untuk menampilkan angka dan hasil, serta "tombol-tombol" untuk input. Bayangkan ini seperti merancang tata letak panel kontrol di kokpit pesawat, di mana setiap tombol dan layar punya tempatnya sendiri.

<div class="calculator-container">
    <div class="display">0</div>
    <div class="buttons">
        <button class="operator clear">AC</button>
        <button class="operator backspace">&larr;</button>
        <button class="operator">%</button>
        <button class="operator">/</button>

        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button class="operator">*</button>

        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button class="operator">-</button>

        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button class="operator">+</button>

        <button class="zero">0</button>
        <button>.</button>
        <button class="operator equals">=</button>
    </div>
</div>

Di sini, kita punya sebuah `div` utama sebagai "badan" kalkulator. Di dalamnya, ada `div` untuk "layar" (`display`) dan `div` lain untuk menampung semua "tombol" (`buttons`). Setiap tombol diwakili oleh elemen ``. Perhatikan atribut `class` yang akan sangat membantu kita dalam menata gaya (CSS) dan menambahkan logika (JS).

1.2. Busana CSS: Mempercantik Kalkulator

Setelah rangkanya jadi, saatnya kita berikan sentuhan estetika. CSS di sini ibarat kita memilih cat, desain interior, dan peletakan setiap panel agar kalkulator tidak hanya berfungsi tapi juga nyaman digunakan dan enak dipandang. Saya selalu percaya, aplikasi yang bagus tidak hanya harus fungsional, tapi juga menyenangkan secara visual. Dulu, saya pernah membuat UI kalkulator yang tombolnya berantakan seperti susunan bata yang ambruk. Hasilnya? Aplikasi yang secara teknis berfungsi, tapi bikin mata sakit!

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f2f5;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
}

.calculator-container {
    background-color: #333;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    width: 300px;
}

.display {
    background-color: #222;
    color: #eee;
    font-size: 2.5em;
    padding: 20px;
    text-align: right;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden; /* Prevent text overflow */
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.buttons button {
    background-color: #555;
    color: #eee;
    border: none;
    padding: 20px;
    font-size: 1.5em;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.buttons button:hover {
    background-color: #777;
}

.buttons button.operator {
    background-color: #f7923e;
    color: white;
}

.buttons button.operator:hover {
    background-color: #e6812d;
}

.buttons button.zero {
    grid-column: span 2;
}

.buttons button.clear {
    background-color: #e74c3c;
}

.buttons button.clear:hover {
    background-color: #c0392b;
}

.buttons button.equals {
    background-color: #2ecc71;
}

.buttons button.equals:hover {
    background-color: #27ae60;
}

Kita menggunakan Flexbox untuk menengahkan kalkulator di halaman, dan Grid untuk mengatur tata letak tombol agar rapi. Setiap tombol diberi gaya yang berbeda, sesuai fungsinya (operator, angka, clear, equals) agar mudah dikenali. Ini seperti memberikan sentuhan ergonomis pada alat-alat di bengkel, agar nyaman digenggam dan mudah diidentifikasi saat bekerja.

1.3. Otak JavaScript: Logika Perhitungan

Inilah inti dari kalkulator kita, "otak" yang akan memproses setiap input dan menghasilkan output. JavaScript akan mendengarkan setiap ketukan tombol, membangun ekspresi matematika, lalu menghitung hasilnya. Dulu, saya paling sering membuat kesalahan di bagian ini, terutama saat mencoba mengelola state kalkulator dan mengurai ekspresi yang kompleks. Rasanya seperti mencoba memprogram ECU mobil balap tanpa tahu dasar-dasar mekanika!

document.addEventListener('DOMContentLoaded', () => {
    const display = document.querySelector('.display');
    const buttons = document.querySelectorAll('.buttons button');

    let currentInput = '0';
    let operator = null;
    let previousInput = '';
    let resetDisplay = false;

    function updateDisplay() {
        display.textContent = currentInput;
    }

    function handleNumber(number) {
        if (resetDisplay) {
            currentInput = number;
            resetDisplay = false;
        } else {
            currentInput = currentInput === '0' ? number : currentInput + number;
        }
    }

    function handleOperator(nextOperator) {
        if (operator && !resetDisplay) {
            calculate();
        }
        previousInput = currentInput;
        operator = nextOperator;
        resetDisplay = true;
    }

    function calculate() {
        let result;
        const prev = parseFloat(previousInput);
        const current = parseFloat(currentInput);

        if (isNaN(prev) || isNaN(current)) return;

        switch (operator) {
            case '+':
                result = prev + current;
                break;
            case '-':
                result = prev - current;
                break;
            case '*':
                result = prev * current;
                break;
            case '/':
                result = prev / current;
                break;
            case '%':
                result = prev % current;
                break;
            default:
                return;
        }
        currentInput = String(result);
        operator = null;
        resetDisplay = true;
    }

    buttons.forEach(button => {
        button.addEventListener('click', (e) => {
            const buttonText = e.target.textContent;

            if (e.target.classList.contains('operator')) {
                if (buttonText === 'AC') {
                    currentInput = '0';
                    operator = null;
                    previousInput = '';
                    resetDisplay = false;
                } else if (buttonText === '←') {
                    currentInput = currentInput.slice(0, -1) || '0';
                } else if (buttonText === '=') {
                    if (operator && previousInput !== '') {
                        calculate();
                    }
                } else {
                    handleOperator(buttonText);
                }
            } else if (e.target.textContent === '.') {
                if (!currentInput.includes('.')) {
                    currentInput += '.';
                }
            } else {
                handleNumber(buttonText);
            }
            updateDisplay();
        });
    });

    updateDisplay(); // Initialize display
});

Kode JavaScript ini bekerja dengan melacak tiga hal utama: `currentInput` (angka yang sedang diketik), `previousInput` (angka sebelum operator ditekan), dan `operator` (operator yang dipilih). Setiap kali tombol diklik, kita memeriksa jenis tombolnya dan menjalankan fungsi yang sesuai: menambahkan angka ke `currentInput`, mengatur operator, atau melakukan perhitungan. Fungsi `calculate()` adalah jantungnya, di mana semua operasi matematika dilakukan. Penting untuk diingat, dalam kalkulator yang lebih canggih, seringkali digunakan parser ekspresi atau library matematika daripada `eval()` (yang bisa menjadi risiko keamanan jika input berasal dari sumber tidak terpercaya) atau switch-case sederhana seperti ini. Namun, untuk kasus ini, `switch-case` sudah lebih dari cukup!

Bagian 2: Membangun Kanvas Kreatif – Page Builder Dinamis

Setelah merakit kalkulator, mari kita tingkatkan level tantangannya: membangun sebuah page builder sederhana. Ini adalah arena bermain yang sempurna untuk menguji kemampuan Anda dalam manipulasi DOM, manajemen event, dan menciptakan pengalaman interaktif. Dulu, saya pernah menghabiskan waktu seminggu hanya untuk membuat fitur drag-and-drop yang responsif dan tidak "loncat-loncat" ketika elemen jatuh di posisi yang salah. Rasanya seperti mencoba memancing ikan besar dengan tali pancing yang putus sambung. Tapi ketika akhirnya berhasil, kepuasan yang didapat setara dengan berhasil mendaratkan ikan marlin!

2.1. Pondasi HTML: Kanvas dan Palette Komponen

Untuk page builder, kita membutuhkan dua area utama: sebuah "palette" berisi komponen-komponen yang bisa ditarik, dan sebuah "kanvas" tempat komponen tersebut akan diletakkan. Bayangkan ini seperti studio seni di mana Anda punya meja kerja (kanvas) dan rak berisi berbagai alat dan bahan (palette).

<div class="page-builder-container">
    <div class="sidebar">
        <h3>Komponen</h3>
        <div class="component-palette">
            <div class="draggable-component" draggable="true" data-type="text">Text Block</div>
            <div class="draggable-component" draggable="true" data-type="button">Button</div>
            <div class="draggable-component" draggable="true" data-type="image">Image</div>
        </div>
    </div>
    <div class="main-canvas" id="mainCanvas">
        <h3>Seret komponen ke sini!</h3>
    </div>
</div>

Kita punya `sidebar` untuk `component-palette` yang berisi `draggable-component`. Atribut `draggable="true"` sangat penting agar elemen bisa ditarik. `data-type` akan membantu JavaScript mengenali jenis komponen. `main-canvas` adalah area tempat kita akan membangun halaman.

2.2. Busana CSS: Gaya untuk Builder dan Komponen

CSS di page builder tidak hanya mempercantik tampilan, tapi juga membantu visualisasi proses drag-and-drop. Kita akan memberikan gaya pada palette, kanvas, dan juga gaya dasar untuk setiap komponen yang diletakkan. Ini seperti seorang desainer interior yang menata studio kerjanya agar semua alat mudah dijangkau dan proses kreatif bisa berjalan lancar.

.page-builder-container {
    display: flex;
    width: 100%;
    min-height: 100vh;
    background-color: #f9f9f9;
}

.sidebar {
    width: 250px;
    background-color: #eee;
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

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

.component-palette {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.draggable-component {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    text-align: center;
    cursor: grab;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

.draggable-component:hover {
    background-color: #f0f0f0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.draggable-component:active {
    cursor: grabbing;
}

.main-canvas {
    flex-grow: 1;
    border: 2px dashed #ccc;
    margin: 20px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    min-height: calc(100vh - 40px);
    position: relative; /* Untuk positioning elemen di dalamnya */
    display: flex; /* Untuk menengahkan teks placeholder */
    justify-content: center;
    align-items: center;
    font-style: italic;
    color: #888;
    flex-direction: column;
}

.main-canvas.drag-over {
    border-color: #2ecc71;
    background-color: #e8f9ed;
}

/* Default styles for dropped components */
.canvas-component {
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #eee;
    background-color: #fefefe;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    cursor: grab;
    position: relative; /* Untuk manipulasi posisi */
}

.canvas-component.text-block {
    min-height: 50px;
    border: 1px solid #b3d9ff;
    background-color: #e6f3ff;
    padding: 15px;
    text-align: left;
}

.canvas-component.button-block {
    text-align: center;
}

.canvas-component.button-block button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}

.canvas-component.button-block button:hover {
    background-color: #0056b3;
}

.canvas-component.image-block {
    text-align: center;
}

.canvas-component.image-block img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border: 1px solid #ddd;
    border-radius: 5px;
}

Kita mengatur `sidebar` dan `main-canvas` menggunakan Flexbox. Komponen yang bisa ditarik diberi gaya agar jelas terlihat dan terasa interaktif. `main-canvas` diberi gaya `dashed border` yang akan berubah saat ada elemen yang di-drag di atasnya, memberikan umpan balik visual yang penting. Begitu pula, setiap jenis komponen yang ditambahkan ke kanvas memiliki gaya dasarnya masing-masing.

2.3. Otak JavaScript: Keajaiban Drag-and-Drop & Manipulasi DOM

Di sinilah seluruh "keajaiban" page builder kita terjadi. JavaScript akan mengelola seluruh interaksi drag-and-drop, menambahkan elemen ke kanvas, dan memungkinkan kita mengedit kontennya. Ini adalah bagian paling kompleks, bagaikan seorang sutradara yang mengarahkan setiap aktor (elemen DOM) untuk berinteraksi sesuai skenario yang telah ditentukan.

document.addEventListener('DOMContentLoaded', () => {
    const mainCanvas = document.getElementById('mainCanvas');
    const draggableComponents = document.querySelectorAll('.draggable-component');

    let draggedItem = null;

    // Event listeners untuk draggable components di sidebar
    draggableComponents.forEach(component => {
        component.addEventListener('dragstart', (e) => {
            draggedItem = e.target;
            e.dataTransfer.setData('text/plain', e.target.dataset.type); // Mengirim tipe komponen
            e.dataTransfer.effectAllowed = 'copy'; // Menandakan bahwa ini adalah operasi copy
            setTimeout(() => {
                e.target.style.opacity = '0.5'; // Memberikan efek visual saat di-drag
            }, 0);
        });

        component.addEventListener('dragend', (e) => {
            e.target.style.opacity = '1';
            draggedItem = null;
        });
    });

    // Event listeners untuk main canvas (area drop)
    mainCanvas.addEventListener('dragover', (e) => {
        e.preventDefault(); // Mencegah default behavior (yang melarang drop)
        mainCanvas.classList.add('drag-over'); // Menambahkan kelas visual untuk umpan balik
        e.dataTransfer.dropEffect = 'copy';
    });

    mainCanvas.addEventListener('dragleave', () => {
        mainCanvas.classList.remove('drag-over');
    });

    mainCanvas.addEventListener('drop', (e) => {
        e.preventDefault();
        mainCanvas.classList.remove('drag-over');

        const componentType = e.dataTransfer.getData('text/plain');
        let newComponent;

        // Membuat elemen baru berdasarkan tipe komponen
        switch (componentType) {
            case 'text':
                newComponent = document.createElement('div');
                newComponent.classList.add('canvas-component', 'text-block');
                newComponent.setAttribute('contenteditable', 'true'); // Dapat diedit langsung
                newComponent.innerHTML = '<p>Klik untuk edit teks ini.</p>';
                break;
            case 'button':
                newComponent = document.createElement('div');
                newComponent.classList.add('canvas-component', 'button-block');
                const button = document.createElement('button');
                button.textContent = 'Klik Saya';
                newComponent.appendChild(button);
                newComponent.addEventListener('click', () => alert('Tombol diklik!'));
                break;
            case 'image':
                newComponent = document.createElement('div');
                newComponent.classList.add('canvas-component', 'image-block');
                const img = document.createElement('img');
                img.src = 'https://via.placeholder.com/150'; // Placeholder image
                img.alt = 'Placeholder Image';
                newComponent.appendChild(img);
                // Tambahkan fungsionalitas untuk ganti gambar (opsional, lebih kompleks)
                newComponent.addEventListener('dblclick', () => {
                    const newUrl = prompt('Masukkan URL gambar baru:', img.src);
                    if (newUrl) img.src = newUrl;
                });
                break;
            default:
                return;
        }

        // Menghapus placeholder "Seret komponen ke sini!" jika ada
        const placeholder = mainCanvas.querySelector('h3');
        if (placeholder && placeholder.textContent === 'Seret komponen ke sini!') {
            mainCanvas.innerHTML = ''; // Clear placeholder
            mainCanvas.style.justifyContent = 'flex-start'; // Atur ulang alignment
            mainCanvas.style.alignItems = 'flex-start';
        }

        mainCanvas.appendChild(newComponent); // Menambahkan komponen ke kanvas

        // Optional: Make components draggable within the canvas for reordering
        // newComponent.setAttribute('draggable', 'true');
        // newComponent.addEventListener('dragstart', (e) => { /* ... */ });
        // (This would add significant complexity for proper reordering logic)
    });
});

Inti dari fitur drag-and-drop ada pada empat event penting: `dragstart`, `dragover`, `dragleave`, dan `drop`.

• `dragstart`: Terpicu saat elemen mulai ditarik. Kita menyimpan tipe elemen dan memberikan efek visual.
• `dragover`: Terpicu saat elemen yang ditarik berada di atas zona target. `e.preventDefault()` sangat penting di sini untuk memungkinkan `drop` terjadi.
• `dragleave`: Terpicu saat elemen meninggalkan zona target.
• `drop`: Terpicu saat elemen dijatuhkan di zona target. Di sinilah kita membuat elemen DOM baru berdasarkan `data-type` yang kita simpan, dan menambahkannya ke `mainCanvas`.

Untuk `text-block`, kita menggunakan `contenteditable="true"` yang memungkinkan user mengedit teks secara langsung di browser. Untuk `image-block`, kita menambahkan fungsionalitas sederhana untuk mengganti URL gambar melalui `prompt()` saat di-double click. Ini adalah sentuhan kecil yang membuat builder kita lebih interaktif!

Tantangan dan Pembelajaran di Balik Layar

Membangun aplikasi seperti ini secara murni dengan HTML, CSS, dan JS memang penuh tantangan, tapi juga kaya akan pelajaran. Dulu, saya pernah merasa seperti pembalap F1 yang tiba-tiba harus merakit mesin mobilnya sendiri dari nol. Sulit, tapi setiap baut yang terpasang dengan benar memberikan pemahaman yang mendalam.

• Manajemen State (Kalkulator): Melacak input saat ini, operator sebelumnya, dan angka sebelumnya tanpa bantuan library manajemen state bisa jadi rumit. Kesalahan kecil bisa menghasilkan `NaN` (Not a Number) atau hasil yang tidak terduga.
• Keamanan `eval()` (Kalkulator): Meskipun `eval()` mudah digunakan untuk mengevaluasi ekspresi string, ia memiliki risiko keamanan besar jika inputnya tidak dikontrol dengan ketat. Untuk aplikasi yang lebih serius, selalu gunakan parser ekspresi atau logika perhitungan manual yang lebih aman.
• Logika Drag-and-Drop (Page Builder): Mengimplementasikan drag-and-drop yang mulus dan presisi memerlukan pemahaman mendalam tentang event `drag`, koordinat mouse, dan manipulasi DOM. Masalah umum adalah elemen "melompat" atau tidak jatuh di posisi yang diharapkan.
• Resizing dan Positioning (Page Builder Lanjutan): Untuk page builder yang lebih canggih, Anda mungkin ingin menambahkan fitur resizing, reordering, dan posisi absolut elemen. Ini akan memerlukan lebih banyak logika JavaScript untuk mengelola transformasi CSS.
• Persistensi Data: Bagaimana jika pengguna ingin menyimpan hasil kreasi di page builder atau riwayat perhitungan di kalkulator? Anda bisa menggunakan `localStorage` atau mengirim data ke server.

Melangkah Lebih Jauh: Potensi Tanpa Batas

Apa yang kita bangun hari ini hanyalah dasarnya. Ini seperti kita baru saja menyelesaikan pondasi dan kerangka sebuah rumah. Ada begitu banyak ruang untuk ekspansi:

• Kalkulator: Tambahkan fungsi ilmiah (sin, cos, log), memori, riwayat perhitungan, atau bahkan fitur konversi mata uang/satuan.
• Page Builder: Kembangkan lebih banyak jenis komponen (header, footer, video, peta), tambahkan fitur undo/redo, kemampuan untuk menyimpan dan memuat tata letak, atau bahkan mode pratinjau responsif. Anda juga bisa menambahkan panel pengaturan untuk setiap komponen, memungkinkan perubahan warna, font, ukuran, dan properti CSS lainnya.

Semua ini bisa dicapai dengan HTML, CSS, dan JavaScript murni. Kuncinya adalah terus belajar, bereksperimen, dan memecah masalah besar menjadi bagian-bagian yang lebih kecil dan mudah dikelola.

Penutup: Kekuatan Sederhana yang Dahsyat

Di era ketika framework JavaScript terus bermunculan dengan kecepatan cahaya, kembali ke dasar dengan HTML, CSS, dan JS murni adalah latihan yang berharga. Ini tidak hanya memperdalam pemahaman Anda tentang bagaimana web bekerja, tetapi juga memberi Anda kontrol penuh atas setiap piksel dan setiap baris kode. Ini seperti menjadi seorang maestro musik yang tidak hanya bisa memainkan alat musik, tapi juga memahami bagaimana setiap senar, kunci, dan nada berinteraksi membentuk sebuah simfoni.

Saya harap artikel ini telah menginspirasi Anda untuk tidak takut "kotor" dengan kode dasar dan merasakan kepuasan membangun sesuatu yang fungsional dan interaktif dari nol. Ambil tantangan ini, kembangkan ide-ide Anda, dan jangan ragu untuk berkreasi. Dunia web ada di tangan Anda!