Skip to content

Commit b1bcecb

Browse files
cromega08cromega08
committed
PHPmyCalculator
0 parents  commit b1bcecb

File tree

3 files changed

+281
-0
lines changed

3 files changed

+281
-0
lines changed

‎app.js

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
const buttons = Array.from(document.querySelectorAll("div > button"))
2+
const numericButtons = buttons.filter(button => button.innerText.match(/\d/g))
3+
const operatorsButtons = buttons.filter(button => button.innerText.match(/\+|\-|·|÷/g))
4+
const decimalButton = buttons.filter(button => button.innerText == ",")[0]
5+
const clearButton = buttons.filter(button => button.innerText == "C")[0]
6+
const numberInput = document.querySelector("input[name=\"number\"]")
7+
const operatorInput = document.querySelector("input[name=\"operator\"]")
8+
const operationInput = document.querySelector("input[name=\"operation\"]")
9+
const calculateInput = document.querySelector("input[name=\"calculate\"]")
10+
const submitButton = document.querySelector("button[type=\"submit\"]")
11+
const form = document.querySelector("form[name=\"calculate\"]")
12+
13+
let nextDecimal = false
14+
15+
operatorsButtons.forEach(
16+
operators => operators.addEventListener(
17+
"mouseup",
18+
() => {
19+
operationInput.value += operatorInput.value + numberInput.value
20+
operatorInput.value = operators.value
21+
form.submit()
22+
}
23+
)
24+
)
25+
26+
numericButtons.forEach(
27+
number => number.addEventListener(
28+
"mouseup",
29+
() => {
30+
const numberValue = number.value
31+
32+
if (nextDecimal) numberInput.value += ".".concat(numberValue)
33+
else if (numberInput.value === "0") numberInput.value = numberValue
34+
else numberInput.value += numberValue
35+
36+
nextDecimal = false
37+
38+
limitInput()
39+
}
40+
)
41+
)
42+
43+
decimalButton.addEventListener(
44+
"mouseup",
45+
() => nextDecimal = numberInput.value.includes(".")? false:true
46+
)
47+
48+
clearButton.addEventListener(
49+
"mouseup",
50+
() => numberInput.value = "0"
51+
)
52+
53+
numberInput.addEventListener("input", limitInput)
54+
55+
numberInput.addEventListener("change", limitInput)
56+
57+
submitButton.addEventListener(
58+
"mousedown",
59+
() => {
60+
operationInput.value += operatorInput.value + numberInput.value
61+
calculateInput.value = "true"
62+
form.submit()
63+
}
64+
)
65+
66+
function limitInput() {
67+
if (numberInput.value.length > 13) numberInput.value = numberInput.value.slice(0, 13)
68+
}

‎index.php

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>PHPmyCalculator</title>
9+
<link rel="stylesheet" href="style.css">
10+
<script src="app.js" defer></script>
11+
</head>
12+
13+
<!--
14+
TODO: Implement the logic for the calculator using the form
15+
- The logic of the calculator need to be implemented in php
16+
- Can add a final 0 + at the start of the total operation
17+
- Implement the logic to assign the value to total and calculate the "equal"
18+
- Implement the logic to calculate
19+
- Check to use the title to display the value or another element, using the input only for the new value
20+
-->
21+
22+
<body>
23+
<header>
24+
<h1>
25+
<?php
26+
if (isset($_POST["operation"])) {
27+
$operation = $_POST["operation"];
28+
eval("echo $operation;");
29+
} else {echo "PHPmyCalculator";}
30+
?>
31+
</h1>
32+
</header>
33+
<main>
34+
<section>
35+
<form name="calculate" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST">
36+
<input type="number" name="number" id="value" value="0" min="<?php echo PHP_INT_MIN; ?>"
37+
max="<?php echo PHP_INT_MAX; ?>" step="1" pattern="\d{1}" required>
38+
<input type="hidden" name="operator"
39+
value="<?php echo isset($_POST["operator"])? $_POST["operator"]:"+"?>">
40+
<input type="hidden" name="operation" value="<?php
41+
if (isset($_POST["calculate"]) && $_POST["calculate"] == "true") echo "0";
42+
else echo isset($_POST["operation"])? $_POST["operation"]:"0";
43+
?>">
44+
<input type="hidden" name="calculate" value="false">
45+
<button type="submit">=</button>
46+
</form>
47+
</section>
48+
<aside>
49+
<div>
50+
<button value="+">+</button>
51+
<button value="-">-</button>
52+
<button value="*">&CenterDot;</button>
53+
<button value="/">&divide;</button>
54+
</div>
55+
<div>
56+
<button value="1">1</button>
57+
<button value="2">2</button>
58+
<button value="3">3</button>
59+
<button value="4">4</button>
60+
</div>
61+
<div>
62+
<button value="5">5</button>
63+
<button value="6">6</button>
64+
<button value="7">7</button>
65+
<button value="8">8</button>
66+
</div>
67+
<div>
68+
<button value="9">9</button>
69+
<button value="0">0</button>
70+
<button value=".">,</button>
71+
<button value="clear">C</button>
72+
</div>
73+
</aside>
74+
</main>
75+
</body>
76+
77+
</html>

‎style.css

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
:root {
2+
--main: #3F0071;
3+
--second: #FB2576;
4+
--third: #332FD0;
5+
--contrast: #0002A1;
6+
}
7+
8+
/* * {outline: solid red;} */
9+
10+
body {
11+
overflow: hidden;
12+
width: 100vw;
13+
height: 100vh;
14+
background-color: var(--main);
15+
display: grid;
16+
justify-items: center;
17+
align-items: flex-start;
18+
margin: unset;
19+
}
20+
21+
header {
22+
align-self: center;
23+
}
24+
25+
h1 {
26+
color: var(--main);
27+
font-weight: 500;
28+
-webkit-text-stroke-width: 2px;
29+
-webkit-text-stroke-color: var(--second);
30+
}
31+
32+
main {
33+
display: flex;
34+
flex-direction: column;
35+
justify-content: center;
36+
align-items: center;
37+
}
38+
39+
form {
40+
width: auto;
41+
margin: 3vh 0;
42+
display: flex;
43+
flex-direction: row;
44+
justify-content: center;
45+
align-items: center;
46+
column-gap: 2vmax;
47+
}
48+
49+
input[type="number"] {
50+
transition-property: background-color, color, border-color;
51+
transition-duration: 500ms;
52+
width: 25vmin;
53+
height: 6vmin;
54+
background-color: var(--second);
55+
color: var(--main);
56+
border-radius: 2em;
57+
border-style: solid;
58+
border-color: var(--contrast);
59+
border-width: .25em;
60+
font-size: 2em;
61+
text-align: start;
62+
padding: .25em 1em;
63+
}
64+
65+
input[type="number"]:hover,
66+
input[type="number"]:focus {
67+
background-color: var(--main);
68+
color: var(--second);
69+
border-color: var(--second);
70+
outline: none;
71+
}
72+
73+
input[type="number"]::-webkit-inner-spin-button,
74+
input[type="number"]::-webkit-outer-spin-button {
75+
appearance: none;
76+
margin: 0;
77+
}
78+
79+
form > button {
80+
background-color: var(--second);
81+
color: var(--main);
82+
border-color: var(--contrast);
83+
}
84+
85+
form > button:hover {
86+
background-color: var(--main);
87+
color: var(--second);
88+
border-color: var(--second);
89+
}
90+
91+
div {
92+
margin: 1.5vh 0;
93+
display: flex;
94+
flex-direction: row;
95+
justify-content: space-evenly;
96+
align-items: center;
97+
column-gap: 2vmax;
98+
}
99+
100+
aside {
101+
display: flex;
102+
flex-direction: column;
103+
justify-content: center;
104+
align-items: center;
105+
}
106+
107+
button {
108+
transition-property: scale, color, border-color, border-width;
109+
transition-duration: 250ms;
110+
aspect-ratio: 1/1;
111+
width: 10vmin;
112+
scale: 1;
113+
background-color: var(--contrast);
114+
color: var(--second);
115+
border-radius: 50%;
116+
border-style: solid;
117+
border-width: .25em;
118+
border-color: var(--third);
119+
font-size: 2em;
120+
text-align: center;
121+
}
122+
123+
button:hover,
124+
button:active {
125+
color: var(--second);
126+
border-width: .3em;
127+
border-color: var(--second);
128+
}
129+
130+
button:hover {
131+
scale: 1.25;
132+
}
133+
134+
button:active {
135+
scale: .75;
136+
}

0 commit comments

Comments
 (0)