Kalkulator Sederhana - #1

Di postingan pertama ini saya akan membagikan source code aplikasi kalkulator sederhana. Kalkulator adalah alat untuk menghitung dari perhitungan sederhana seperti penjumlahan, pengurangan, perkalian dan pembagian sampai kepada kalkulator sains yang dapat menghitung rumus matematika tertentu. Pada perkembangannya sekarang ini, kalkulator sering dimasukkan sebagai fungsi tambahan daripada komputer, handphone, bahkan sampai jam tangan.

Aplikasi kalkulator sederhana ini hanya dapat digunakan untuk melakukan operasi penjumlahan, pengurangan, pembagian dan perkalian. Aplikasi ini dibangun dengan menggunakan HTML, CSS dan Javascript.

CSS :

body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    font-family: arial, sans-serif;
}
input, select {
    width: 256px;
    background: #fff;
    color: #222;
    padding: 10px; margin: 5px 0;
    border: 0; border-radius: 10px;
    box-sizing: content-box;
}
input[id="xRes"] { background: #155; color: #fff; }
button {
    width: 128px;
    background: #2cc;
    padding: 10px; margin: 5px 0;
    border: 0; border-radius: 10px;
}
h2 { color: #fff; }

HTML :

<!DOCTYPE html>
<html>
    <head>
        <title>Kalkulator Simple - #1</title>
        <link rel="stylesheet" type="text/css" href="xstyle.css">
    </head>
    <body>
        <table bgcolor="#822" width="100%" height="100%">
            <tr><td align="center">
                <h2>Faktorial</h2>
                <input id="xNum1" placeholder="Bilangan"><br>
                <input id="xRes" placeholder="Hasil"><br>
                <button onclick="xHitung()">Hitung</button>
            </td></tr>
        </table>
        <script src="xscript.js" type="text/javascript"></script>
    </body>
</html>

Javascript :

function xHitung() {
    var xOpr = document.getElementById("xOpr").value;
    var xNum1 = document.getElementById("xNum1").value;
    var xNum2 = document.getElementById("xNum2").value;
    var xRes;

    if(xOpr == '1') xRes = parseInt(xNum1) + parseInt(xNum2);
    else if(xOpr == '2') xRes = parseInt(xNum1) - parseInt(xNum2);
    else if(xOpr == '3') xRes = parseInt(xNum1) * parseInt(xNum2);
    else if(xOpr == '4') xRes = parseInt(xNum1) / parseInt(xNum2);

    document.getElementById("xRes").value = xRes;
}

Cross Reff

Kalkulator Sederhana - #1

Share this