Simple Calculator

Open In Editor Publish Your Code Need a Website?

<!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

Calculator

simple and descent registration form

Simple Login Form

HTML

CSS

JS

Recommended

Calculator

simple and descent registration form

Simple Login Form

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS