Membuat Calculator Dengan Javascript dan CSS

Cara Membuat Calculator Dengan Javascript dan CSS Di Blogger

Mas Tamvan. Create Calculator using Javascript and Css, pada kesempatan yang baha gia ini saya akan berbagi cara mebuat calculator dari javascript dan css, tentunya ini bukan hasil karya saya. Mas Tamvan hanya jadi copaser aja bukan creator soalnya ga ngerti bikin gituan dan saya masih newbie ++

Jangan Lupa Baca Tutorial Lainnya.

Membuat Search Dan Follower Seperti brilio.net

Membuat Calculator Dengan Javascript dan CSS

Cara Membuat Widget Follower Keren Di Blog

Dan Ini Demo Calculatornya

Result

Nah sekarang simak yu tutorialnya.

Make a calculator using Javascript and CSS3

Jika kalian ingin membuatnya di blog, ikuti langkah - langkah tamvan berikut !!

Masuk ke tab Template Edit HTML Cari Kode ]]></b:skin> atau </style>

Lalu masukan CSS berikut di atasnya


/* Basic reset */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 
 /* Better text styling */
 font: bold 14px Arial, sans-serif;
}

/* Finally adding some IE9 fallbacks for gradients to finish things up */

/* A nice BG gradient */
html {
 height: 100%;
 background: white;
 background: radial-gradient(circle, #fff 20%, #ccc);
 background-size: cover;
}

/* Using box shadows to create 3D effects */
#calculator {
 width: 325px;
 height: auto;
 
 margin: 100px auto;
 padding: 20px 20px 9px;
 
 background: #9dd2ea;
 background: linear-gradient(#9dd2ea, #8bceec);
 border-radius: 3px;
 box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}

/* Top portion */
.top span.clear {
 float: left;
}

/* Inset shadow on the screen to create indent */
.top .screen {
 height: 40px;
 width: 212px;
 
 float: right;
 
 padding: 0 10px;
 
 background: rgba(0, 0, 0, 0.2);
 border-radius: 3px;
 box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
 
 /* Typography */
 font-size: 17px;
 line-height: 40px;
 color: white;
 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
 text-align: right;
 letter-spacing: 1px;
}

/* Clear floats */
.keys, .top {overflow: hidden;}

/* Applying same to the keys */
.keys span, .top span.clear {
 float: left;
 position: relative;
 top: 0;
 
 cursor: pointer;
 
 width: 66px;
 height: 36px;
 
 background: white;
 border-radius: 3px;
 box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
 
 margin: 0 7px 11px 0;
 
 color: #888;
 line-height: 36px;
 text-align: center;
 
 /* prevent selection of text inside keys */
 user-select: none;
 
 /* Smoothing out hover and active states using css3 transitions */
 transition: all 0.2s ease;
}

/* Remove right margins from operator keys */
/* style different type of keys (operators/evaluate/clear) differently */
.keys span.operator {
 background: #FFF0F5;
 margin-right: 0;
}

.keys span.eval {
 background: #f1ff92;
 box-shadow: 0px 4px #9da853;
 color: #888e5f;
}

.top span.clear {
 background: #ff9fa8;
 box-shadow: 0px 4px #ff7c87;
 color: white;
}

/* Some hover effects */
.keys span:hover {
 background: #9c89f6;
 box-shadow: 0px 4px #6b54d3;
 color: white;
}

.keys span.eval:hover {
 background: #abb850;
 box-shadow: 0px 4px #717a33;
 color: #ffffff;
}

.top span.clear:hover {
 background: #f68991;
 box-shadow: 0px 4px #d3545d;
 color: white;
}

/* Simulating "pressed" effect on active state of the keys by removing the box-shadow and moving the keys down a bit */
.keys span:active {
 box-shadow: 0px 0px #6b54d3;
 top: 4px;
}

.keys span.eval:active {
 box-shadow: 0px 0px #717a33;
 top: 4px;
}

.top span.clear:active {
 top: 4px;
 box-shadow: 0px 0px #d3545d;
}

Lanjut, sekarang tinggal memasukan Javascriptnya.

Cari Kode <body>

Masukan JavaScript berikut d atasnya.


<script src='https://googledrive.com/host/0B_1DArceSF8qc1JfdjFrWW8zc2M' type='text/javascript'/>

Save Template.
Lanjut

Masuk ke tataletak Tambahkan Gadget / Add Widget.

Dan Pilih HTML/Javascript.

Tinggal Masukan HTML Di Bawah Ini


<div id="calculator">
 <!-- Screen and clear key -->
 <div class="top">
  <span class="clear">C</span>
  <div class="screen"></div>
 </div>
 
 <div class="keys">
  <!-- operators and other keys -->
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span class="operator">+</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span class="operator">-</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span class="operator">÷</span>
  <span>0</span>
  <span>.</span>
  <span class="eval">=</span>
  <span class="operator">x</span>
 </div>
</div>

Selanjutnya Tinggal Save, Dan lihat hasilnya.

Selamat anda sukses, Salam Tamvan :)

Cukup Sekian Dan Terimakasih, Semoga Bermanfaat.
Jika ada yang kebingungan silahkan bertanya di kolom komentar.