TipsIM.com - Cara membuat kalkulator sederhana menggunakan bootstrap. Selamat datang di blog TipsIM, ketemu lagi dengan saya sob. Pada postingan kali ini saya akan berbagi tutorial cara membuat kalkulator sederhana menggunakan bootstrap. Kalkulator ini simpel sob, tidak ribet, dan mudah di buat.
Nah, bagi anda yang sedang mendapatkan tugas untuk membuat kalkulator sederhana di web, atau hanya sekedar bereksperimen membuat kalkulator sederhana di web, jika anda merasa kesulitan mencari coding atau script kalkulator sederhana tersebut, anda jangan bingung sob, saya akan membagikan codingnya secara cuma-cuma. Jadi, anda bisa mengambil coding ini untuk anda pasang dan disimpan sendiri atau boleh juga untuk dibagikan ke teman-teman anda yang membutuhkan.
Memang kalkulator yang saya bagikan ini terlihat sederhana sob, jadi hanya terdapat perhitungan penjumlahan, pengurangan, perkalian, dan pembagian, tidak dilengkapi dengan perhitungan lainnya seperti sin cos tan, pekalian pangkat, akar, dan lain sebagainya. Ini kesempatan anda untuk mengembagkan koding yang saya bagikan tersebut agar perhitungan kalkulatornya menjadi lebih lengkap.
Oke, langsung saja sob, untuk membuat kalkulator sederhana, silahkan ikuti langkah-langkah di bawah ini.
Cara Membuat Kalkulator Sederhana
1. Silahkan anda copy kode berikut ini dan letakkan di atas </head><script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
2. Lalu copy kode CSS berikut ini ini dan letakkan di atas </style>
*, html, body {
margin: 0;
padding: 0;
text-align: center;
}
body{
background-color: #f5f5f5;
color: #fff;
}
.container-fluid{
margin: 5% 0;
}
span{
border-top: 1px solid #222;
border-right: none;
border-bottom: none;
border-left: 1px solid #222;
padding: 20px 0;
text-shadow: 0 1px .5px #111;
-webkit-box-shadow:inset 0 1px 0px .5px rgba(255,255,255,.2),
inset 0 -1px 0px .5px rgba(1,1,1,.2);
box-shadow: inset 0 1px 0px .5px rgba(255,255,255,.2),
inset 0 -1px 0px .5px rgba(1,1,1,.2);
}
.display span{
background-color: #333;
text-shadow: 0 2px 3px #111;
box-shadow: none;
}
.display h1{
text-align: right;
}
.numbers span{
background-color: #555;
}
.operations span{
background-color: tomato;
}
.topOperations span{
background-color: #444;
}
#equals{
border-bottom: 1px solid #222;
background-color: #ffb973;
}
.bb{
border-bottom: 1px solid #222;
}
.br{
border-right: 1px solid #222;
3. Kemudian copy kode Javascript berikut ini dan letakkan di atas </body>
<script type='text/javascript'>
var currentSum = "";
$("span").click(function() {
var value = ($(this).text());
if(value == '='){
currentSum = eval(currentSum);
$( ".display h1" ).text(currentSum);
}else if(value == "x"){
currentSum += "*";
$( ".display h1" ).text(currentSum);
}else if(value == "÷"){
currentSum += "/";
$( ".display h1" ).text(currentSum);
}else if(value == 'AC'){
currentSum = "";
$( ".display h1" ).text('0');
}else if(value == 'CE'){
currentSum = currentSum.substring(0, currentSum.length - 1);
$( ".display h1" ).text(currentSum);
}else{
currentSum += value;
$( ".display h1" ).text(currentSum);
}
});
</script>
4. Dan yang terakhir, copy kode HTML berikut ini dan letakkan di bawah <body>
<div class="container-fluid">
<div class="row-fluid col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="display col-xs-12">
<div class="row">
<span class="col-xs-12 br"><h1> 0</h1></span>
</div>
</div>
<div class="topOperations col-xs-12">
<div class="row">
<span class="col-xs-3">AC</span>
<span class="col-xs-3">CE</span>
<span class="col-xs-3">%</span>
<span style="background-color: tomato;" class="col-xs-3 br">÷</span>
</div>
</div>
<div class="numbers col-xs-9">
<div class="row">
<span class="col-xs-4">1</span>
<span class="col-xs-4">2</span>
<span class="col-xs-4">3</span>
<span class="col-xs-4">4</span>
<span class="col-xs-4">5</span>
<span class="col-xs-4">6</span>
<span class="col-xs-4">7</span>
<span class="col-xs-4">8</span>
<span class="col-xs-4">9</span>
<span class="col-xs-8 bb">0</span>
<span class="col-xs-4 bb">.</span>
</div>
</div>
<div class="operations col-xs-3">
<div class="row">
<span class="col-xs-12 br">x</span>
<span class="col-xs-12 br">-</span>
<span class="col-xs-12 br">+</span>
<span id="equals" class="col-xs-12 br bb">=</span>
</div>
</div>
</div>
</div>
5. Selesai, silahkan anda simpan dan lihat hasilnya.
Hasil Akhir Coding Kalkulator Sederhana
Jika anda masih bingung bagaimana cara meletakkan kodenya yang benar, berikut ini hasil akhir pemasangan kode yang saya paparkan per bagian pada langkah-langkah di atas.<!DOCTYPE html>
<html>
<head>
<title>Kalkulator Sederhana</title>
<style>
*, html, body {
margin: 0;
padding: 0;
text-align: center;
}
body{
background-color: #f5f5f5;
color: #fff;
}
.container-fluid{
margin: 5% 0;
}
span{
border-top: 1px solid #222;
border-right: none;
border-bottom: none;
border-left: 1px solid #222;
padding: 20px 0;
text-shadow: 0 1px .5px #111;
-webkit-box-shadow:inset 0 1px 0px .5px rgba(255,255,255,.2),
inset 0 -1px 0px .5px rgba(1,1,1,.2);
box-shadow: inset 0 1px 0px .5px rgba(255,255,255,.2),
inset 0 -1px 0px .5px rgba(1,1,1,.2);
}
.display span{
background-color: #333;
text-shadow: 0 2px 3px #111;
box-shadow: none;
}
.display h1{
text-align: right;
}
.numbers span{
background-color: #555;
}
.operations span{
background-color: tomato;
}
.topOperations span{
background-color: #444;
}
#equals{
border-bottom: 1px solid #222;
background-color: #ffb973;
}
.bb{
border-bottom: 1px solid #222;
}
.br{
border-right: 1px solid #222;
</style>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="display col-xs-12">
<div class="row">
<span class="col-xs-12 br"><h1> 0</h1></span>
</div>
</div>
<div class="topOperations col-xs-12">
<div class="row">
<span class="col-xs-3">AC</span>
<span class="col-xs-3">CE</span>
<span class="col-xs-3">%</span>
<span style="background-color: tomato;" class="col-xs-3 br">÷</span>
</div>
</div>
<div class="numbers col-xs-9">
<div class="row">
<span class="col-xs-4">1</span>
<span class="col-xs-4">2</span>
<span class="col-xs-4">3</span>
<span class="col-xs-4">4</span>
<span class="col-xs-4">5</span>
<span class="col-xs-4">6</span>
<span class="col-xs-4">7</span>
<span class="col-xs-4">8</span>
<span class="col-xs-4">9</span>
<span class="col-xs-8 bb">0</span>
<span class="col-xs-4 bb">.</span>
</div>
</div>
<div class="operations col-xs-3">
<div class="row">
<span class="col-xs-12 br">x</span>
<span class="col-xs-12 br">-</span>
<span class="col-xs-12 br">+</span>
<span id="equals" class="col-xs-12 br bb">=</span>
</div>
</div>
</div>
</div>
<script type='text/javascript'>
var currentSum = "";
$("span").click(function() {
var value = ($(this).text());
if(value == '='){
currentSum = eval(currentSum);
$( ".display h1" ).text(currentSum);
}else if(value == "x"){
currentSum += "*";
$( ".display h1" ).text(currentSum);
}else if(value == "÷"){
currentSum += "/";
$( ".display h1" ).text(currentSum);
}else if(value == 'AC'){
currentSum = "";
$( ".display h1" ).text('0');
}else if(value == 'CE'){
currentSum = currentSum.substring(0, currentSum.length - 1);
$( ".display h1" ).text(currentSum);
}else{
currentSum += value;
$( ".display h1" ).text(currentSum);
}
});
</script>
</body>
</html>
Sekian postingan kali ini mengenai cara membuat kalkulator sederhana menggunakan Bootstrap, semoga bisa bermanfaat bagi kita semua. Terima kasih telah menyempatkan waktunya untuk berkunjung dan membaca.
Post a Comment:
Komentar, kritik dan saran dari anda adalah motivasi untuk berkembangnya blog ini. Mohon tidak berkomentar dengan kata yang mengandung unsur sara, kekerasan, dan porn. Terima kasih. :)