CARA MEMBUAT KALKULATOR SEDERHANA DENGAN HTML

 CARA MEMBUAT KALKULATOR SEDERHANA DENGAN HTML

Pada kesempatan kali ini saya akan membuat website kalkulator sederhana dengan HTMl.
Tampilan kalkulator cukup sederhana dan berfungsi dengan baik. Langsung saja simak scriptnya menggunakan aplikasi Sublime Text.

Berikut Scriptnya :

<!DOCTYPE html>

<html>

<head>

<title> Kalkulator Sederhana</title>

</head>

<body>

<!-- tag form dibawah ini dibuat untuk membuat nama form -->

<FORM NAME="Calc"> 

<!-- coding dibawah ini merupakan coding untuk membuat tabel,untuk mengatur ketebalan garis dan memberi warna serta mengatur supaya table tersebut berada di tengah   -->

<TABLE align="center" BORDER=5 bgcolor=#a9a9a9>  

<!--  tag tr ini digunakan untuk membuat baris pada tabel -->      

<TR>  

<!-- sedangkan tag td ini digunakan untuk membuat kolom pada tabel  -->          

<TD> 

<!-- tag dibawah digunakan untuk menampilkan kolom input beserta ukurannya  -->             

<INPUT TYPE="text" NAME="Input" Size="16">             

</TD>        

</TR> 

<!-- coding align di bawah bertujuan supaya kolom dan barisnya berada di tengah  -->       

<TR align="center">   

<!--  nah disini kita tambahkan warna untuk background pada kolom -->         

<TD bgcolor=#a9a9a9>    

<!-- tag input dibawah ini digunakan untuk menginput tombol angka beserta +,-,x,/,. dan c(hapus)  -->

<INPUT TYPE="button" NAME="clear" VALUE="      c      " OnClick="Calc.Input.value = ''"> 

<INPUT TYPE="button" NAME="plus" VALUE="  +  " OnClick="Calc.Input.value += ' + '"> 

<INPUT TYPE="button" NAME="minus" VALUE="  -  " OnClick="Calc.Input.value += ' - '">

<br><!-- tag br digunakan untuk membuat baris baru atau sama fungsinya dengan enter  -->

        <INPUT TYPE="button" NAME="one" VALUE="  1  " OnClick="Calc.Input.value += '1'">           

<INPUT TYPE="button" NAME="two" VALUE="  2  " OnCLick="Calc.Input.value += '2'">         

<INPUT TYPE="button" NAME="three" VALUE="  3  " OnClick="Calc.Input.value += '3'">

<INPUT TYPE="button" NAME="times" VALUE="  x  " OnClick="Calc.Input.value += ' * '"> 

<br>                

<INPUT TYPE="button" NAME="four" VALUE="  4  " OnClick="Calc.Input.value += '4'">                <INPUT TYPE="button" NAME="five" VALUE="  5  " OnCLick="Calc.Input.value += '5'">                  <INPUT TYPE="button" NAME="six" VALUE="  6  " OnClick="Calc.Input.value += '6'">                   <INPUT TYPE="button" NAME="div" VALUE="  /  " OnClick="Calc.Input.value += ' / '">                          <br>                

<INPUT TYPE="button" NAME="seven" VALUE="  7  " OnClick="Calc.Input.value += '7'">                <INPUT TYPE="button" NAME="eight" VALUE="  8  " OnCLick="Calc.Input.value += '8'">                <INPUT TYPE="button" NAME="nine" VALUE="  9  " OnClick="Calc.Input.value += '9'">                  <INPUT TYPE="button" NAME="DoIt" VALUE=" =  " OnClick="Calc.Input.value = eval(Calc.Input.value)">  

<br>                

<INPUT TYPE="button" NAME="zero" VALUE="          0          " OnClick="Calc.Input.value += '0'">                

        <INPUT TYPE="button" NAME="point" VALUE="  .  " OnClick="Calc.Input.value += '.'">                 <br>   

<!-- semua tag di bawah ini digunakan untuk menutup serta mengakhiri perintah di atas  -->         

</TD>        

</TR>    

</TABLE>

</FORM>

</body>

</html>

Nah setelah Script selesai, silahkan anda buka file yang telah anda buat ke browser yang telah disediakan. Jika terjadi error atau bermasalah silahkan anda teliti lagi dengan baik dan benar.
Itulah pemaparan singkt tentang cara mambuat kalkulator sederhana dengan html, mohon maaf apabila ada kesalahan, sekian & terimakasih :)

Komentar

Postingan populer dari blog ini

Cara Membuat Toko Online Dengan HTML- Mudah Untuk Pemula