Cara Membuat Kalkulator Sederhana Dengan Javascript, HTML, & CSS

KangWandi.com -  Pemrograman Web,  saat ini sangat diminati oleh para developer, karena aplikasi berbasis web memiliki fitur yang cukup banyak dan mudah pengembangannya, baik untuk pembuatan website atau sistem informasi.



Biasanya pemrograman web menggunakan kombinasi bahasa program, yakni html sebagai pondasi/rancangan sebuah program, CSS berfungsi sebagai bahasa program untuk mempercantik sebuah web atau sistem informasi agar terlihat lebih mempesona. Nah agar sebuah web terlihat lebih interaktif dan dimanis, biasanya para pengembang menggunakan bahasa pemrograman PHP atau Javascript.

Kali ini, kita akan mencoba studi kasus membuat aplikasi sederhana berbasis web menggunakan bahasa pemrograman javascript, yang mana java-script ini merupakan bahasa pemrograman client-side, dimana program ini berjalan di sisi client, bukan pada server.

Untuk bisa menguasai bahasa javascript, kita harus belajar dulu dari program yang sederhana, agar berbagai fungsi yang belum kita ketahui bisa dipahami secara perlahan-lahan, karena kalau kita belajar langsung pada studi kasus yang kompleks akan cepat pusing dan frustasi...

Agar memudahkan pembelajaran kali ini, saya akan jelaskan cara membuat kalkulator sederhana dengan javascript ini, step by step, agar bisa dipahami.

Untuk tutorial kali ini, saya full menggunakan sitaks java script murni tanpa menggunakan liblary js, jadi tinggal masukan kode saja tanpa perlu menginstal plugin atau apapun..



Buat dulu sintask HTML nya, seperti berikut pada text-editor anda

<html>
<head>
<title> Kalkulator Sederhana Javascript </title>
</head>
 <body>
          <div class="container">
<div class="kotak">
<h4> Kalkulator </h4>
<form id="clear">
<br><input type="number" name="bil1" id="bil1" placeholder="Masukan bilangan 1" autofocus />
<br><input type="number" name="bil2" id="bil2" placeholder="Masukan bilangan 2" />
<br><input type="hasil" name="hasil" id="hasil" placeholder="hasil"  />
                          <br><input type="button"  onclick='penjumlahan()' value="+">
   <br><input type="button"  onclick='pengurangan()' value="-">
   <br><input type="button"  onclick='perkalian()' value="*">
   <br><input type="button"  onclick='pembagian()' value="/">
  <br><input type="button"  onclick='hapus()' value="hapus">
</form>
<div class="footer" > -- kalkulator sederhana Kangwandi.com -- </span>
       </div>
</div>
           
</body>
</html>


Setelah itu anda masukan file css berikut di atas </head>



<style type="text/css">
.kotak {

width:30%;
background-color:;
border: 1px solid #dfe6e9;
margin:auto;
padding-left: 0px;
border-radius:20px;
box-shadow: 2px 2px 20px #ddd;
text-align:center;
}
.kotak h4 {
text-align:center;
padding-top: 20px;
}
input {
margin-bottom:10px;
margin-left:15px;
width:300px;
height:30px;
border: 1px solid #ddd;
border-radius:3px;
box-shadow: 2px 2px 5px #ddd;

}
button {
background-color:#0984e3;
margin-bottom:20px;
margin-left:15px;
width:300px;
height:40px;
border: 1px solid #ddd;
border-radius:10px;
color:white;
}
.operasi {
padding-bottom:5px;
}
button:hover {
background-color:#74b9ff;
}
.footer {
text-align:center;
margin-top: 20px;
margin-bottom:20px;
}
@media screen and (max-width:800px){
.kotak {
width:100%;}
}
</style>


Setelah anda memasukan file css nya, silakan sisipkan juga sintaks javascript, agar semua elemen tersebut bisa berfungsi dan melakukan perhitungan,

Letakan kode javascript ini diatas kode </body>

<script>
function penjumlahan(){
var bil1=document.getElementById("bil1").value;
var bil2=document.getElementById("bil2").value;
var hasil;
hasil=parseInt(bil1)+parseInt(bil2);
document.getElementById("hasil").value=hasil;
}
function pengurangan(){
var bil1=document.getElementById("bil1").value;
var bil2=document.getElementById("bil2").value;
var hasil;
hasil=parseInt(bil1)-parseInt(bil2);
document.getElementById("hasil").value=hasil;
}
function perkalian () {
var bil1=document.getElementById("bil1").value;
var bil2=document.getElementById("bil2").value;
var hasil;
hasil=parseInt(bil1)*parseInt(bil2);
document.getElementById("hasil").value=hasil;
}
function pembagian (){
var bil1=document.getElementById("bil1").value;
var bil2=document.getElementById("bil2").value;
var hasil;
hasil=parseInt(bil1)/parseInt(bil2);
document.getElementById("hasil").value=hasil;
}
function hapus() {
document.getElementById("clear").reset();
}
</script>
Setelah semuanya selesai, simpan file text editor anda dengan extensi kalkulator.html karena semua kode java script dan css disisipkan secara internal di file html..

Jika sudah selesai di simpan, coba cek, dan hasilnya akan seperti ini.

Interface Kalkulator sederhana Javascript

Itulah contoh program kalkulator sederhana menggunakan javascript, semoga artikel ini bermanfaat dan bisa digunakan sesuai kebutuhan..

Jika anda berhasil, selamat yaaa, dan kasih tahu saya di kolom komentar kalau kamu berhasil..

Berlangganan update artikel terbaru via email:

1 Response to "Cara Membuat Kalkulator Sederhana Dengan Javascript, HTML, & CSS"

Berkomentarlah Dengan baik Dengan di dasari ketulusan hati bukan untuk kepentingan sendiri

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel