in Javascript ~ read.
Tutorial Membuat Kalkulator dengan Javascript #1

Tutorial Membuat Kalkulator dengan Javascript #1

Sebagai bagian dari tugas di Free Code Camp para campers diharuskan untuk membuat kalkulator sederhana menggunakan Java Script.

Tugas ini cukup menantang, karena kita harus menguasai 3 tools utama dari web development yakni HTML, CSS dan Javascript.

Bagian pertama dari tugas tersebut, saya membuat layout kalkulator, dan untuk tugas tersebut saya memanfaatkan CSS Bootstrap dengan code HTML berikut:

HTML Files

<div class="container">
  <div class="page-header">
    <h1>Calculator</h1>
  </div> <!-- class="page-header" -->
  <div id="calculator"> 
    <div id="input">
      <input id="inputtext" type="text" class="textbox" style="text-align:right">
    </div> <!-- div id="input" -->
    <p>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-primary" onclick="document.getElementById('inputtext').value = 'Seven'" >7</button>
      <button type="button" class="btn btn-primary" onclick="document.getElementById('inputtext').value = 'Eight'">8</button>
      <button type="button" class="btn btn-primary" onclick="document.getElementById('inputtext').value = 'Nine'">9</button>
    </div> <!-- class="btn-group" role="group" --> 
    ...

CSS Files

#calculator {
  width: 400px;
  height: 400px;
  border: 2px solid gray;
  border-radius: 10px;
  box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.2);
  margin: 50px auto 0 auto;
  padding: 10px;
}

#input {
  border: 1px solid #ddd;
  border-radius: 1px;
  height: 60px;
  padding-top: 10px;
  text-align: center;
  font-size: 2.5rem;
  overflow-x: auto;
  transition: all .2s ease-in-out;
}

.btn {
  width:70px;
  height:50px;
  margin:5px;
  border-radius: 5px;
}

Hasil akhirnya kurang lebih seperti ini.
Calculator

Untuk codenya bisa dilihat di Codepen.io.

Semoga bermanfaat.

comments powered by Disqus