Skip to content

Commit 8a10139

Browse files
JedmedJedmed
committed
calculator project
1 parent a1eb9c9 commit 8a10139

File tree

3 files changed

+160
-0
lines changed

3 files changed

+160
-0
lines changed

‎calculator/app.js

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
$(() => {
2+
let value = 0;
3+
let savedValue = 0;
4+
let operator = '';
5+
6+
// Display output
7+
const output = (param) => {
8+
$('.output p').text(param);
9+
}
10+
11+
// Reset values
12+
const reset = () => {
13+
value = 0;
14+
savedValue = 0;
15+
output(value);
16+
}
17+
18+
// Stores value of number pressed
19+
const numberPress = (event) => {
20+
if (value === 0) {
21+
value = $(event.currentTarget).text();
22+
output(value)
23+
} else if (value !== 0) {
24+
value += $(event.currentTarget).text();
25+
output(value)
26+
}
27+
}
28+
29+
// Check operator pressed and stores value
30+
const operatorPress = (event) => {
31+
operator = $(event.currentTarget).text();
32+
savedValue = value;
33+
value = 0;
34+
}
35+
36+
// Calculates final value
37+
const calculator = () => {
38+
if (operator === '+') {
39+
let finalValue = parseInt(savedValue) + parseInt(value)
40+
output(finalValue);
41+
} else if (operator === '-') {
42+
let finalValue = parseInt(savedValue) - parseInt(value)
43+
output(finalValue);
44+
} else if (operator === '*') {
45+
let finalValue = parseInt(savedValue) * parseInt(value)
46+
output(finalValue);
47+
} else if (operator === '/') {
48+
let finalValue = parseInt(savedValue) / parseInt(value)
49+
output(finalValue);
50+
}
51+
}
52+
53+
$('.operator').on('click', operatorPress);
54+
$('.number').on('click', numberPress);
55+
$('.equals').on('click', calculator);
56+
$('.reset').on('click', reset);
57+
});

‎calculator/index.html

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<link rel="stylesheet" href="style.css">
7+
<title>Calculator</title>
8+
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
9+
<script src="app.js" charset="utf-8"></script>
10+
</head>
11+
12+
<body>
13+
<div class="container">
14+
<div class="output">
15+
<p>0</p>
16+
</div>
17+
<div class="row">
18+
<div class="column-1">
19+
<button class="number">1</button>
20+
<button class="number">2</button>
21+
<button class="number">3</button>
22+
<button class="number">4</button>
23+
<button class="number">5</button>
24+
<button class="number">6</button>
25+
<button class="number">7</button>
26+
<button class="number">8</button>
27+
<button class="number">9</button>
28+
<button class="number">0</button>
29+
</div>
30+
<div class="column-2">
31+
<button class="reset">CE</button>
32+
<button class="operator">+</button>
33+
<button class="operator">-</button>
34+
<button class="operator">*</button>
35+
<button class="operator">/</button>
36+
<button class="equals">=</button>
37+
</div>
38+
</div>
39+
</div>
40+
</body>
41+
42+
</html>

‎calculator/style.css

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
.container {
2+
max-width: 545px;
3+
border: 1px solid black;
4+
border-radius: 10px;
5+
margin: auto;
6+
padding: 50px 20px;
7+
background-color: darkblue;
8+
}
9+
10+
.output {
11+
background-color: grey;
12+
border-radius: 5px;
13+
padding: 30px 50px;
14+
margin-bottom: 20px;
15+
}
16+
17+
.output p {
18+
font-size: 38px;
19+
margin: 0;
20+
text-align: right;
21+
}
22+
23+
button {
24+
font-size: 30px;
25+
border-radius: 5px;
26+
}
27+
28+
.row {
29+
display: flex;
30+
}
31+
32+
.column-1 {
33+
display: flex;
34+
width: 75%;
35+
overflow: hidden;
36+
flex-wrap: wrap;
37+
justify-content: space-between;
38+
}
39+
40+
.column-2 {
41+
display: flex;
42+
width: 25%;
43+
flex-flow: column;
44+
overflow: hidden;
45+
flex-wrap: wrap;
46+
}
47+
48+
.number {
49+
width: calc(100% * (1/3) - 10px - 1px);
50+
margin: 10px 0 0 10px;
51+
flex-grow: 1;
52+
height: 100px;
53+
}
54+
55+
.operator,
56+
.equals,
57+
.reset {
58+
width: calc(100% - 10px - 1px);
59+
margin: 10px 0 0 10px;
60+
flex-grow: 1;
61+
}

0 commit comments

Comments
 (0)