Membuat Aplikasi Calculator sederhana dengan JavaScript

Membuat Aplikasi Calculator Sederhana – Hallo sahabat Kelas IT ID apa kabar semuanya? semoga sahabat selalu dapat keadaan baik. Pada tutorial kali ini kita akan mencoba membuat sebuah aplikasi calculator sederhana yang hanya menggunakan 3 file saja yaitu meliputi file HTML, CSS dan yang paling penting adalah JavaScript.

Sebelumnya ada beberapa hal yang perlu sahabat persiapkan untuk membuat aplikasi calcurlator ini, diantara adalah aplikasi code editor. Jika sahabat, coding menggunakan laptop saya sarankan gunakan Visual Studio Code atau sejenisnya, sedangkan untuk pengguna Android/Smartphone bisa gunakan aplikasi Spck Editor yang masing-masing bisa sahabat download terlebih dahulu.

Daftar Isi

Membuat Aplikasi Calculator Sederhana

Untuk membuatnya kita hanya butuh 3 file saja yang disimpan pada folder yang sama. Jika sahabat menggunakan aplikasi media atau web server localhost yang digunakan secara offline seperti XAMPP silakan simpan ketiga file yang nanti akan kita buat di salah satu folder yang sama yang ada di dalam folder htdoct.

File HTML untuk Membuat Aplikasi Calculator Sederhana

Mari kita mulai membuat Aplikasi calculator sederhana dengan membuat file HTML nya terlebih dahulu sebagai kerangka dasar tampilan aplikasi, berikut adalah code HTML dan penjelasannya.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="calculator">
        <h1>Calculator</h1>
        <form name="calc" action="" method="post">
            <input type="text" name="display" id="display" readonly>
            <br>
            <input type="button" value="1" onclick="calc.display.value += '1'">
            <input type="button" value="2" onclick="calc.display.value += '2'">
            <input type="button" value="3" onclick="calc.display.value += '3'">
            <input type="button" value="+" onclick="calc.display.value += '+'">
            <br>
            <input type="button" value="4" onclick="calc.display.value += '4'">
            <input type="button" value="5" onclick="calc.display.value += '5'">
            <input type="button" value="6" onclick="calc.display.value += '6'">
            <input type="button" value="-" onclick="calc.display.value += '-'">
            <br>
            <input type="button" value="7" onclick="calc.display.value += '7'">
            <input type="button" value="8" onclick="calc.display.value += '8'">
            <input type="button" value="9" onclick="calc.display.value += '9'">
            <input type="button" value="*" onclick="calc.display.value += '*'">
            <br>
            <input type="button" value="0" onclick="calc.display.value += '0'">
            <input type="button" value="C" onclick="calc.display.value = ''">
            <input type="button" value="/" onclick="calc.display.value += '/'">
            <input type="button" value="=" onclick="calculate()">
        </form>
    </div>
    <script src="script.js"></script>
</body>
</html>

Sedikit kita jelaskan detail code HTML diatas agar sahabat bisa lebih mudah memahaminya. Kita akan pahami mulai dari <!DOCTYPE html> hinggal </head> terlebih dahulu. Sebagaimana kita tahu bahwa <!DOCTYPE html> mendefiniskan bahwa ini merupakan Dokumen HTML 5 sedangkan <head> </head> merupakan bagian yang berisi meta informasi tentang sebuah dokumen.

Sedangkan untuk bagian <body> hingga </body> pada file code HTML ini adalah bagian utama dari dokumen HTML tempat semua konten yang terlihat di browser oleh End user atau dengan kata lain sebagai front end.

Tidak hanya itu di dalam tag <body> terdapat berapa tag yang perlu kami jelaskan sedikit dalam membangun dan membuat aplikasi calculator sederhana ini.

<div class="calculator">: Elemen div dengan kelas "calculator” yang berfungsi sebagai container untuk kalkulator.
<form name="calc" action="" method="post">: Bagian form dengan nama calc. action="" yang berarti form tidak mengirim data ke server, karena semua perhitungan dilakukan di sisi klien dengan bantuan code JavaScript.
<input type="text" name="display" id="display" readonly>: Digunakan untuk menampilkan ekspresi (hitungan) matematika beserta hasilnya dengan ditambah readonly berfungsi agar pengguna tidak dapat langsung mengetik pada form input ini.
Serangkaian <input type="button" value="X" onclick="calc.display.value += 'X'"> digunakan untuk menambahkan angka dan operator ke display saat tombol di klik.
<input type="button" value="C" onclick="calc.display.value = ''">: Adalah tombol untuk menghapus display (nilai) yang sudah ditampikan (clear) yang mana tombol ini sangat umum ada pada sebuah kalkulator dengan tanda huruf C.
<input type="button" value="=" onclick="calculate()">: ini merupakan tombol untuk menghitung hasil dari ekspresi matematika menggunakan fungsi JavaScript calculate().

Terakhir pada bagian HTML ini sebelum </body> kita tambahkan <script src=”script.js”></script> untuk memanggil file script.js yang berisi fungsi penghitungan pada aplikasi calculator.

Code CSS untuk mempercantik desain antar muka

Untuk menghasilkan antar muka yang nyaman bagi pengguna, membangun sebuah aplikasi web membutuhkan pengaturan code tambahan berupa code CSS (Cascading Style Sheet) yang akan mengatur dan meninterpensi tampilan pada Elemen HTML yang sudah kita buat sebelumnya.

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
    margin: 0;
}

.calculator {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.calculator h1 {
    margin-bottom: 20px;
}

.calculator input[type="text"] {
    width: 100%;
    height: 40px;
    font-size: 18px;
    margin-bottom: 10px;
    padding: 5px;
    box-sizing: border-box;
}

.calculator input[type="button"] {
    width: 20%;
    height: 40px;
    font-size: 18px;
    margin: 5px 2.5%;
    box-sizing: border-box;
    border: none;
    background-color: #007bff;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.calculator input[type="button"]:hover {
    background-color: #0056b3;
}

Code CSS diatas seharusnya akan menambah semangat sahabat Kelas IT ID dalam membuat aplikasi calculator sederhana ini karena hasil dari CSS diatas akan menjadikan tampilan aplikasi lebih terlihat rapi dan elegan.

Kita akan menyesuaikan beberapa tampilan dengan CSS diatas, diantaranya :

body: Mengatur tampilan tubuh dokumen HTML, dengan font Arial, display flex untuk sentralisasi, tinggi 100vh (tinggi viewport), dan background berwarna abu-abu.
.calculator: Mengatur tampilan container kalkulator, termasuk padding (jarak setiap batas), border-radius (tinggat tumpul pada sudut), dan box-shadow (bayangan pada box).
.calculator h1: Mengatur margin (batas) bawah heading.
.calculator input[type="text"]: Mengatur tampilan input display saat tombol di klik.
.calculator input[type="button"]: Mengatur tampilan tombol-tombol kalkulator.
.calculator input[type="button"]:hover: Mengatur perubahan warna tombol saat dihover (di klik).

Fungsi Calculator dengan JavaScript

Yang terpenting dalam membuat aplikasi calculator sederhana ini adalah file yang berisi code javascript yang menjalan fungsi penghitungan pada aplikasi calculator. Berikut ini adalah codenya.

function calculate() {
    let display = document.calc.display;
    try {
        display.value = eval(display.value);
    } catch (e) {
        display.value = 'Error';
    }
}

Berikut kita jelaskan Fungsi calculate() pada Javascript diatas :

let display = document.calc.display;: untuk mengambil referensi ke elemen input display.
try { display.value = eval(display.value); }: menggunakan eval untuk mengevaluasi ekspresi matematika yang ada di display dan menampilkan hasilnya.
catch (e) { display.value = 'Error'; }: berfungsi untuk menangkap kesalahan jika ekspresi tidak valid dan menampilkan “Error”.

Kesimpulan

Itulah step by step membuat aplikasi calculator sederhana dengan hanya menggunakan 3 code (HTML, CSS dan Javascript) yang seharusnya jika anda mengikuti setiap langkahnya dengan benar maka sahabat akan berhasil membuatnya.

Perlu di ingat bahwa kembali ketiga file diatas, di simpan sejajar dalam satu folder yang sama sehingga script CSS dan juga Javascript akan terpanggil dengan sempurna sesuai path yang kita buat di code HTML nya. Jika dirasa diperlukan, silakan download sumber codenya dibawah ini.

Namun, kami sangat berharap sahabat bisa mempelajari dan mencermati dengan seksama setiap code yang ditulis diatas dan memahaminya. Senang bisa berbagi dan sampai jumpa di artikel selanjutnya.

Download Code

Membuat Aplikasi Calculator Sederhana dengan JavaScript

Membuat Aplikasi Calculator Sederhana

File HTML untuk Membuat Aplikasi Calculator Sederhana

Code CSS untuk mempercantik desain antar muka

Fungsi Calculator dengan JavaScript

Kesimpulan

One comment

Leave a ReplyCancel Reply