Simple Calculator

2015 Andev.web

Open In Editor Video 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

Calculator

Simple Login Form

simple and descent registration form

HTML

CSS

JS

Recommended

Calculator

Simple Login Form

simple and descent registration form

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS