Kadang-kadang, error itu datangnya tiba-tiba, kayak pas lagi asyik ngoding eh tiba-tiba browsernya hang gara-gara lupa `return` di fungsi JavaScript. Dulu banget, pas lagi bikin kalkulator sederhana, ada bug yang bikin hasilnya jadi aneh, misalnya 2+2 jadi 22. Pusing tujuh keliling! Ternyata gara-gara tipe data string dan number kecampur. Sejak saat itu, saya belajar bahwa setiap baris kode itu penting dan perlu diperhatikan detailnya. Nah, kali ini kita mau bikin sesuatu yang lebih seru: sebuah aplikasi web yang menggabungkan fungsi kalkulator canggih dengan kemudahan page builder. Bayangkan saja, kita lagi mau membangun rumah digital, dan kita butuh alat yang bisa ngitung materialnya (kalkulator) sekaligus alat buat menata ruangan dan mendesainnya (page builder). Seru kan? Yuk, kita mulai petualangan ngoding ini dengan HTML, CSS, dan JavaScript!
Fondasi Awal: Struktur HTML yang Kokoh
Kita mulai dari yang paling dasar, yaitu membangun kerangka aplikasi kita pakai HTML. Ibaratnya, ini adalah cetak biru bangunan kita.
Kalkulator: Jantung Perhitungan
Untuk kalkulator, kita butuh area input untuk angka dan tombol-tombol operator.
<div id="calculator">
<input type="text" id="display" disabled>
<div class="buttons">
<button data-value="7">7</button>
<button data-value="8">8</button>
<button data-value="9">9</button>
<button data-value="/">/</button>
<button data-value="4">4</button>
<button data-value="5">5</button>
<button data-value="6">6</button>
<button data-value="*">*</button>
<button data-value="1">1</button>
<button data-value="2">2</button>
<button data-value="3">3</button>
<button data-value="-">-</button>
<button data-value="0">0</button>
<button data-value=".">.</button>
<button data-value="+">+</button>
<button data-value="=">=</button>
<button data-value="C">C</button>
<button data-value="AC">AC</button>
</div>
</div>
Page Builder: Kanvas Kreativitas
Untuk page builder, kita butuh area di mana pengguna bisa menata elemen-elemen visual. Ini bisa berupa kanvas drag-and-drop atau area penambahan konten.
<div id="page-builder">
<div id="toolbar">
<button class="add-element" data-type="heading">Add Heading</button>
<button class="add-element" data-type="paragraph">Add Paragraph</button>
<button class="add-element" data-type="image">Add Image</button>
<button id="save-page">Save Page</button>
</div>
<div id="canvas">
<!-- Elemen-elemen page akan ditambahkan di sini -->
</div>
</div>
Sentuhan Visual: CSS untuk Tampilan Menawan
HTML memberikan struktur, sekarang giliran CSS yang memberikan gaya. Kita ingin aplikasi kita terlihat profesional dan ramah pengguna.
body {
font-family: 'Arial', sans-serif;
margin: 20px;
background-color: #f4f4f4;
}
#calculator {
width: 300px;
margin: 50px auto;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
background-color: #fff;
border-radius: 8px;
overflow: hidden;
}
#display {
width: calc(100% - 20px);
padding: 10px;
font-size: 2em;
text-align: right;
border: none;
background-color: #e0e0e0;
margin-bottom: 10px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
}
.buttons button {
padding: 20px;
font-size: 1.2em;
border: none;
background-color: #f9f9f9;
cursor: pointer;
transition: background-color 0.3s ease;
}
.buttons button:hover {
background-color: #ddd;
}
#page-builder {
margin-top: 50px;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 8px;
padding: 20px;
}
#toolbar {
margin-bottom: 20px;
text-align: center;
}
#toolbar button {
padding: 10px 15px;
margin: 0 5px;
border: 1px solid #007bff;
background-color: #007bff;
color: white;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
#toolbar button:hover {
background-color: #0056b3;
border-color: #0056b3;
}
#canvas {
min-height: 300px;
border: 2px dashed #aaa;
padding: 15px;
border-radius: 5px;
}
.page-element {
margin-bottom: 15px;
padding: 10px;
border: 1px solid #eee;
background-color: #fefefe;
border-radius: 4px;
cursor: grab; /* Untuk indikasi drag */
}
.page-element h2, .page-element p, .page-element img {
margin: 0;
}
Otak Aplikasi: JavaScript yang Membuat Semuanya Hidup
Ini adalah bagian paling krusial, di mana kita akan menghidupkan kalkulator dan page builder kita. Ibaratnya, kalau kodingan itu ibarat masak, JavaScript ini adalah bumbu rahasia dan teknik memasak yang bikin masakan kita jadi lezat dan berkesan.
Logika Kalkulator: Menghitung Tanpa Batas
Kita perlu fungsi untuk menangani input pengguna, melakukan perhitungan, dan menampilkan hasilnya.
const display = document.getElementById('display');
const buttons = document.querySelectorAll('.buttons button');
let currentInput = '';
let operator = null;
let previousInput = '';
buttons.forEach(button => {
button.addEventListener('click', () => {
const { value } = button.dataset;
if (value === 'C') {
currentInput = '';
display.value = '';
} else if (value === 'AC') {
currentInput = '';
operator = null;
previousInput = '';
display.value = '';
} else if (value === '+' || value === '-' || value === '*' || value === '/') {
if (currentInput === '') return; // Jangan proses jika input kosong
if (previousInput !== '') {
previousInput = evaluate(); // Hitung dulu jika sudah ada operator sebelumnya
} else {
previousInput = currentInput;
}
operator = value;
currentInput = '';
display.value = previousInput + operator; // Tampilkan operator untuk user feedback
} else if (value === '=') {
if (operator === null || currentInput === '') return; // Jangan proses jika tidak ada operator atau input
display.value = evaluate();
operator = null; // Reset operator setelah perhitungan selesai
currentInput = display.value; // Hasil perhitungan jadi input selanjutnya
previousInput = ''; // Reset previous input
} else {
currentInput += value;
display.value = currentInput;
}
});
});
function evaluate() {
const prev = parseFloat(previousInput);
const current = parseFloat(currentInput);
if (isNaN(prev) || isNaN(current)) return '';
let result = 0;
switch (operator) {
case '+':
result = prev + current;
break;
case '-':
result = prev - current;
break;
case '*':
result = prev * current;
break;
case '/':
if (current === 0) {
alert("Tidak bisa membagi dengan nol!");
return ''; // Handle division by zero
}
result = prev / current;
break;
default:
return '';
}
return result.toString();
}
Fungsionalitas Page Builder: Membangun dan Menyusun Konten
Di sini, kita akan membuat tombol-tombol di toolbar bisa menambahkan elemen ke kanvas, dan membuat elemen tersebut bisa diatur (misalnya drag-and-drop).
const canvas = document.getElementById('canvas');
const toolbar = document.getElementById('toolbar');
const savePageButton = document.getElementById('save-page');
let elementCounter = 0;
toolbar.addEventListener('click', (event) => {
if (event.target.classList.contains('add-element')) {
const elementType = event.target.dataset.type;
createElement(elementType);
}
});
function createElement(type) {
elementCounter++;
let newElement;
const elementId = `element-${elementCounter}`;
switch (type) {
case 'heading':
newElement = document.createElement('h2');
newElement.textContent = 'New Heading';
break;
case 'paragraph':
newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph. You can edit this text.';
break;
case 'image':
newElement = document.createElement('img');
newElement.src = 'https://via.placeholder.com/150'; // Placeholder image
newElement.alt = 'Placeholder Image';
break;
default:
return;
}
newElement.classList.add('page-element');
newElement.id = elementId;
// Buat elemen bisa diedit
if (newElement.tagName === 'H2' || newElement.tagName === 'P') {
newElement.setAttribute('contenteditable', 'true');
}
canvas.appendChild(newElement);
makeElementDraggable(newElement); // Tambahkan fungsionalitas drag setelah elemen dibuat
}
// Fungsionalitas Drag and Drop
let draggedItem = null;
function makeElementDraggable(element) {
element.addEventListener('dragstart', (e) => {
draggedItem = element;
setTimeout(() => element.style.visibility = 'hidden', 0); // Sembunyikan sementara
});
element.addEventListener('dragend', () => {
setTimeout(() => {
if (draggedItem) draggedItem.style.visibility = 'visible';
draggedItem = null;
}, 0);
});
canvas.addEventListener('dragover', (e) => {
e.preventDefault(); // Penting untuk mengizinkan drop
});
canvas.addEventListener('drop', (e) => {
e.preventDefault();
if (draggedItem) {
canvas.insertBefore(draggedItem, e.target === canvas ? null : e.target); // Sisipkan elemen sebelum target, atau di akhir jika target adalah canvas itu sendiri
}
});
}
// Implementasi Save Page (contoh sederhana)
savePageButton.addEventListener('click', () => {
// Di sini Anda bisa mengumpulkan semua konten dari canvas
// dan menyimpannya, misalnya ke localStorage atau mengirim ke server.
alert("Page saved (simulated)!");
const pageContent = canvas.innerHTML;
console.log("Page content:", pageContent);
});
Penutup: Evolusi Tak Berujung
Membuat kalkulator dan page builder dari nol adalah sebuah perjalanan yang sangat mengedukasi. Kita telah melihat bagaimana HTML memberikan struktur, CSS memberikan keindahan, dan JavaScript memberikan kehidupan pada aplikasi kita. Ini baru permulaan! Anda bisa menambahkan fitur-fitur keren lainnya, seperti menyimpan tata letak page builder, kustomisasi font dan warna, menambahkan lebih banyak jenis elemen, atau bahkan membuat kalkulator dengan fungsi-fungsi ilmiah. Kunci dari pemrograman adalah terus bereksperimen dan belajar. Selamat ngoding, dan jangan takut untuk mencoba hal-hal baru!
