Update repo

2026-02-09 12:54:08 +00:00
4 changed files with 0 additions and 192 deletions
@@ -1,41 +0,0 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Calculator</title>
  </head>
  <body>
    <div class="calculator">
      <input type="text" id="display" disabled />
      <button class="clear">C</button>
      <button class="backspace">←</button>
      <button class="operator">÷</button>
      <button class="number">7</button>
      <button class="number">8</button>
      <button class="number">9</button>
      <button class="operator">×</button>
      <button class="number">4</button>
      <button class="number">5</button>
      <button class="number">6</button>
      <button class="operator">-</button>
      <button class="number">1</button>
      <button class="number">2</button>
      <button class="number">3</button>
      <button class="operator">+</button>
      <button class="large number">0</button>
      <button class="result">=</button>
    </div>
    <script src="./script.js"></script>
  </body>
 </html>
@@ -1,92 +0,0 @@
 const display = document.querySelector("#display");
 let previousNumber = 0;
 let lastOperation = "";
 function doOperation(operation, numA, numB) {
  numA = Number(numA);
  numB = Number(numB);
  switch (operation) {
    case "+":
      return numA + numB;
      break;
    case "÷":
      return numA / numB;
      break;
    case "×":
      return numA * numB;
      break;
    case "-":
      return numA - numB;
      break;
  }
 }
 //Set numbers logic
 const numbers = document.querySelectorAll(".number");
 numbers.forEach((number) => {
  number.addEventListener("click", (event) => {
    updateDisplay(event.target.innerText);
  });
 });
 function updateDisplay(number) {
  let currentResult = display.value;
  if (currentResult === "0") {
    display.value = number;
  } else {
    display.value += number;
  }
 }
 function reset() {
  display.value = "0";
  previousNumber = "0";
  lastOperation = "";
 }
 // Set clear button
 const clearButton = document.querySelector(".clear");
 clearButton.addEventListener("click", () => {
  reset();
 });
 // Set backspace button
 backspaceButton = document.querySelector(".backspace");
 backspaceButton.addEventListener("click", () => {
  let result = display.value;
  result = result.slice(0, -1);
  if (result.length === 0) {
    result = "0";
  }
  display.value = result;
 });
 // Operations
 const operators = document.querySelectorAll(".operator");
 operators.forEach((operator) => {
  operator.addEventListener("click", (event) => {
    if (lastOperation) {
      previousNumber = doOperation(
        lastOperation,
        previousNumber,
        display.value,
      );
    } else {
      previousNumber = Number(display.value);
    }
    display.value = "0";
    lastOperation = event.target.innerText;
  });
 });
 // Result button
 const resultButton = document.querySelector(".result");
 resultButton.addEventListener("click", (event) => {
  if (lastOperation) {
    display.value = doOperation(lastOperation, previousNumber, display.value);
  }
 });
 reset();
@@ -1,59 +0,0 @@
 body {
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
 }
 .calculator {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    border-collapse: collapse;
    border-radius: 0;
 }
 #display {
    grid-column: 1 / 5;
    height: 100px;
    width: 400px;
    background-color: black;
    color: white;
    text-align: right;
    font-size: 75px;
 }
 button {
    height: 100px;
    font-size: 50px;
    background-color: #d8d9db;
    border: 1px solid black;
    padding: 0;
 }
 button:hover {
    background-color: #ebebeb;
 }
 .operator {
    background-color: #df974c;
    color: white;
 }
 .operator:hover {
    background-color: #dfb07e;
 }
 .clear {
    grid-column: 1 / 3;
 }
 .large {
    grid-column: 1 / 4;
 }