Membuat Calculator Dengan Javascript dan CSS

calculator using css and javascript

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

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.

19 komentar
  1. Wah harus segera dicoba nih, thanks buat infonya

    ReplyDelete
  2. Wah pas ni buat blog ttg matematika dan fisika,,, bisa sekalian gunakan kalkulator nya..
    nice share gan

    ReplyDelete
    Replies
    1. iya gan, bisa juga buat pegawai. D coba mode offline lancar :)

      Delete
  3. langsung praktek dan thanks sudah berbagi

    ReplyDelete
  4. terima kasih udah di share, sangat membantu :)

    ReplyDelete
  5. Replies
    1. Silahkan gan, moga bermanfaat calculatornya :)

      Delete
  6. mantap... aku baru tau bisa kalkulator... coba ahh... thx min..

    ReplyDelete
  7. Wah keren nih,buat namabah wawasan ane

    ReplyDelete
  8. Mantaf sob --> http://ramadhanardiansyah.blogspot.co.id/

    ReplyDelete
  9. ditunggu kunbalnya gan,,smkkita36.blogspot.comartikelnya sangat menarik gan....

    ReplyDelete
  10. Ternyata ada ya membuat calculator dengann Javascript dan Css.. Terimakasih atas informasi yang bermanfaat gan..

    sahabatponsel.com

    ReplyDelete