Future of Calculator ui using html css and javascript.

#webdev #javascript #programming #beginners

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Neon Glass Calculator</title>
  <style>
   *{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
   }
   body{
    font-family: "Poppins",sans-serif;
    background: linear-gradient(135deg, #000428, #004e92);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
   }
   .calculator{
    background: rgba(255, 255, 255, 0.1);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      padding: 20px;
      width: 350px;
      max-width: 90%;

   }

   .display {
      background: rgba(255, 255, 255, 0.2);
      box-shadow: inset 0 4px 12px rgba(255, 255, 255, 0.5);
      color: #fff;
      font-size: 2.5rem;
      text-align: right;
      padding: 20px 10px;
      border-radius: 10px;
      margin-bottom: 20px;
    }
    .buttons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px;
    }
    button {
      background: rgba(255, 255, 255, 0.1);
      border: none;
      box-shadow: 0 4px 15px rgba(0, 255, 255, 0.4), 0 0 10px rgba(0, 255, 255, 0.7) inset;
      color: #fff;
      font-size: 1.5rem;
      padding: 20px;
      border-radius: 12px;
      transition: transform 0.3s, box-shadow 0.3s;
      cursor: pointer;
    }

    button:active {
      transform: scale(0.95);
      box-shadow: 0 4px 25px rgba(0, 255, 255, 0.6), 0 0 15px rgba(0, 255, 255, 1) inset;
    }
    button.operator {
      background: rgba(255, 255, 255, 0.2);
      color: #00ffff;
      box-shadow: 0 4px 15px rgba(255, 165, 0, 0.5), 0 0 10px rgba(255, 165, 0, 0.7) inset;
    }

    button.operator:active {
      box-shadow: 0 4px 25px rgba(255, 165, 0, 0.7), 0 0 15px rgba(255, 165, 0, 1) inset;
    }


















  </style>
</head>
<body>
  <div class="calculator">
    <div class="display" id="display">0</div>
    <div class="buttons">
      <button onclick="clearDisplay()">C</button>
      <button onclick="inputOperator('/')">÷</button>
      <button onclick="inputOperator('*')">×</button>
      <button onclick="deleteDigit()">⌫</button>
      <button onclick="inputDigit('7')">7</button>
      <button onclick="inputDigit('8')">8</button>
      <button onclick="inputDigit('9')">9</button>
      <button class="operator" onclick="inputOperator('-')">−</button>
      <button onclick="inputDigit('4')">4</button>
      <button onclick="inputDigit('5')">5</button>
      <button onclick="inputDigit('6')">6</button>
      <button class="operator" onclick="inputOperator('+')">+</button>
      <button onclick="inputDigit('1')">1</button>
      <button onclick="inputDigit('2')">2</button>
      <button onclick="inputDigit('3')">3</button>
      <button rowspan="2" onclick="calculate()">=</button>
      <button onclick="inputDigit('0')">0</button>
      <button onclick="inputDigit('.')">.</button>
    </div>
  </div>
  <script>
    const display = document.getElementById("display");

    function inputDigit(digit) {
      if (display.innerText === "0") {
        display.innerText = digit;
      } else {
        display.innerText += digit;
      }
    }

    function inputOperator(operator) {
      const lastChar = display.innerText.slice(-1);
      if ("+-*/".includes(lastChar)) {
        display.innerText = display.innerText.slice(0, -1) + operator;
      } else {
        display.innerText += operator;
      }
    }

    function clearDisplay() {
      display.innerText = "0";
    }

    function deleteDigit() {
      display.innerText = display.innerText.slice(0, -1) || "0";
    }

    function calculate() {
      try {
        display.innerText = eval(display.innerText);
      } catch {
        display.innerText = "Error";
      }
    }
  </script>
</body>
</html>

DEV Community

Future of Calculator ui using html css and javascript.

Top comments (0)

Read next

Rust Source Code Reading: The thousands crate

WebAssembly + JavaScript: Building a Real-Time Image Processing Tool

Finally got some time to play with the new JSONata and Variables support for Step Functions, and I have to say, it is massive improvement. Check out my latest blog post, where I walk through a simple example of how easy it is to handle pagination now

Getting Started with Golang: A Beginner’s Guide