<main>
<section class="grid grid-cols-4 my-20 text-4xl">
<div class="screen col-span-4 h-20 text-right leading-[5rem] px-2 bg-black text-white"> 0 </div>
<button class="button-clear col-span-2 bg-gray-300 hover:bg-gray-400 border-solid border-e-2 border-b-2 border-black">
C
</button>
<button class="button-back bg-gray-300 hover:bg-gray-400 border-solid border-e-2 border-b-2 border-black"> ←
</button>
<button class="button-divide h-20 bg-green-400 hover:bg-green-500 border-solid border-s-2 border-b-2 border-black">
÷
</button>
<button class="button-digit bg-gray-300 hover:bg-gray-400 border-solid border-e-2 border-b-2 border-black">
7
</button>
<button class="button-digit bg-gray-300 hover:bg-gray-400 border-solid border-e-2 border-b-2 border-black">
8 </button>
<button class="button-digit bg-gray-300 hover:bg-gray-400 border-solid border-e-2 border-b-2 border-black">
9 </button>
<button class="button-multiply h-20 bg-green-400 hover:bg-green-500 border-solid border-s-2 border-b-2 border-black">
×
</button>
<button class="button-digit bg-gray-300 hover:bg-gray-400 border-solid border-e-2 border-b-2 border-black">
4 </button>
<button class="button-digit bg-gray-300 hover:bg-gray-400 border-solid border-e-2 border-b-2 border-black">
5 </button>
<button class="button-digit bg-gray-300 hover:bg-gray-400 border-solid border-e-2 border-b-2 border-black">
6 </button>
<button class="button-minus h-20 bg-green-400 hover:bg-green-500 border-solid border-s-2 border-b-2 border-black">
- </button>
<button class="button-digit bg-gray-300 hover:bg-gray-400 border-solid border-e-2 border-b-2 border-black">
1 </button>
<button class="button-digit bg-gray-300 hover:bg-gray-400 border-solid border-e-2 border-b-2 border-black">
2 </button>
<button class="button-digit bg-gray-300 hover:bg-gray-400 border-solid border-e-2 border-b-2 border-black">
3 </button>
<button class="button-plus h-20 bg-green-400 hover:bg-green-500 border-solid border-s-2 border-b-2 border-black"> + </button>
<button class="button-digit col-span-3 bg-gray-300 hover:bg-gray-400 border-solid border-e-2 border-black"> 0
</button>
<button class="button-equals h-20 bg-green-400 hover:bg-green-500 border-solid border-s-2 border-black">
<span class="spinny-boi"> = </span>
</button>
</section>
</main>
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.spinny-boi {
animation: spin 1.5s infinite linear;
display: inline-block;
font-size: 30px;
}
console.log("Starting script...");
const screen = document.querySelector(".screen");
let a = 0;
let b = 0;
let op = "+";
let opToggled = false;
function calculate(op) {
switch (op) {
case "+":
a += b;
break;
case "-":
a -= b;
break;
case "×":
a *= b;
break;
case "÷":
a /= b;
break;
default:
return a;
}
}
function output(x) {
screen.innerText = x;
return x;
}
/// special buttons
// for debugging, click on the screen
screen.addEventListener("click", function () {
console.log(`a:${a} b:${b} op:${op}`);
});
const buttonClear = document.querySelector(".button-clear");
buttonClear.addEventListener("click", function () {
screen.innerText = "0";
a = 0;
b = 0;
opToggled = false;
});
const buttonBack = document.querySelector(".button-back");
buttonBack.addEventListener("click", function () {
x = parseInt(screen.innerText);
if (x < 10) {
x = 0;
} else {
x = Math.floor(x / 10);
}
if (!opToggled) {
a = x;
} else {
b = x;
}
output(x);
});
const buttonEquals = document.querySelector(".button-equals");
buttonEquals.addEventListener("click", function () {
calculate(op);
console.log(output(a));
b = 0;
opToggled = false;
});
/// operations
const buttonPlus = document.querySelector(".button-plus");
buttonPlus.addEventListener("click", function () {
op = "+";
opToggled = true;
screen.innerText = " ";
});
const buttonMinus = document.querySelector(".button-minus");
buttonMinus.addEventListener("click", function () {
op = "-";
opToggled = true;
screen.innerText = " ";
});
const buttonMultiply = document.querySelector(".button-multiply");
buttonMultiply.addEventListener("click", function () {
op = "×";
opToggled = true;
screen.innerText = " ";
});
const buttonDivide = document.querySelector(".button-divide");
buttonDivide.addEventListener("click", function () {
op = "÷";
opToggled = true;
screen.innerText = " ";
});
/// digits
const digitButtons = document.querySelectorAll(".button-digit");
digitButtons.forEach((button) => {
button.addEventListener("click", function (event) {
v = parseInt(event.target.innerText);
out = v;
if (!opToggled) {
a = a * 10 + v;
out = a;
} else {
b = b * 10 + v;
out = b;
}
output(out);
});
});
This Pen doesn't use any external JavaScript resources.