Created!
This commit is contained in:
commit
33cfdbde40
|
|
@ -0,0 +1,6 @@
|
||||||
|
# Ugly Calculator
|
||||||
|
|
||||||
|
It is a Calculator written in javascript while getting bored in college. Enjoy?!
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>Calculator</title>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="icon" type="image/x-icon" href="#">
|
||||||
|
<link href="style.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="calc-container">
|
||||||
|
<div>
|
||||||
|
<input type="text" name="out">
|
||||||
|
<input type="button" value="<" name="clear">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="button" value="1">
|
||||||
|
<input type="button" value="2">
|
||||||
|
<input type="button" value="3">
|
||||||
|
<input type="button" value="/">
|
||||||
|
|
||||||
|
<input type="button" value="4">
|
||||||
|
<input type="button" value="5">
|
||||||
|
<input type="button" value="6">
|
||||||
|
<input type="button" value="*">
|
||||||
|
|
||||||
|
<input type="button" value="7">
|
||||||
|
<input type="button" value="8">
|
||||||
|
<input type="button" value="9">
|
||||||
|
<input type="button" value="-">
|
||||||
|
|
||||||
|
<input type="button" value="0">
|
||||||
|
<input type="button" value=".">
|
||||||
|
<input type="button" value="+">
|
||||||
|
<input type="button" value="=">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
|
|
@ -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);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue