Simple Calculator

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Andev Web</title>
</head>
<body>
  <div class="container">
    <input type="text" class="display" readonly />
  
    <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>

CSS

@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;
  background-color: #f1f1f1;
  pointer-events: none;
  caret-color: transparent;
  border-radius: 10px;
  padding: 15px 20px;
}

.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;
  transition: background-color 0.3s ease;
}

.buttons button:hover {
  background-color: #d3d3d3;
}

.buttons button:active {
  transform: scale(0.99);
}

.operator {
  color: #2f9fff;
}

JS

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

buttons.forEach((button) => {
  button.addEventListener("click", (e) => calculate(e.target.dataset.value));
});

document.addEventListener("keydown", (event) => {
  const key = event.key;
  const allowedKeys = [...Array(10).keys(), ".", "Enter", "Backspace", "%", "*", "/", "-", "+"];
  
  if (allowedKeys.includes(key) || key === "Backspace") {
    let value = key === "Enter" ? "=" : key;
    value = key === "Backspace" ? "DEL" : value;
    calculate(value);
  }
});

Simple Calculator

Recommended

Simple login form

Simple Login Form

Simple CSS Card Template

HTML

CSS

JS

Recommended

Simple login form

Simple Login Form

Simple CSS Card Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS