Calculatrice simple

2016 Andev.web

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

18 June 2023

Formulaire de connexion simple

17 May 2024

Formulaire de connexion simple

29 July 2024

Calculatrice iPhone

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

Recommandé

Formulaire de connexion simple

Formulaire de connexion simple

Calculatrice iPhone

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS