Membuat Kalkulator Dalam HTML, CSS, & JavaScript

July 30, 2023 - (Updated: July 30, 2023)

FERDI ANANDA

Daftar Isi

Membuat Kalkulator Dalam HTML, CSS, & JavaScript

Membuat kalkulator bisa menjadi tugas yang menantang dan rumit, dan ini adalah sesuatu yang ingin dicapai oleh banyak pengembang web selama perjalanan mereka dalam pengembangan web. Namun, dimungkinkan untuk membuat kalkulator fungsional dengan memanfaatkan HTML, CSS , dan JavaScript .

Hari ini di blog ini Anda akan belajar membuat Kalkulator Responsif dalam HTML CSS & JavaScript. Kalkulator ini akan melakukan setiap perhitungan seperti pembagian, perkalian, penjumlahan, pengurangan, dan banyak lagi.

Langkah-langkah Membuat Kalkulator di HTML, CSS, & JavaScript

Buat File index.html

Masukan code di bawah ini ke dalam file index.html

<!DOCTYPE html>
<!-- Coding By FerdiChocs-->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator in HTML CSS & JavaScript</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <input type="text" class="display" />

      <div class="buttons">
        <button class="operator" data-value="AC">AC</button>
        <button class="operator" data-value="DEL">DEL</button>
        <button class="operator" data-value="%">%</button>
        <button class="operator" data-value="/">/</button>

        <button data-value="7">7</button>
        <button data-value="8">8</button>
        <button data-value="9">9</button>
        <button class="operator" data-value="*">*</button>

        <button data-value="4">4</button>
        <button data-value="5">5</button>
        <button data-value="6">6</button>
        <button class="operator" data-value="-">-</button>

        <button data-value="1">1</button>
        <button data-value="2">2</button>
        <button data-value="3">3</button>
        <button class="operator" data-value="+">+</button>

        <button data-value="0">0</button>
        <button data-value="00">00</button>
        <button data-value=".">.</button>
        <button class="operator" data-value="=">=</button>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

Buat File style.css

Masukan code di bawah ini ke dalam file style.css

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e0e3eb;
}
.container {
  position: relative;
  max-width: 300px;
  width: 100%;
  border-radius: 12px;
  padding: 10px 20px 20px;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}
.display {
  height: 80px;
  width: 100%;
  outline: none;
  border: none;
  text-align: right;
  margin-bottom: 10px;
  font-size: 25px;
  color: #000e1a;
  pointer-events: none;
}
.buttons {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, 1fr);
}
.buttons button {
  padding: 10px;
  border-radius: 6px;
  border: none;
  font-size: 20px;
  cursor: pointer;
  background-color: #eee;
}
.buttons button:active {
  transform: scale(0.99);
}
.operator {
  color: #2f9fff;
}

Buat File script.js

Masukan code di bawah ini ke dalam file script.js

const display = document.querySelector(".display");
const buttons = document.querySelectorAll("button");
const specialChars = ["%", "*", "/", "-", "+", "="];
let output = "";

//Define function to calculate based on button clicked.
const calculate = (btnValue) => {
  display.focus();
  if (btnValue === "=" && output !== "") {
    //If output has '%', replace with '/100' before evaluating.
    output = eval(output.replace("%", "/100"));
  } else if (btnValue === "AC") {
    output = "";
  } else if (btnValue === "DEL") {
    //If DEL button is clicked, remove the last character from the output.
    output = output.toString().slice(0, -1);
  } else {
    //If output is empty and button is specialChars then return
    if (output === "" && specialChars.includes(btnValue)) return;
    output += btnValue;
  }
  display.value = output;
};

//Add event listener to buttons, call calculate() on click.
buttons.forEach((button) => {
  //Button click listener calls calculate() with dataset value as argument.
  button.addEventListener("click", (e) => calculate(e.target.dataset.value));
});

Itu saja, sekarang Anda telah berhasil membuat Kalkulator. Jika Anda menghadapi kesulitan saat membuat kalkulator atau kode Anda tidak berfungsi seperti yang diharapkan, Anda dapat mengunduh file kode sumber untuk kalkulator ini secara gratis dengan mengeklik tombol unduh, dan Anda juga dapat melihat demo langsung menggeser kartu ini dengan mengklik tombol lihat langsung.

Demo Download