Membuat Kalkulator Dengan HTML, CSS, Dan JavaScript

Membuat Kalkulator Dengan HTML, CSS, Dan JavaScript. Cara Membuat Kalkulator Dengan HTML.
Defnilay
 
 

HTML, CSS dan JavaScript adalah tiga bahasa inti yang digunakan dalam pengembangan web. Dan Anda bahkan dapat membuat Kalkulator sendiri menggunakan bahasa pengkodean ini.

Dalam tutorial hari ini, kita tidak akan berbicara tentang blogging, Bagaimana melakukan ini atau itu di Blogger, tetapi bagaimana membuat Kalkulator menggunakan HTML, CSS dan JavaScript. Jika Anda ingin tahu bagaimana ini bisa dilakukan, baca artikel ini sampai akhir.

Bahasa pemrograman JavaScript adalah bahasa yang paling umum digunakan untuk kalkulator. Tetapi hanya dengan JavaScript saja, seseorang tidak dapat benar-benar membuat desain dan gaya. Jadi, kita akan menggunakan HTML, dan CSS juga.

Sebelum ke tutorialnya, ini yang harus diperhatikan;

  1. Ini hanyalah Kalkulator dasar dengan operasi dasar seperti penambahan, pengurangan, pembagian dan perkalian.
  2. Kalkulator juga akan memiliki tombol hapus

Membuat Kalkulator Menggunakan HTML, CSS dan JavaScript

Untuk tutorial ini, kita akan membagi pekerjaan menjadi tiga bagian yang berbeda. Menulis kode HTML, Menata UI Kalkulator dengan CSS dan menambahkan kode JavaScript yang akan membantu kita menjalankan semua operasi Matematika yang berbeda.

Menulis kode HTML

Kode HTML di bawah ini ditulis sedemikian rupa sehingga kalkulator memiliki judul atau katakanlah model atau mereknya, bagian di mana semua operasi input akan ditampilkan, area tampilan jawaban, tombol fungsi yang berbeda serta semua yang berbeda tombol numerik. Di bawah ini adalah contoh kode HTML yang dapat Anda gunakan dan sesuaikan sesuai keinginan Anda.

<div class="calc">
  <div class="calc-title">
    <span class="calc-title-span">
      HTMLCalc
    </span>
    <div class="calc-title-hr"></div>
  </div>
  <div class="calc-display">
    <div class="calc-display-span secondary-display" id="secondary-display">
    </div>
    <div class="calc-display-span primary-display" id="display">
    </div>
  </div>
  <div class="calc-display-hr"></div>
  <div class="calc-btn" id="btn">
    <button class="calc-btn-primary" id="seven">7</button>
    <button class="calc-btn-primary" id="eight">8</button>
    <button class="calc-btn-primary" id="nine">9</button>
    <button class="calc-btn-primary btn-bg" id="divide">/</button>
    <button class="calc-btn-primary" id="four">4</button>
    <button class="calc-btn-primary" id="five">5</button>
    <button class="calc-btn-primary" id="six">6</button>
    <button class="calc-btn-primary btn-bg" id="multiply">*</button>
    <button class="calc-btn-primary" id="one">1</button>
    <button class="calc-btn-primary" id="two">2</button>
    <button class="calc-btn-primary" id="three">3</button>
    <button class="calc-btn-primary btn-bg" id="add">+</button>
    <button class="calc-btn-primary btn-bg" id="decimal">.</button>
    <button class="calc-btn-primary" id="zero">0</button>
    <button class="calc-btn-primary btn-bg-equal" id="equals">=</button>
    <button class="calc-btn-primary btn-bg" id="subtract">-</button>
    <button class="calc-btn-clear" id="clear">clear</button>
  </div>
</div>

Kode CSS untuk kalkulator

Sekarang mari kita lihat kalkulator kita yang menyerupai kalkulator asli. Salin kode CSS di bawah ini. Anda dapat mengubah warna atau bahkan kelas CSS yang berbeda agar sesuai dengan selera Anda.

 @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700,900');
body {
  width : 100%;
  height : 750px;
  display: flex;
  flex-direction : column;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  background-color: #ebedef;
  padding: 0;
  margin: 0;
}

.calc {
  display: flex;
  flex-direction : column;
  width: 330px;
  height: 600px;
  margin : 10px;
  background-color: #080636;
  background-image: linear-gradient(315deg, #080636 0%, #414141 104%);
  border-radius: 20px;
  box-shadow : 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.calc-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 40px;
  align-items: center;
}

.calc-title-span {
  color: #fb7454;
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: 700;
  line-height: 20px;
}

.calc-title-hr {
  width: 200px;
  height: 10px;
  background-color: #fb7454;
  opacity: 0.8;
}

.calc-display {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100px;
  color: #fff; 
}


.secondary-display{
  font-size:20px;
  opacity : 0.8;
  overflow-x : hidden;
}
/* ScrollBar Style*/
.secondary-display::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}
.secondary-display::-webkit-scrollbar {
  height : 4px;
	background-color: #bdbdbd;
  opacity: 0.7;
}
.secondary-display::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #000000;
	  border: 3px solid #555555;
}

.primary-display::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}
.primary-display::-webkit-scrollbar {
  height : 4px;
	background-color: #bdbdbd;
  opacity: 0.7;
}
.primary-display::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #000000;
	  border: 3px solid #555555;
}

.calc-display-hr {
  width: 250px;
  height: 2px;
  margin-top: 10px;
  align-self: center;
  background-color: #bdbdbd;
  opacity: 0.4;
}

.calc-btn {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 20px;
}

.calc-btn-primary {
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  margin: 10px 5px;
  outline: none;
  border: none;
  background-color: transparent;
  color: #fff;
  font-size: 30px;
  width: 60px;
  height: 60px;
  border: 2px solid #616161;
  border-radius: 100%;
}

.btn-bg{
  background-color:#424242 !important;
  opacity : 0.9;
  border : none !important;
}
.btn-bg-equal{
  background-color:#ff7555 !important;
  border : none !important;
}
.calc-btn-primary:focus {
  outline:none
}
.calc-btn-primary:active {
  transform: scale(0.9);
}

.calc-btn-clear {
  margin: 20px 5px;
  outline: none;
  border: none;
  background-color: transparent;
  color: #fff;
  font-size: 30px;
  padding: 10px 90px;
  border: 3px solid #ff7555;
  border-radius: 10px;
}
.calc-btn-clear:active {
  transform: scale(0.9);
}

Kode JavaScript Kalkulator

Sekarang, setelah Anda menambahkan kode HTML dan CSS, Anda akan mendapatkan apa yang tampak seperti kalkulator dasar. Tapi itu tidak akan melakukan operasi apa pun. Untuk memperbaikinya, diperlukan kode JavaSript berikut. Anda dapat menambahkan kode ini sebelum tag body penutup dari file HTML proyek Anda.

<script>
 console.clear();
const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display");
let currentString = '';
let resultString = '';
let evalResult;
let lastOperator = false;
const primaryRender = (value) => {
  primaryDisplay.innerText = value;
}

const secondaryRender = (value) => {
  secondaryDisplay.innerText = value;
}
secondaryRender('0');
primaryRender('0');

const evaluate = (e) => {
  let width = secondaryDisplay.scrollWidth;
  if(width > 310){
    secondaryDisplay.style.overflowX = 'scroll';
    secondaryDisplay.scrollLeft = width;
  }
  else{
    secondaryDisplay.style.overflowX = 'hidden';
  }
  
  let value = e.target.innerText;
  if (value >= '0' && value <= '9') {
    let len = currentString.length;
    let lastOp = isOp(currentString[len - 1]);
    if (lastOperator) {
      currentString = currentString.concat(value);
      resultString = "".concat(value);
      secondaryRender(currentString);
      primaryRender(resultString);
      lastOperator = false;
    } else {
      currentString = currentString.concat(value);
      resultString = resultString.concat(value);
      secondaryRender(currentString);
      primaryRender(resultString);
    }

  } else if (isOp(value)) {
    if (currentString.length == 0 && (value == '/' || value == '*'));
    else {
      resultString = "";
      primaryRender(value);
      lastOperator = true;
      let len = currentString.length;
      let lastOp = isOp(currentString[len - 1]);
      if (lastOp) {
        currentString = currentString.substr(0, len - 1) + value;
        console.log(currentString);
        secondaryRender(currentString);
        decimal = false;
      } else {
        currentString = currentString.concat(value);
        secondaryRender(currentString);
      }
    }

  } else if (value == '.') {
    if (resultString.indexOf('.') < 0) {
      if (resultString.length == 0) {
        currentString = currentString.concat('0.');
        resultString = resultString.concat('0.');
        secondaryRender(currentString);
        primaryRender(resultString);
      } else {
        currentString = currentString.concat(value);
        resultString = resultString.concat(value);
        secondaryRender(currentString);
        primaryRender(resultString);
      }
    }
  } else if (value == '=') {
    secondaryDisplay.style.overflowX = 'hidden';
    
    if (currentString.length == 0);
    else {
      let result = eval(currentString);
      resultString = '';
      currentString = '';
      secondaryRender('0');
      primaryRender(result);
    }
  } else if (value == 'clear') {
    currentString = '';
    resultString = '';
    secondaryRender('0');
    primaryRender('0');
  }
    let width1 = primaryDisplay.scrollWidth;
    if(width1 > 310){
      primaryDisplay.style.overflowX = 'scroll';
    }
    else{
      primaryDisplay.style.overflowX = 'hidden';
    }
}


//Adding Event Listener to all buttons
for (let elem of btns.children) {
  elem.addEventListener('click', evaluate);
}

function isOp(value) {
  return (/\+|\-|\*|\//).test(value);
}

</script>

Setelah menambahkan kode CSS, HTML dan JavaScript dan melakukan beberapa penyesuaian pada tingkat CSS, kalkulator Anda siap dan dapat digunakan.

Akhir Kata

Sekian tutorial kali ini tentang "Membuat Kalkulator Dengan HTML, CSS, Dan JavaScript" semoga bermanfaat dan sampai jumpa di artikel selanjutnya!
Defnilay