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