- The Stalin
- Posts
- Tutorial membuat kalkulator pada Javascript untuk pemula: Javascript beginner project episode 1 (1)
Tutorial membuat kalkulator pada Javascript untuk pemula: Javascript beginner project episode 1 (1)
Series proyek Javascript pemula
Zuhruf Fitra
June 24, 2024
Pernahkah Anda membayangkan bagaimana rasanya membuat alat yang Anda gunakan sehari-hari? Hari ini, kita akan menjelajahi dunia pemrograman dengan membuat kalkulator sederhana menggunakan JavaScript. Proyek ini tidak hanya akan mengasah keterampilan coding Anda, tetapi juga memberikan pemahaman mendalam tentang bagaimana logika matematika diterapkan dalam pemrograman. Baik tidak usah berlama-lama, langsung kita masuk ke langkah-langkahnya.
Pertama buat file HTML baru dengan nama "index.html" dan masukkan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="calculator">
<div class="top">
<section class="screen">
<div class="input"></div>
<div class="result"></div>
</section>
</div>
<div class="bottom">
<section class="keys">
<div class="column">
<span data-key="7">7</span>
<span data-key="4">4</span>
<span data-key="1">1</span>
<span data-key=".">.</span>
</div>
<div class="column">
<span data-key="8">8</span>
<span data-key="5">5</span>
<span data-key="2">2</span>
<span data-key="0">0</span>
</div>
<div class="column">
<span data-key="9">9</span>
<span data-key="6">6</span>
<span data-key="3">3</span>
<span class="equals-to" data-key="=">=</span>
</div>
</section>
<section class="operators">
<span class="delete">del</span>
<span data-key="÷">÷</span>
<span data-key="x">x</span>
<span data-key="-">-</span>
<span data-key="+">+</span>
</section>
</div>
</main>
<script src="main.js"></script>
</body>
</html>Struktur HTML ini membentuk kerangka dasar kalkulator kita, dengan area untuk menampilkan input dan hasil, serta tombol-tombol kalkulator.
Lalu buat file JavaScript baru dengan nama "main.js". Mulailah dengan mengetik "use strict" di baris pertama, lalu tambahkan kode berikut:
"use strict";
const input = document.querySelector(".input");
const result = document.querySelector(".result");
const deleteBtn = document.querySelector(".delete");
const keys = document.querySelectorAll(".bottom span");
let operation = "";
let answer;
let decimalAdded = false;
const operators = ["+", "-", "x", "÷"];Kode ini menginisialisasi variabel-variabel penting. Kita memilih elemen-elemen HTML yang diperlukan dan menetapkan beberapa variabel untuk melacak operasi dan status kalkulator.
Fungsi handleKeyPress: Tambahkan fungsi berikut di bawah kode sebelumnya
function handleKeyPress(e) {
const key = e.target.dataset.key;
const lastChar = operation[operation.length - 1];
if (key === "=") {
return;
}
if (key === "." && decimalAdded) {
return;
}
if (operators.indexOf(key) !== -1) {
decimalAdded = false;
}
if (operation.length === 0 && key === "-") {
operation += key;
input.innerHTML = operation;
return;
}
if (operation.length === 0 && operators.indexOf(key) !== -1) {
input.innerHTML = operation;
return;
}
if (operators.indexOf(lastChar) !== -1 && operators.indexOf(key) !== -1) {
operation = operation.replace(/.$/, key);
input.innerHTML = operation;
return;
}
if (key) {
if (key === ".") decimalAdded = true;
operation += key;
input.innerHTML = operation;
return;
}
}Fungsi ini menangani input setiap kali tombol ditekan. Ini mencakup logika untuk menangani angka, operator, dan kasus khusus seperti desimal ganda atau operator di awal input.
Tambahkan fungsi evaluate di bawah fungsi handleKeyPress:
function evaluate(e) {
const key = e.target.dataset.key;
const lastChar = operation[operation.length - 1];
if (key === "=" && operators.indexOf(lastChar) !== -1) {
operation = operation.slice(0, -1);
}
if (operation.length === 0) {
answer = "";
result.innerHTML = answer;
return;
}
try {
if (operation[0] === "0" && operation[1] !== "." && operation.length > 1) {
operation = operation.slice(1);
}
const final = operation.replace(/x/g, "*").replace(/÷/g, "/");
answer = +(eval(final)).toFixed(5);
if (key === "=") {
decimalAdded = false;
operation = `${answer}`;
answer = "";
input.innerHTML = operation;
result.innerHTML = answer;
return;
}
result.innerHTML = answer;
} catch (e) {
if (key === "=") {
decimalAdded = false;
input.innerHTML = `<span class="error">${operation}</span>`;
result.innerHTML = `<span class="error">Bad Expression</span>`;
}
console.log(e);
}
}Fungsi ini mengevaluasi ekspresi matematika yang dimasukkan. Ini mengkonversi operator, menghitung hasil, dan menangani kesalahan jika ada.
Tambahkan fungsi clearInput di bawah fungsi evaluate
function clearInput(e) {
if (e.ctrlKey) {
operation = "";
answer = "";
input.innerHTML = operation;
result.innerHTML = answer;
return;
}
operation = operation.slice(0, -1);
input.innerHTML = operation;
}Fungsi ini menangani penghapusan input, baik menghapus seluruh input (jika Ctrl ditekan) atau hanya karakter terakhir.
Terakhir, tambahkan event listeners di bagian bawah file JavaScript:
deleteBtn.addEventListener("click", clearInput);
keys.forEach(key => {
key.addEventListener("click", handleKeyPress);
key.addEventListener("click", evaluate);
});Kode ini menambahkan event listeners ke tombol-tombol kalkulator. Ini memastikan bahwa fungsi yang tepat dipanggil ketika tombol ditekan.
Selamat! Anda telah berhasil membuat kalkulator JavaScript Anda sendiri. Proyek ini mungkin tampak sederhana, tetapi ia mencakup banyak konsep penting dalam pemrograman web: manipulasi DOM, penanganan event, dan logika kondisional. Ingatlah bahwa setiap aplikasi besar dimulai dari langkah-langkah kecil seperti ini. Teruslah berlatih dan jangan ragu untuk menambahkan fitur baru pada kalkulator Anda. Mungkin Anda ingin menambahkan fungsi trigonometri atau kemampuan untuk menghitung persentase? Dunia pemrograman penuh dengan kemungkinan, dan Anda baru saja membuka pintunya!
Reply