Membangun Kalkulator dan Page Builder Interaktif dengan HTML, CSS, dan JavaScript Murni

ikramlink • Maret 26, 2026
Membangun Kalkulator dan Page Builder Interaktif dengan HTML, CSS, dan JavaScript Murni

Halo para pembaca setia dan calon web developer! Sebagai seorang tech-blogger dan programmer profesional, saya tahu betul betapa pentingnya fondasi yang kuat dalam pengembangan web. Di era di mana framework dan library mendominasi, terkadang kita lupa kekuatan sebenarnya dari tiga serangkai ajaib: HTML, CSS, dan JavaScript murni. Hari ini, kita akan menyelami lautan kode untuk membangun dua aplikasi web yang menarik dan fungsional: sebuah Kalkulator interaktif dan sebuah Page Builder sederhana menggunakan Vanilla JS.

Proyek ini tidak hanya akan memperkuat pemahaman Anda tentang DOM (Document Object Model) manipulation, event handling, dan styling responsif, tetapi juga akan menunjukkan betapa powerful-nya HTML, CSS, dan JavaScript murni untuk menciptakan pengalaman pengguna yang dinamis tanpa ketergantungan pada alat pihak ketiga yang kompleks. Baik Anda seorang pemula yang ingin memahami dasar-dasar atau pengembang berpengalaman yang ingin menyegarkan ingatan, tutorial ini dirancang untuk Anda.

Kita akan memulai perjalanan kita dengan kalkulator, sebuah aplikasi yang tampaknya sederhana namun penuh dengan tantangan logika. Setelah itu, kita akan melangkah lebih jauh dengan membangun sebuah page builder, yang akan memperkenalkan Anda pada konsep drag-and-drop dan manajemen konten dinamis. Siapkan editor kode favorit Anda, mari kita mulai!

Bagian 1: Membangun Aplikasi Web Kalkulator

Kalkulator adalah proyek klasik untuk melatih logika pemrograman dan interaksi UI. Aplikasi ini akan menguji kemampuan kita dalam mengelola input pengguna, melakukan operasi matematika, dan memperbarui antarmuka secara real-time. Ini adalah latihan yang sangat baik untuk memahami bagaimana JavaScript berinteraksi dengan elemen HTML dan CSS.

1.1 Struktur HTML untuk Kalkulator (index.html)

Pertama, kita akan menyiapkan struktur dasar HTML untuk kalkulator kita. Kita akan menggunakan elemen div untuk mengelompokkan tampilan kalkulator dan tombol-tombolnya. Pastikan untuk menghubungkan file CSS dan JavaScript Anda.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalkulator & Page Builder Interaktif</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>Kalkulator Web & Page Builder dengan HTML, CSS, JS</h1>

    <!-- Kalkulator Section -->
    <section class="calculator-section">
        <h2>Kalkulator Interaktif</h2>
        <div class="calculator">
            <div class="display">0</div>
            <div class="buttons">
                <button class="clear operator">AC</button>
                <button class="negative operator">+/-</button>
                <button class="percent operator">%</button>
                <button class="divide operator">&divide;</button>

                <button class="number">7</button>
                <button class="number">8</button>
                <button class="number">9</button>
                <button class="multiply operator">&times;</button>

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

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

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

    <!-- Page Builder Section (akan ditambahkan nanti) -->
    <section class="page-builder-section" style="margin-top: 50px;">
        <h2>Page Builder Sederhana</h2>
        <!-- Konten page builder akan ada di sini -->
    </section>

    <script src="script.js"></script>
</body>
</html>

Perhatikan penggunaan kelas yang berbeda untuk tombol angka, operator, dan tombol khusus seperti "AC" atau "=". Ini akan memudahkan kita dalam menargetkan elemen-elemen ini dengan JavaScript dan CSS.

1.2 Styling CSS untuk Kalkulator (style.css)

Selanjutnya, mari kita berikan sentuhan visual pada kalkulator kita agar terlihat profesional dan mudah digunakan. Kita akan menggunakan Flexbox untuk tata letak tombol, yang sangat efektif untuk desain responsif.

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(to right, #ece9e6, #ffffff);
    margin: 0;
    padding: 20px;
    color: #333;
}

h1 {
    color: #0056b3;
    margin-bottom: 40px;
    text-align: center;
}

h2 {
    color: #007bff;
    margin-top: 30px;
    margin-bottom: 20px;
}

/* Kalkulator Styling */
.calculator-section {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    margin-bottom: 40px;
    text-align: center;
}

.calculator {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    padding: 20px;
    border-radius: 10px;
    background: #f7f7f7;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
}

.display {
    grid-column: 1 / -1;
    background-color: #222;
    color: #fff;
    font-size: 3em;
    padding: 20px;
    text-align: right;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.calculator button {
    width: 100%;
    padding: 20px;
    font-size: 1.5em;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.calculator button:hover {
    transform: translateY(-2px);
}

.calculator button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.number, .decimal {
    background-color: #e0e0e0;
    color: #333;
}

.number:hover, .decimal:hover {
    background-color: #d1d1d1;
}

.operator {
    background-color: #007bff;
    color: #fff;
}

.operator:hover {
    background-color: #0056b3;
}

.equals {
    background-color: #28a745;
}

.equals:hover {
    background-color: #218838;
}

.zero {
    grid-column: span 2;
}

/* Page Builder Styling (placeholder) */
.page-builder-section {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 900px; /* Lebar lebih besar untuk page builder */
    box-sizing: border-box;
    margin-top: 40px;
    text-align: center;
}

Dalam CSS ini, kita menggunakan grid untuk tata letak tombol kalkulator. Ini memungkinkan kita untuk dengan mudah membuat tata letak 4x5 yang responsif. Display kalkulator diberikan latar belakang gelap dan ukuran font yang besar agar mudah dibaca. Setiap tombol juga memiliki efek hover dan active untuk memberikan umpan balik visual kepada pengguna.

1.3 Logika JavaScript untuk Kalkulator (script.js)

Inilah bagian paling menarik: memberikan "otak" pada kalkulator kita. Kita akan menggunakan JavaScript murni untuk menangani klik tombol, mengelola state kalkulator, dan melakukan perhitungan. Ini adalah inti dari proyek kita dalam membangun aplikasi web interaktif.

const calculator = document.querySelector('.calculator');
const display = calculator.querySelector('.display');
const buttons = calculator.querySelector('.buttons');

let firstOperand = null;
let secondOperand = null;
let operator = null;
let waitForSecondOperand = false;
let displayValue = '0';

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

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

function inputDecimal() {
    if (waitForSecondOperand) {
        displayValue = '0.';
        waitForSecondOperand = false;
        updateDisplay();
        return;
    }
    if (!displayValue.includes('.')) {
        displayValue += '.';
    }
    updateDisplay();
}

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

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

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

    waitForSecondOperand = true;
    operator = nextOperator;
    updateDisplay();
}

function operate(num1, num2, op) {
    if (op === '+') return num1 + num2;
    if (op === '-') return num1 - num2;
    if (op === '×') return num1 * num2;
    if (op === '÷') {
        if (num2 === 0) {
            alert("Tidak bisa dibagi nol!");
            return 'Error';
        }
        return num1 / num2;
    }
    if (op === '%') return num1 / 100; // Simplified for basic percentage
    return num2; // Default for negative/positive or initial state
}

function resetCalculator() {
    firstOperand = null;
    secondOperand = null;
    operator = null;
    waitForSecondOperand = false;
    displayValue = '0';
    updateDisplay();
}

function toggleNegative() {
    displayValue = String(parseFloat(displayValue) * -1);
    updateDisplay();
}

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

    if (target.classList.contains('number')) {
        inputDigit(target.textContent);
        return;
    }

    if (target.classList.contains('decimal')) {
        inputDecimal();
        return;
    }

    if (target.classList.contains('operator')) {
        if (target.textContent === 'AC') {
            resetCalculator();
            return;
        }
        if (target.textContent === '+/-') {
            toggleNegative();
            return;
        }
        if (target.textContent === '%') {
             // Handle percentage operation, convert current display to percentage
            displayValue = String(parseFloat(displayValue) / 100);
            updateDisplay();
            return;
        }
        handleOperator(target.textContent);
        return;
    }
});

updateDisplay(); // Initialize display on load

// Bagian Page Builder (akan ditambahkan di bawah ini)

Kode JavaScript ini menangani beberapa state penting: firstOperand (angka pertama), secondOperand (angka kedua yang belum dihitung), operator (operasi matematika), dan waitForSecondOperand (flag untuk menentukan apakah input berikutnya adalah bagian dari operand kedua). Kita menggunakan event listener pada container tombol untuk mendeteksi tombol mana yang diklik, lalu mengarahkan ke fungsi yang sesuai. Fungsi operate menangani logika perhitungan dasar, termasuk penanganan pembagian dengan nol.

Bagian 2: Membangun Aplikasi Web Page Builder Sederhana

Sekarang kita akan meningkatkan level dengan membangun sebuah page builder sederhana. Proyek ini akan memperkenalkan kita pada konsep drag-and-drop, manipulasi DOM yang lebih kompleks, dan bagaimana membuat elemen-elemen web dapat diatur secara dinamis oleh pengguna. Ini adalah demonstrasi yang sangat baik tentang kekuatan frontend development murni.

2.1 Struktur HTML untuk Page Builder (index.html)

Kita akan menambahkan panel alat (toolbar) dengan elemen-elemen yang bisa di-drag, dan area kanvas tempat elemen-elemen tersebut akan dijatuhkan.

<!-- ... (HTML Kalkulator di atas) ... -->

    <!-- Page Builder Section -->
    <section class="page-builder-section">
        <h2>Page Builder Sederhana</h2>
        <div class="page-builder-container">
            <div class="toolbox">
                <h3>Elemen</h3>
                <div class="draggable-item" draggable="true" data-type="text">Teks</div>
                <div class="draggable-item" draggable="true" data-type="image">Gambar</div>
                <div class="draggable-item" draggable="true" data-type="button">Tombol</div>
                <div class="draggable-item" draggable="true" data-type="section">Seksi</div>
            </div>
            <div class="canvas">
                <h3>Jatuhkan Elemen di Sini</h3>
            </div>
        </div>
    </section>

    <script src="script.js"></script>
</body>
</html>

Di sini, kita memiliki toolbox yang berisi elemen-elemen yang dapat di-drag. Atribut draggable="true" sangat penting untuk mengaktifkan fungsionalitas drag-and-drop pada elemen-elemen ini. Kita juga menambahkan atribut data-type untuk mengidentifikasi jenis elemen saat dijatuhkan. canvas adalah area tempat elemen akan dijatuhkan.

2.2 Styling CSS untuk Page Builder (style.css)

Kita perlu menambahkan styling untuk toolbox, elemen-elemen yang bisa di-drag, dan area kanvas agar terlihat seperti sebuah page builder yang berfungsi.

/* ... (CSS Kalkulator di atas) ... */

/* Page Builder Styling */
.page-builder-section {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 1000px;
    box-sizing: border-box;
    margin-top: 40px;
    text-align: center;
}

.page-builder-container {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap; /* Untuk responsif pada layar kecil */
    justify-content: center;
}

.toolbox {
    flex: 0 0 200px; /* Lebar tetap untuk toolbox */
    background-color: #f0f8ff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.05);
    min-height: 400px;
    text-align: left;
}

.toolbox h3 {
    color: #007bff;
    margin-top: 0;
    margin-bottom: 20px;
}

.draggable-item {
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    cursor: grab;
    transition: background-color 0.2s, transform 0.1s;
    text-align: center;
    user-select: none; /* Mencegah teks terpilih saat drag */
}

.draggable-item:hover {
    background-color: #bae7ff;
    transform: translateY(-2px);
}

.draggable-item:active {
    cursor: grabbing;
    transform: translateY(0);
}

.canvas {
    flex: 1; /* Kanvas mengambil sisa ruang */
    min-width: 400px; /* Lebar minimum kanvas */
    background-color: #fcfcfc;
    border: 2px dashed #ccc;
    border-radius: 10px;
    min-height: 400px;
    padding: 20px;
    text-align: center;
    position: relative;
}

.canvas.drag-over {
    border-color: #007bff;
    background-color: #e0f2fe;
}

.canvas-element {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    text-align: left;
    min-height: 50px;
    position: relative; /* Untuk positioning kontrol */
}

.canvas-element p {
    margin: 0;
    line-height: 1.5;
}

.canvas-element img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.canvas-element button {
    background-color: #28a745;
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

.canvas-element button:hover {
    background-color: #218838;
}

.canvas-element.selected {
    border: 2px solid #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 0.8em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.canvas-element.selected .delete-btn {
    opacity: 1;
    pointer-events: all;
}

Kita menggunakan Flexbox untuk mengatur toolbox dan canvas agar bersebelahan. Elemen-elemen yang bisa di-drag diberikan gaya visual yang jelas, dan canvas memiliki border putus-putus untuk menandakan area drop. Kelas drag-over akan ditambahkan secara dinamis oleh JavaScript ketika ada elemen yang di-drag di atas kanvas.

2.3 Logika JavaScript untuk Page Builder (script.js)

Bagian ini adalah jantung dari page builder kita. Kita akan mengimplementasikan fungsionalitas drag-and-drop, membuat elemen-elemen baru di kanvas, dan memungkinkan sedikit interaksi dengan elemen yang dijatuhkan.

/* ... (JavaScript Kalkulator di atas) ... */

// Bagian Page Builder JavaScript
const draggableItems = document.querySelectorAll('.draggable-item');
const canvas = document.querySelector('.canvas');

let draggedItem = null;

draggableItems.forEach(item => {
    item.addEventListener('dragstart', (e) => {
        draggedItem = e.target;
        e.dataTransfer.setData('text/plain', e.target.dataset.type); // Menyimpan tipe elemen
        e.dataTransfer.effectAllowed = 'copy'; // Menunjukkan bahwa item akan disalin
        setTimeout(() => {
            e.target.style.opacity = '0.5'; // Memberi efek visual saat drag
        }, 0);
    });

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

canvas.addEventListener('dragover', (e) => {
    e.preventDefault(); // Mencegah perilaku default (yang tidak memungkinkan drop)
    canvas.classList.add('drag-over'); // Visual feedback
    e.dataTransfer.dropEffect = 'copy';
});

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

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

    const dataType = e.dataTransfer.getData('text/plain');
    const newElement = createPageElement(dataType);

    if (newElement) {
        // Hapus teks placeholder "Jatuhkan Elemen di Sini" jika ada
        const placeholder = canvas.querySelector('h3');
        if (placeholder && placeholder.textContent === 'Jatuhkan Elemen di Sini') {
            placeholder.remove();
        }
        canvas.appendChild(newElement);
    }
});

function createPageElement(type) {
    const elementContainer = document.createElement('div');
    elementContainer.classList.add('canvas-element');
    elementContainer.setAttribute('tabindex', '0'); // Membuat elemen bisa di-fokus

    const deleteButton = document.createElement('button');
    deleteButton.classList.add('delete-btn');
    deleteButton.textContent = 'x';
    deleteButton.onclick = (e) => {
        e.stopPropagation(); // Mencegah event seleksi parent
        elementContainer.remove();
        deselectElements();
    };
    elementContainer.appendChild(deleteButton);

    switch (type) {
        case 'text':
            const textContent = document.createElement('p');
            textContent.contentEditable = true; // Membuat teks bisa diedit
            textContent.textContent = 'Ketik teks Anda di sini.';
            elementContainer.appendChild(textContent);
            break;
        case 'image':
            const img = document.createElement('img');
            img.src = 'https://via.placeholder.com/150'; // Placeholder image
            img.alt = 'Placeholder Image';
            elementContainer.appendChild(img);
            const imageHelp = document.createElement('small');
            imageHelp.textContent = 'Klik untuk edit URL gambar';
            imageHelp.style.display = 'block';
            imageHelp.style.marginTop = '5px';
            imageHelp.style.fontSize = '0.8em';
            elementContainer.appendChild(imageHelp);
            // Tambahkan fungsionalitas edit URL gambar sederhana
            elementContainer.addEventListener('click', (e) => {
                if (e.target === elementContainer || e.target === img || e.target === imageHelp) {
                    const newUrl = prompt('Masukkan URL gambar baru:', img.src);
                    if (newUrl) {
                        img.src = newUrl;
                    }
                }
            });
            break;
        case 'button':
            const btn = document.createElement('button');
            btn.textContent = 'Klik Saya';
            btn.contentEditable = true;
            elementContainer.appendChild(btn);
            break;
        case 'section':
            const sectionDiv = document.createElement('div');
            sectionDiv.style.minHeight = '100px';
            sectionDiv.style.border = '1px dashed #a0a0a0';
            sectionDiv.style.backgroundColor = '#f8f8f8';
            sectionDiv.style.padding = '10px';
            sectionDiv.textContent = 'Drop elemen lain di dalam seksi ini';
            sectionDiv.classList.add('nested-section'); // Untuk identifikasi lebih lanjut
            elementContainer.appendChild(sectionDiv);
            // Membuat sectionDiv juga bisa jadi drop target
            sectionDiv.addEventListener('dragover', (e) => {
                e.preventDefault();
                sectionDiv.style.borderColor = '#007bff';
                sectionDiv.style.backgroundColor = '#e0f2fe';
                e.dataTransfer.dropEffect = 'copy';
            });
            sectionDiv.addEventListener('dragleave', () => {
                sectionDiv.style.borderColor = '#a0a0a0';
                sectionDiv.style.backgroundColor = '#f8f8f8';
            });
            sectionDiv.addEventListener('drop', (e) => {
                e.preventDefault();
                sectionDiv.style.borderColor = '#a0a0a0';
                sectionDiv.style.backgroundColor = '#f8f8f8';

                const nestedDataType = e.dataTransfer.getData('text/plain');
                const nestedElement = createPageElement(nestedDataType);
                if (nestedElement) {
                    sectionDiv.appendChild(nestedElement);
                    // Hapus teks placeholder sectionDiv jika ada
                    if (sectionDiv.textContent === 'Drop elemen lain di dalam seksi ini') {
                        sectionDiv.textContent = '';
                    }
                }
            });
            break;
        default:
            return null;
    }

    elementContainer.addEventListener('click', (e) => {
        deselectElements();
        elementContainer.classList.add('selected');
        e.stopPropagation(); // Mencegah event klik canvas
    });

    return elementContainer;
}

function deselectElements() {
    document.querySelectorAll('.canvas-element.selected').forEach(el => {
        el.classList.remove('selected');
    });
}

// Menangani klik di luar elemen untuk deseleksi
document.addEventListener('click', (e) => {
    if (!e.target.closest('.canvas-element') && e.target !== canvas) {
        deselectElements();
    }
});

// Implementasi drag-and-drop untuk reorder (opsional, lebih kompleks)
// Untuk tujuan tutorial ini, kita fokus pada drop baru.

Dalam JavaScript ini, kita pertama-tama menambahkan event listener untuk dragstart dan dragend pada setiap elemen yang bisa di-drag. Saat dragstart, kita menyimpan tipe elemen menggunakan dataTransfer.setData(). Kemudian, pada kanvas, kita menambahkan event listener untuk dragover, dragleave, dan drop.

  • dragover: Mencegah perilaku default browser dan memberikan umpan balik visual (misalnya, mengubah border kanvas).
  • dragleave: Menghapus umpan balik visual.
  • drop: Mengambil data tipe elemen dari dataTransfer.getData(), lalu memanggil fungsi createPageElement() untuk membuat elemen HTML yang sesuai dan menambahkannya ke kanvas.

Fungsi createPageElement adalah inti dari pembuatan elemen dinamis. Berdasarkan tipe elemen yang dijatuhkan, ia akan membuat elemen HTML yang berbeda (p untuk teks, img untuk gambar, button untuk tombol, div untuk seksi). Untuk elemen teks dan tombol, kita menambahkan atribut contentEditable="true" agar pengguna bisa langsung mengedit isinya. Kita juga menambahkan tombol delete sederhana yang muncul saat elemen dipilih.

Untuk bagian page builder ini, kami telah menyertakan fitur seleksi elemen dengan kelas .selected dan tombol hapus, serta kemampuan untuk mengedit teks atau URL gambar. Bahkan, kita membuat elemen 'Section' bisa menjadi drop target untuk elemen lain, menciptakan struktur bersarang!

Tips Tambahan untuk SEO dan Pengembangan

  • Semantik HTML: Selalu gunakan elemen HTML yang paling sesuai dengan konten Anda. Ini membantu SEO dan aksesibilitas.
  • Optimasi CSS: Gabungkan dan minimalkan file CSS Anda untuk waktu muat yang lebih cepat. Gunakan properti seperti display: flex atau display: grid untuk tata letak yang efisien dan responsif.
  • Vanilla JS Performance: Saat bekerja dengan DOM manipulation dalam skala besar (seperti pada page builder), pertimbangkan untuk melakukan operasi DOM secara batch atau menggunakan DocumentFragment untuk performa yang lebih baik. Hindari manipulasi DOM dalam loop yang intensif.
  • Responsivitas: Pastikan aplikasi Anda terlihat bagus di berbagai ukuran layar. Gunakan media queries di CSS dan desain tata letak yang fleksibel.
  • Aksesibilitas: Tambahkan atribut alt pada gambar, pastikan elemen interaktif memiliki fokus keyboard (tabindex), dan pertimbangkan penggunaan atribut ARIA.
  • Keyword Targeting: Dalam blog post dan komentar kode Anda, gunakan kata kunci yang relevan seperti "HTML CSS JavaScript tutorial", "frontend development", "aplikasi web interaktif", "drag and drop JavaScript", dan "DOM manipulation" secara alami.

Kesimpulan

Selamat! Anda baru saja berhasil membangun dua aplikasi web yang mengesankan—sebuah kalkulator fungsional dan sebuah page builder interaktif—menggunakan hanya HTML, CSS, dan JavaScript murni. Ini adalah pencapaian besar yang menunjukkan bahwa Anda memiliki pemahaman yang kuat tentang fondasi web development.

Proyek ini menggarisbawahi kekuatan JavaScript dalam mengontrol DOM dan merespons interaksi pengguna, fleksibilitas CSS untuk desain responsif, dan struktur kokoh yang disediakan oleh HTML. Dengan dasar ini, Anda siap untuk menjelajahi konsep yang lebih kompleks, framework, dan library yang dibangun di atas prinsip-prinsip yang sama.

Jangan berhenti di sini! Ada banyak cara untuk mengembangkan proyek ini lebih lanjut:

  • Kalkulator: Tambahkan fitur memori, riwayat perhitungan, atau fungsi ilmiah.
  • Page Builder: Kembangkan panel properti untuk mengedit warna, ukuran font, margin, dan padding elemen. Tambahkan lebih banyak jenis elemen (video, ikon, dll.). Implementasikan fitur save/load untuk layout yang dibuat.

Eksplorasi adalah kunci dalam pemrograman. Teruslah bereksperimen, membangun, dan belajar. Jika Anda memiliki pertanyaan atau ingin membagikan kreasi Anda, jangan ragu untuk meninggalkan komentar di bawah. Sampai jumpa di tutorial berikutnya!

HTML CSS JavaScript Web Development