commit 33cfdbde40ccf09c5cb5ee34219f321819331b63 Author: PiyushXCoder Date: Wed Feb 28 19:09:07 2024 +0530 Created! diff --git a/README.md b/README.md new file mode 100644 index 0000000..8385fc0 --- /dev/null +++ b/README.md @@ -0,0 +1,6 @@ +# Ugly Calculator + +It is a Calculator written in javascript while getting bored in college. Enjoy?! + +![Screenshot](./screenshot.jpg) + diff --git a/index.html b/index.html new file mode 100644 index 0000000..c2c001b --- /dev/null +++ b/index.html @@ -0,0 +1,40 @@ + + + + Calculator + + + + + + +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + +
+
+ + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..43c2ccc --- /dev/null +++ b/main.js @@ -0,0 +1,70 @@ +document.querySelectorAll(".calc-container input[type=button]").forEach((e) => { + e.onclick = () => { + const c = e.value; + const out = document.querySelector(".calc-container input[name=out]"); + if (c == "=") { + try { + out.value = calc(out.value); + } catch (e) { + out.value = "Error"; + } + } + else if (e.name == "clear") { + if (out.value.length > 0) + out.value = out.value.substring(0, out.value.length - 1); + } else out.value += e.value; + } +}); + +let clearScreenTimmer = null; + +const createTimmer = () => { + clearTimmer = setTimeout(() => { + const out = document.querySelector(".calc-container input[name=out]"); + out.value = ""; + }, 1000); +} + +const removeTimmer = () => { + if (clearTimmer) clearTimeout(clearTimmer); +} + +document.querySelector(".calc-container input[name=clear]").onmousedown = createTimmer; +document.querySelector(".calc-container input[name=clear]").onmouseup = removeTimmer; +document.querySelector(".calc-container input[name=clear]").ontouchstart = createTimmer; +document.querySelector(".calc-container input[name=clear]").ontouchend = removeTimmer; + +const oprs = ["-", "+", "*", "/"]; + +const calc = (infix, opr = 0) => { + infix = infix.replace(" ", ""); + let answer = null; + let parts = infix.split(oprs[opr]); + + for (let i = 0; i < parts.length; i++) { + let num = Number(parts[i]); + if (isNaN(num) && opr < oprs.length) + num = calc(parts[i], opr + 1); + + if (answer == null) { + answer = num; + continue; + } + + switch (opr) { + case 3: + answer /= num; + break; + case 2: + answer *= num; + break; + case 1: + answer += num; + break; + case 0: + answer -= num; + break; + } + } + return answer; +} diff --git a/screenshot.jpg b/screenshot.jpg new file mode 100644 index 0000000..d8edc3e Binary files /dev/null and b/screenshot.jpg differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..6e065f6 --- /dev/null +++ b/style.css @@ -0,0 +1,67 @@ +body { + padding: 0; + margin: 0.5rem; +} + +.calc-container { + border: 2px solid black; + + width: calc(100% - 0.3rem); + max-width: 500px; + aspect-ratio: 8 / 10; + + display: grid; + grid-template-rows: 0.3fr 1fr; +} + +.calc-container>div:nth-child(1) { + width: 100%; + display: grid; + grid-template-columns: 3fr 1fr; +} + +.calc-container>div:nth-child(2) { + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; +} + +.calc-container input { + border-radius: 0; + border: none; + background-color: #ebebeb; + font-size: 2rem; + width: 100%; +} + +@media (hover: hover) { + .calc-container input:hover { + background-color: #dddddd; + } +} + +.calc-container input:active { + background-color: #fff; +} + +.calc-container input[name=clear] { + background-color: white; +} + +@media (hover: hover) { + .calc-container input[name=clear]:hover { + color: white; + background-color: #ff6161; + } +} + +.calc-container input[name=clear]:active { + background-color: #ff8383; +} + + +.calc-container input[name=out] { + background-color: white; + padding: 0 1rem; + width: calc(100%-2rem); +}