Cara Membuat Kalkulator Pada Blog


Mesin hitung alias Kalkulator merupakan alat untuk menghitung dari perhitungan sederhana semacam penjumlahan, pengurangan, perkalian serta pemecahan hingga terhadap kalkulator sains yang bisa menghitung rumus matematika tertentu.



<!DOCTYPE HTML>

<html lang="en">

<head>

<meta charset="utf-8">

<title>A Simple Calculator</title>

<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">

<style>

* {

font-family: 'Inconsolata', monospace;

color: #555;

}

body {

background-color: #3fb399;

}

.container {

width: 320px;

background-color: white;

margin: 120px auto;

}

table {

width: 100%;

border-color: #f4f4f4;

}

td {

width: 25%;

}

button {

width: 100%;

height: 70px;

font-size: 24px;

background-color: white;

border: none;

}

#inputLabel {

height: 120px;

font-size: 40px;

vertical-align: bottom;

text-align: right;

padding-right: 16px;

background-color: #ececec;

}

</style>

</head>

<body>

<div class="container">

<table border="1" cellspacing="0">

<tr>

<td colspan="4" id="inputLabel">0</td>

</tr>

<tr>

<td colspan="3"><button onclick="pushBtn(this);">AC</button></td>

<td><button onclick="pushBtn(this);">/</button></td>

</tr>

<tr>

<td><button onclick="pushBtn(this);">7</button></td>

<td><button onclick="pushBtn(this);">8</button></td>

<td><button onclick="pushBtn(this);">9</button></td>

<td><button onclick="pushBtn(this);">*</button></td>

</tr>

<tr>

<td><button onclick="pushBtn(this);">4</button></td>

<td><button onclick="pushBtn(this);">5</button></td>

<td><button onclick="pushBtn(this);">6</button></td>

<td><button onclick="pushBtn(this);">-</button></td>

</tr>

<tr>

<td><button onclick="pushBtn(this);">1</button></td>

<td><button onclick="pushBtn(this);">2</button></td>

<td><button onclick="pushBtn(this);">3</button></td>

<td><button onclick="pushBtn(this);">+</button></td>

</tr>

<tr>

<td colspan="2"><button onclick="pushBtn(this);">0</button></td>

<td><button onclick="pushBtn(this);">.</button></td>

<td><button onclick="pushBtn(this);">=</button></td>

</tr>

</table>

</div>



<script>

var inputLabel = document.getElementById('inputLabel');



function pushBtn(obj) {



var pushed = obj.innerHTML;



if (pushed == '=') {

// Calculate

inputLabel.innerHTML = eval(inputLabel.innerHTML);



} else if (pushed == 'AC') {

// All Clear

inputLabel.innerHTML = '0';



} else {

if (inputLabel.innerHTML == '0') {

inputLabel.innerHTML = pushed;



} else {

inputLabel.innerHTML += pushed;



}

}

}

</script>

</body>

</html>





A Simple Calculator
0

0 Response to "Cara Membuat Kalkulator Pada Blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel