Membuat Kalkulator Sederhana dengan Javascript

Kamis, 01 Februari 2018 edit

Saya sedang belajar membuat kalkulator kimia dengan JavaScript (JS) secara penuh. Sengaja ini saya bagikan agar rekan seprofesi atau siapapun yang sedang ingin mempelajarinya dapat memulainya bersama. Untuk dapat membuat alat hitung berbasis web atau nanti juga dapat dikembangkan untuk membuatnya berbasis android apk juga boleh.

Untuk memulainya diperlukan aplikasi standar notepad atau sejenisnya dan browser (seperti Chrome, Firefox, Opera, dan sejenisnya). Ia cukup hanya dua aplikasi itu. Tentu saja juga harus paham html dan css, namun kalau belum bisa sambil belajar dengan membuka tutorialnya seperti yang ada di w3schools.com. Selanjutkan dapat menggunakan logika untuk mengembangkan lagi. Untuk tutorial bagi anda yang awam seperti saya, tutorial dengan bahasa yang cukup manusiawi dapat disimak di kanal youtube sekolahkoding.



Buat Anda yang hendak mencoba dengan menyalin bentuk kalkulator dasar tanpa style boleh kopi ke notepad kemudian menyimpannya dengan nama file tertentu dan ekstensi dot html (misal kalkulator.html). Setelah disimpan sila coba membuka file tersebut dengan menggunakan browser yang biasa digunakan. Jika ingin menyalinnya untuk di blog sendiri boleh di salin kode antara kode <body> hingga </body>

Kode tanpa style:
<html>
<head>
<title>Kalkulator Jumlah Zat</title></head>
<body>
<script>
function mol()
{
 var num1 = parseFloat(document.getElementById("num1").value);
 var num2 = parseFloat(document.getElementById("num2").value);
 var mole = num1 / num2;
 document.getElementById("output").innerHTML = mole.toFixed(4) + " mol";
}
</script>
Massa        <input id="num1" size="10" type="text" /> gram
Massa Molar  <input id="num2" size="10" type="text" /> gram/mol
<button onclick="mol()"> Hitung Jumlah Zat </button>
<div id="output">
</div>
</body>
</html>

Ilustrasi hubungan antarhal yang prinsip dalam kode JS untuk kalkulator ini seperti pada gambar berikut:


Kode dengan style namun masih sederhana:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
function mol()
{
 var num1 = parseFloat(document.getElementById("num1").value);
 var num2 = parseFloat(document.getElementById("num2").value);
 var mole = num1 / num2;
 document.getElementById("output").innerHTML = mole.toFixed(4) + " mol";
}
</script>
<table align="center" border="1" cellpadding="10" style="background:#fdfdfd;border-collapse: collapse;  ">
<tr style="text-align:center;"><td colspan="2" style="background: green; color:yellow; font-size:20px"><b>Kalkulator Jumlah Zat </b><br/>
oleh Urip Rukim</td></tr>
<tr><td>Massa        </td><td ><input type="text" id="num1" size="10" style="border-radius: 3px; "> gram     </td></tr>
<tr><td>Massa Molar  </td><td ><input type="text" id="num2" size="10" style="border-radius: 3px; "> gram/mol </td></tr>
<tr style="text-align:center;"><td colspan="2"><button onclick="mol()"> Hitung Jumlah Zat </button> </td></tr>
<tr style="text-align:center;" ><td colspan="2" id="output" style="color:red; font-size:20px; background: palegreen"></td></tr>
</table>
</body>
</html>

Hasilnya akan seperti di bawah ini, dan dapat dicoba untuk menghitung. Sekali lagi ini hanya sekadar untuk latihan, dan berharap untuk dapat dikembangkan menjadi kalkulator lain yang dapat dijadikan teman belajar.


Kalkulator Jumlah Zat
oleh Urip Rukim
Massa gram
Massa Molar gram/mol

Semoga bermanfaat untuk mengawali pembelajaran JS berikutnya buat kita yang baru memulai mengenal JS ini. Terima kasih.
Bagikan di

Tidak ada komentar:

Posting Komentar

 
Copyright © 2015-2024 Urip dot Info | Disain Template oleh Herdiansyah Dimodivikasi Urip.Info