How To Make a Calculator Using HTML, CSS & JavaScript | HTML Calculator 🧮

We are going to make a dark theme♠️ calculator using simple HTML,CSS & JavaScript.🧑‍💻
The goal is not to go to complex logic and css. the main goal is to keep it simple and write the less code to make beautiful UI with basic calculator functionality

Simple HTML Markup

<!DOCTYPE html>
<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</title>
    <link rel="stylesheet" href="style.css">
    <script src="main.js" defer></script>
  </head>
  <body>
    <div id="calculator">
      <input type="text" name="display" id="display" disabled/>
      <br />

      <button id="ac" class="operator">AC</button>
      <button id="de" class="operator">DEL</button>
      <button id="." class="operator">.</button>
      <button id="/" class="operator">/</button>
      <br />

      <button id="7">7</button>
      <button id="8">8</button>
      <button id="9">9</button>
      <button id="*" class="operator">*</button>
      <br />

      <button id="4">4</button>
      <button id="5">5</button>
      <button id="6">6</button>
      <button id="-" class="operator">-</button>
      <br />

      <button id="1">1</button>
      <button id="2">2</button>
      <button id="3">3</button>
      <button id="+" class="operator">+</button>
      <br />

      <button id="00">00</button>
      <button id="0">0</button>
      <button id="=" class="equal operator">=</button>
    </div>
  </body>
</html>

To handle functionality, one JavaScript function is required

const display = document.querySelector("#display");
const button = document.querySelectorAll("button");

button.forEach((btn) => {
  btn.addEventListener("click", () => {
    if (btn.id === "=") {
      display.value = eval(display.value);
    } else if (btn.id === "ac") {
      display.value = "";
    } else if (btn.id === "de") {
      display.value = display.value.slice(0, -1);
    } else {
      display.value += btn.id;
    }
  });
});

Making calculators beautiful with CSS

body {
    text-align: center;
    margin: 0;
    background: #bf4d5d;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

#calculator {
    max-width: 360px;
    background-color: #0d1b2a;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px rgba(0, 0, 0, 0.23);
}

#display {
    width: 100%;
    height: 56px;
    font-size: 20px;
    text-align: right;
    margin-bottom: 10px;
    padding: 20px;
    border-radius: 5px;
    color: #e0e1dd;
    background-color: rgba(13, 27, 42, 0.3);
    border: none;
    box-sizing: border-box;
}

.operator {
    color: #219ebc;
}

#ac {
    color: #bf4d5d
}

.equal {
    width: calc(50% - 10px);
}

button {
    width: calc(25% - 10px);
    height: 50px;
    font-size: 20px;
    margin: 10px 5px;
    border: none;
    border-radius: 5px;
    float: left;
    background-color: rgba(13, 27, 42);
    color: #e0e1dd;
    -webkit-box-shadow: -1px 1px 30px -5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: -1px 1px 30px -5px rgba(0, 0, 0, 0.2);
    box-shadow: -1px 1px 30px -5px rgba(0, 0, 0, 0.2);
}

button:active {
    transform: scale(1.05);
    box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.19), 0 1.5px 1.5px rgba(0, 0, 0, 0.23);
}

🛖Please checkout the git repository https://github.com/kaizen-developer/simple-calculator

📺Please watch the video on YouTube that shows the same step by step https://youtu.be/HjA1m7xsARo

I hope you enjoy creating a calculator this way.

Blog

How To Make a Calculator Using HTML, CSS & JavaScript | HTML Calculator 🧮

kaizen-developer

Join Our Newsletter. No Spam, Only the good stuff.

Related