Wednesday, 1 April 2020

Tips Membuat Kalkulator JavaScript

Tip Membuat Kalkulator JavaScript


Kali ini kita belajar membangun calculator sederhana menggunakan Javascript. Kita akan fokus pada membuat JavaScript sebagai kode kunci yang membuat tombol +, -, × , ÷ dan= berfungsi. Kode yang dibuat sudah jadi, Anda dapat mengembangkannya sendiri dengan menambahkan function baru untuk beberapa fungsi baru seperti CE, % dan lain - lain.




Dalam membangun sebuah proyek html, tiga kategori umum sebagai dasar untuk menampilkan kode - kode html tersebut, seperti "hello world!" , yang harus dibuat, yaitu CSS, Javascrift dan body html. Hal sama juga berlaku untuk pembuatan html kalkulator menggunakan Javascrift. Pertama kita buatkan kode untuk tampilan pada body halaman. 


<!-- create table -->
<body>
<table border="1">
<tr>
<td><input type="button" value="c" onclick="clr()"/> </td>
<td colspan="3"><input type="text" id="edu"/></td>
<!-- clr() function will call clr to clear all value -->
</tr>
<tr>
<!-- creating buttons and assigning values-->
<td><input type="button" value="+" onclick="dis('+')"/> </td>
<td><input type="button" value="1" onclick="dis('1')"/> </td>
<td><input type="button" value="2" onclick="dis('2')"/> </td>
<td><input type="button" value="3" onclick="dis('3')"/> </td>
</tr>
<tr>
<td><input type="button" value="-" onclick="dis('-')"/> </td>
<td><input type="button" value="4" onclick="dis('4')"/> </td>
<td><input type="button" value="5" onclick="dis('5')"/> </td>
<td><input type="button" value="6" onclick="dis('6')"/> </td>
</tr>
<tr>
<td><input type="button" value="*" onclick="dis('*')"/> </td>
<td><input type="button" value="7" onclick="dis('7')"/> </td>
<td><input type="button" value="8" onclick="dis('8')"/> </td>
<td><input type="button" value="9" onclick="dis('9')"/> </td>
</tr>
<tr>
<td><input type="button" value="/" onclick="dis('/')"/> </td>
<td><input type="button" value="." onclick="dis('.')"/> </td>
<td><input type="button" value="0" onclick="dis('0')"/> </td>
<!-- Evaluating function call eval()-->
<td><input type="button" value="=" onclick="solve()"/> </td>
</tr>
</table>
</body>


Lalu buat CSS untuk memberikan ukuran, bentuk , latar warna. Dalam membangun tampilan kalkulator, kita akan menentukan elemen tampilan kalkulator pada halaman html. Dalam menentukan tampilan biasanya dipengaruhi oleh selera dan gaya masing - masing. Dimana ini yang disebut nilai seni yang ada didiri kita masing - masing. Dan CSS dibawah ini dapat Anda modifikasi sesuai selera Anda. 


 <style>

input[type="button"]
{
border-radius: 5px;
background-color:#e6e6e6;
color: black;
border-color:#e6e6e6 ;
width:100%;
}
input[type="text"]
{
border-radius: 5px;
text-align: right;
background-color:white;
border-color: black ;
width:100%
}
</style>


Setelah terbentuk elemen tampilan dari html kalkilator, kemudian kita membuat tombol - tombol menjadi berfungsi. Disini kita membuat Javascript untuk memfungsikan setiap tombol. Pertama yang dilihat sebelum membuat elemen function, ada berapa banyak tombol yang harus difungsikan. Pada elenen kalkulator ada elemen +, - , ×, ÷ dan =. Masing - masing harus berfungsi dengan benar. Pengujian sebelum ditampilkan bisa menggunakan server lokal seperti xampp. Dan ini elemen Javascript yang sudah dibuat. 


<script>
//function for displaying values
function dis(val)
{
document.getElementById("edu").value+=val
 }
//function for evaluation
function solve()
{
let x = document.getElementById("edu").value
let y = eval(x)
document.getElementById("edu").value = y
}
//function for clearing the display
function clr()
{
document.getElementById("edu").value = ""
}
</script>


Sekarang proyek bangunan sebuah kalkulator sudah lengkap dan siap ditampilkan pada halaman html. Lakukan pengujian dan jika fungsi masing - masing sudah bisa bekerja dengan benar, baru bisa Anda upload ke halaman html.





Demikian membangun html kalkulator berbasis Javascript. Inti dalam membuat kalkulator html ini, basiknya pada penguasaan dalam membuat CRUD, perbedaannya CRUD dalam dasar tampilan php. Anda juga dapat membuat menggunakan Java, phyton dan Android. Intinya semua sama hanya berbeda pada aturan kode di masing - masing flatform.


Semoga bermanfaat








Artikel Terkait:






di

No comments:

Post a Comment