Calculator

by phollome

HTML

<html>

  <head>
    <title>Test</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  </head>

  <body class="bg-gradient-to-br to-gray-600 from-gray-400">
    <div class="flex min-h-dvh p-4 justify-center items-center">
      <div class="flex flex-col gap-1 bg-gradient-to-b from-slate-700 to-slate-900 p-8 rounded-lg shadow-xl shadow-gray-800">
        <div class="flex gap-1 max-w-80">
          <label htmlFor="value" class="hidden">value</label>
          <input id="display" class="w-full h-16 text-5xl rounded-lg px-2 text-stone-600 text-right bg-stone-300 pointer-events-none font-mono shadow-inner shadow-stone-800 mb-8 text-ellipsis" value="0" />
        </div>
        <div class="flex gap-1 max-w-80">
          <button id="7" class="block text-3xl font-bold bg-gray-600 active: bg-gray-700 text-gray-200 rounded-xl w-full h-16 shadow-inner shadow-gray-500 active:shadow-gray-800 border-2 border-slate-900">7</button>
          <button id="8" class="block text-3xl font-bold bg-gray-600 active: bg-gray-700 text-gray-200 rounded-xl w-full h-16 shadow-inner shadow-gray-500 active:shadow-gray-800 border-2 border-slate-900">8</button>
          <button id="9" class="block text-3xl font-bold bg-gray-600 active: bg-gray-700 text-gray-200 rounded-xl w-full h-16 shadow-inner shadow-gray-500 active:shadow-gray-800 border-2 border-slate-900">9</button>
          <button id="clear" class="block text-3xl font-bold bg-gray-600 active: bg-gray-700 text-gray-200 rounded-xl w-full h-16 shadow-inner shadow-gray-500 active:shadow-gray-800 border-2 border-slate-900 bg-red-600 active: bg-red-700 shadow-red-500 active:shadow-red-800">
            C
          </button>

        </div>
        <div class="flex gap-1 max-w-80">
          <button id="4" class="btn">4</button>
          <button id="5" class="btn">5</button>
          <button id="6" class="btn">6</button>
          <button id="addition" class="btn operation">+</button>

       ...

CSS

body {
  @apply bg-gradient-to-br to-gray-600 from-gray-400;
}

.stage {
  @apply flex min-h-dvh p-4 justify-center items-center;
}

.widget {
  @apply flex flex-col gap-1 bg-gradient-to-b from-slate-700 to-slate-900 p-8 rounded-lg shadow-xl shadow-gray-800;
}

input#display {
  @apply w-full h-16 text-5xl rounded-lg px-2 text-stone-600 text-right bg-stone-300 pointer-events-none font-mono shadow-inner shadow-stone-800 mb-8 text-ellipsis;
}

.row {
  @apply flex gap-1 max-w-80;
}

.btn {
  @apply block text-3xl font-bold bg-gray-600 active: bg-gray-700 text-gray-200 rounded-xl w-full h-16 shadow-inner shadow-gray-500 active:shadow-gray-800 border-2 border-slate-900;
}

.btn.operation {
  @apply bg-yellow-600 active: bg-yellow-700 shadow-yellow-500 active:shadow-yellow-800;
}

.btn.clear {
  @apply bg-red-600 active: bg-red-700 shadow-red-500 active:shadow-red-800;
}

.btn#show-result {
  @apply bg-green-600 active: bg-green-700 shadow-green-500 active:shadow-green-800;
}

JavaScript

const display = document.getElementById("display");

function type(value) {
  const currentValue = display.value;

  if (currentValue == 0 || currentValue == lastValue) {
    display.value = value;
  } else {
    display.value = currentValue + value;
  }
}

let lastValue = 0;
let operation = null;

document.getElementById("addition").onclick = function() {
  const currentValue = display.value;

  if (operation == "addition") {
    lastValue = lastValue + Number.parseInt(currentValue);
  } else if (operation == "subtraction") {
    lastValue = lastValue - Number.parseInt(currentValue);
  } else {
    lastValue = Number.parseInt(currentValue);
  }
  operation = "addition";
  display.value = lastValue;
};

document.getElementById("subtraction").onclick = function() {
  const currentValue = display.value;

  if (operation == "addition") {
    lastValue = lastValue + Number.parseInt(currentValue);
  } else if (operation == "subtraction") {
    lastValue = lastValue - Number.parseInt(currentValue);
  } else {
    lastValue = Number.parseInt(currentValue);
  }
  operation = "subtraction";
  display.value = lastValue;
};

document.getElementById("show-result").onclick = function() {
  const currentValue = display.value;

  if (operation == "addition") {
    lastValue = lastValue + Number.parseInt(currentValue);
  } else if (operation == "subtraction") {
    lastValue = lastValue - Number.parseInt(currentValue);
  } else {
    lastValue = Number.parseInt(currentValue);
  }
  display.value = lastValue;
  operation = null;
};

document.getElementById("0").onclick = function() {
  type(0);
};
document.getElementById("1").onclick = function() {
  type(1);
};
document.getElementById("2").onclick = function() {
  type(2);
};
document.getElementById("3").onclick = function() {
  type(3);
};
document.getElementById("4").onclick = function() {
  type(4);
};
document.getElementById("5").onclick = function() {
  type(5);
};
document.getElementById("6").onclick = function() {
 ...