Skip to content

Commit a1398a7

Browse files
shivamksharmashivamksharma
committed
feat: adding simple calculator v1
1 parent 775de9f commit a1398a7

File tree

4 files changed

+217
-0
lines changed

4 files changed

+217
-0
lines changed

‎project_26/bgImg.jpg

35.9 KB
Loading

‎project_26/index.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" type="text/css" href="style.css" />
4+
<link
5+
href="https://fonts.googleapis.com/css?family=Open+Sans:600,700"
6+
rel="stylesheet"
7+
/>
8+
<title>Simple Calculator v1</title>
9+
</head>
10+
<body>
11+
<div id="container">
12+
<div id="calculator">
13+
<div id="result">
14+
<div id="history">
15+
<p id="history-value"></p>
16+
</div>
17+
<div id="output">
18+
<p id="output-value"></p>
19+
</div>
20+
</div>
21+
<div id="keyboard">
22+
<button class="operator" id="clear">C</button>
23+
<button class="operator" id="backspace">CE</button>
24+
<button class="operator" id="%">%</button>
25+
<button class="operator" id="/">&#247;</button>
26+
<button class="number" id="7">7</button>
27+
<button class="number" id="8">8</button>
28+
<button class="number" id="9">9</button>
29+
<button class="operator" id="*">&times;</button>
30+
<button class="number" id="4">4</button>
31+
<button class="number" id="5">5</button>
32+
<button class="number" id="6">6</button>
33+
<button class="operator" id="-">-</button>
34+
<button class="number" id="1">1</button>
35+
<button class="number" id="2">2</button>
36+
<button class="number" id="3">3</button>
37+
<button class="operator" id="+">+</button>
38+
<button class="empty" id="empty"></button>
39+
<button class="number" id="0">0</button>
40+
<button class="empty" id="empty"></button>
41+
<button class="operator" id="=">=</button>
42+
</div>
43+
</div>
44+
</div>
45+
<script src="script.js"></script>
46+
</body>
47+
</html>
48+

‎project_26/script.js

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
function getHistory() {
2+
return document.getElementById("history-value").innerText;
3+
}
4+
function printHistory(num) {
5+
document.getElementById("history-value").innerText = num;
6+
}
7+
function getOutput() {
8+
return document.getElementById("output-value").innerText;
9+
}
10+
function printOutput(num) {
11+
if (num == "") {
12+
document.getElementById("output-value").innerText = num;
13+
} else {
14+
document.getElementById("output-value").innerText = getFormattedNumber(num);
15+
}
16+
}
17+
function getFormattedNumber(num) {
18+
if (num == "-") {
19+
return "";
20+
}
21+
var n = Number(num);
22+
var value = n.toLocaleString("en");
23+
return value;
24+
}
25+
function reverseNumberFormat(num) {
26+
return Number(num.replace(/,/g, ""));
27+
}
28+
var operator = document.getElementsByClassName("operator");
29+
for (var i = 0; i < operator.length; i++) {
30+
operator[i].addEventListener("click", function () {
31+
if (this.id == "clear") {
32+
printHistory("");
33+
printOutput("");
34+
} else if (this.id == "backspace") {
35+
var output = reverseNumberFormat(getOutput()).toString();
36+
if (output) {
37+
//if output has a value
38+
output = output.substr(0, output.length - 1);
39+
printOutput(output);
40+
}
41+
} else {
42+
var output = getOutput();
43+
var history = getHistory();
44+
if (output == "" && history != "") {
45+
if (isNaN(history[history.length - 1])) {
46+
history = history.substr(0, history.length - 1);
47+
}
48+
}
49+
if (output != "" || history != "") {
50+
output = output == "" ? output : reverseNumberFormat(output);
51+
history = history + output;
52+
if (this.id == "=") {
53+
var result = eval(history);
54+
printOutput(result);
55+
printHistory("");
56+
} else {
57+
history = history + this.id;
58+
printHistory(history);
59+
printOutput("");
60+
}
61+
}
62+
}
63+
});
64+
}
65+
var number = document.getElementsByClassName("number");
66+
for (var i = 0; i < number.length; i++) {
67+
number[i].addEventListener("click", function () {
68+
var output = reverseNumberFormat(getOutput());
69+
if (output != NaN) {
70+
//if output is a number
71+
output = output + this.id;
72+
printOutput(output);
73+
}
74+
});
75+
}
76+

‎project_26/style.css

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
body {
2+
font-family: "Open Sans", sans-serif;
3+
background-color: black;
4+
}
5+
#container {
6+
width: 1000px;
7+
height: 550px;
8+
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
9+
url(bgImg.jpg);
10+
margin: 20px auto;
11+
}
12+
#calculator {
13+
width: 320px;
14+
height: 520px;
15+
background-color: #eaedef;
16+
margin: 0 auto;
17+
top: 20px;
18+
position: relative;
19+
border-radius: 5px;
20+
box-shadow:
21+
0 4px 8px 0 rgba(0, 0, 0, 0.2),
22+
0 6px 20px 0 rgba(0, 0, 0, 0.19);
23+
}
24+
#result {
25+
height: 120px;
26+
}
27+
#history {
28+
text-align: right;
29+
height: 20px;
30+
margin: 0 20px;
31+
padding-top: 20px;
32+
font-size: 15px;
33+
color: #919191;
34+
}
35+
#output {
36+
text-align: right;
37+
height: 60px;
38+
margin: 10px 20px;
39+
font-size: 30px;
40+
}
41+
#keyboard {
42+
height: 400px;
43+
}
44+
.operator,
45+
.number,
46+
.empty {
47+
width: 50px;
48+
height: 50px;
49+
margin: 15px;
50+
float: left;
51+
border-radius: 50%;
52+
border-width: 0;
53+
font-weight: bold;
54+
font-size: 15px;
55+
}
56+
.number,
57+
.empty {
58+
background-color: #eaedef;
59+
}
60+
.number,
61+
.operator {
62+
cursor: pointer;
63+
}
64+
.operator:active,
65+
.number:active {
66+
font-size: 13px;
67+
}
68+
.operator:focus,
69+
.number:focus,
70+
.empty:focus {
71+
outline: 0;
72+
}
73+
button:nth-child(4) {
74+
font-size: 20px;
75+
background-color: #20b2aa;
76+
}
77+
button:nth-child(8) {
78+
font-size: 20px;
79+
background-color: #ffa500;
80+
}
81+
button:nth-child(12) {
82+
font-size: 20px;
83+
background-color: #f08080;
84+
}
85+
button:nth-child(16) {
86+
font-size: 20px;
87+
background-color: #7d93e0;
88+
}
89+
button:nth-child(20) {
90+
font-size: 20px;
91+
background-color: #9477af;
92+
}
93+

0 commit comments

Comments
 (0)