Calcolatrice Semplice

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

10 November 2024

la nuova calcolatrice di mikey

HTML

<!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);
  }
});

Calcolatrice Semplice

Consigliato

Barra di navigazione semplice

Calcolatrice iOS

la nuova calcolatrice di mikey

HTML

CSS

JS

Consigliato

Barra di navigazione semplice

Calcolatrice iOS

la nuova calcolatrice di mikey

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS