Cara Membuat Kalkulator Online Di Blog dengan HTML CSS dan JavaScript Keren -Marzep Design

Cara Membuat Kalkulator Online Di Blog dengan HTML CSS dan JavaScript Keren

Cara Membuat Kalkukator Online Di Blog Dengan HTML, CSS dan JavaScript – Berdasarkan yang kita tahu Kalkulator biasanya ada di hp android, Komputer / Laptop atau seperti yang digunakan di warung warung untuk menghitung belanjaan. Tapi taukah kamu bagaimana cara membuat kalkulator online di blog sederhana dengan mudah menggunkan html, css dan javascript.

Cara Membuat Kalkulator Online Di Blog dengan HTML CSS dan JavaScript Keren

Apa Tujuannya Membuat Kalkulator di Blog?
Untungnya membuat kalkulator di blog kita, memudahkan kita dalam menghitung kita kesulitan menghitung saat mengedit template dan harus mengukurnya. Nah kita dapat menggunkan kalkulator yang ada di blog kita tanpa perlu membuka aplikasi kalkulator di hp atau di Komputer atau di laptop kita.

Cara membuat kalkulator di blog ini cukup mudah sekali. Sebelum ke langkah – langkahnya saya mau ingatkan kalian mari berlanganan artikel gratis via email. Agar saat admin update artikel yang bermanfaat kalian bisa tau karena akan ada notifikasi ke email anda. Okee… jika sudah langsung ke langkah membuat kalkulator di blog.

Cara Membuat Kalkulator Online Di Blog
1.   Pastika Anda sudah masuk ke dashbor blogger kalian. Kemudian pilih Tema Dan Edit HTML, dan copy dan pastekan code css di bawah ini sebelum kode ]]></b:skin> atau </style>

#kalkulator{width:325px;height:300px;margin:20px auto;padding:20px 20px 10px;background:linear-gradient(#baffc9,#a0ffb5);box-shadow:0 4px 0 #64bf77,0 10px 15px rgba(0,0,0,0.2);border-radius:5px}
.atas{overflow:hidden;padding-right:6px}
.tombol{width:66px;height:36px;float:left;background:#ffb3ba;color:white;border-radius:3px;text-align:center;line-height:35px;box-shadow:0 4px 0 #df8c94;margin:0 5px 11px 0;position:relative;top:0;user-select:none;cursor:pointer;transition:0.2s ease}
.layar{width:208px;height:40px;background:rgba(0,0,0,0.2);float:right;text-align:right;line-height:40px;padding:0 10px;box-shadow:inset 0 4px rgba(0,0,0,0.2);border-radius:3px;font-size:1.1em;color:white;letter-spacing:1px;text-shadow:1px 1px 2px rgba(0,0,0,0.3);overflow:hidden}
.bawah{overflow:hidden;margin-top:15px}
.tombol.angka{background:white;box-shadow:0 4px 0 rgba(0,0,0,0.2);color:#999}
.tombol.operator{background:#ffdfba;box-shadow:0 4px 0 #dea768;color:#dea768;font-size:1.4em}
.tombol.hitung{background:#ffffba;box-shadow:0 4px 0 #bebe47;color:#bebe47;font-size:1.4em}
.tombol:hover{filter:brightness(0.95)}
.tombol:active{box-shadow:0 0 0;top:4px}

2. kemudian letakan kode dibawah ini di postingan tepatnya di HTML bukan Compose

 
    <div id="kalkulator">
<div class="atas">
<div class="tombol">
C</div>
<div class="layar">
</div>
</div>
<div class="bawah">
<span class="tombol angka">7</span>
    <span class="tombol angka">8</span>
    <span class="tombol angka">9</span>
    <span class="tombol operator">/</span>
    
    <span class="tombol angka">4</span>
    <span class="tombol angka">5</span>
    <span class="tombol angka">6</span>
    <span class="tombol operator">*</span>
    
    <span class="tombol angka">1</span>
    <span class="tombol angka">2</span>
    <span class="tombol angka">3</span>
    <span class="tombol operator">-</span>
    
    <span class="tombol angka">0</span>
    <span class="tombol angka">.</span>
    <span class="tombol hitung">=</span>
    <span class="tombol operator">+</span>
  </div>
</div>

3. Selanjunya Copy semua kode berikut dan letakan atas kode </body> atau  &lt;/body&gt;

<script type="text/javascript">
  const angka = document.querySelectorAll('.tombol');for( a of angka ){a.onclick = function(){const layar = document.querySelector('.layar');const nilaiDiLayar = layar.innerHTML;const nilaiTombol = this.innerHTML;if( nilaiTombol == 'C' ){layar.innerHTML = ''}
else if( nilaiTombol == '=' ){layar.innerHTML = eval(/ nilaiDiLayar )}
else{layar.innerHTML += nilaiTombol}}}
</script>

Jangan lupa Simpan. Lihat Demo didawah ini. Coba Kamu (x) kali atau (+) tambahkan beberapa angka dan lihat hasilnya.

C
7 8 9 / 4 5 6 * 1 2 3 - 0 . = +

Penutup
Demikian Tutorial Cara Membuat Kalkulato Online dengan HTML , CSS , dan JS. Selamat mencoba, Semoga bermnafaa dan Terima kasih ....

1 Response to "Cara Membuat Kalkulator Online Di Blog dengan HTML CSS dan JavaScript Keren"

Note :
- Di larang pasang link aktif di kolom komentar
- Komentar akan disetujui jika tidak mengandung promosi
- Komentar boleh menggunakan bahasa banjarmasin
- Dilarang komentar yang berisi pornografi
- Jangan harap komentar yang berisi link aktif akan disetujui

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel