Skip to content

Commit d5a9e81

Browse files
Shubham AthawaneShubham Athawane
Shubham Athawane
authored and
Shubham Athawane
committed
Added JavaScrit, CSS and HTML Calculator
1 parent 349664b commit d5a9e81

3 files changed

Lines changed: 228 additions & 0 deletions

File tree

‎calculator/index.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="style.css" />
8+
<link
9+
rel="stylesheet"
10+
href="https://googleapis.com/css?family:Open+Sans:600,700"
11+
/>
12+
<title>Document</title>
13+
</head>
14+
<body>
15+
<div class="container">
16+
<div class="calculator">
17+
<div class="result">
18+
<div id="history">
19+
<p id="history-value" class="history-value"></p>
20+
</div>
21+
<div id="output">
22+
<p id="output-value"></p>
23+
</div>
24+
</div>
25+
<div id="keyboard">
26+
<button class="operator" id="clear">C</button>
27+
<button class="operator" id="backspace">CE</buttton>
28+
<button class="operator" id="%">%</button>
29+
<button class="operator" id="/">&#247;</button>
30+
<button class="number" id="7">7</button>
31+
<button class="number" id="8">8</button>
32+
<button class="number" id="9">9</button>
33+
<button class="operator" id="*">&times;</button>
34+
<button class="number" id="4">4</button>
35+
<button class="number" id="5">5</button>
36+
<button class="number" id="6">6</button>
37+
<button class="operator" id="-">-</button>
38+
<button class="number" id="1">1</button>
39+
<button class="number" id="2">2</button>
40+
<button class="number" id="3">3</button>
41+
<button class="operator" id="+">+</button>
42+
<button class="empty" id="empty"></button>
43+
<button class="number" id="0">0</button>
44+
<button class="empty" id="empty"></button>
45+
<button class="operator" id="=">=</button>
46+
</div>
47+
</div>
48+
</div>
49+
<script src="main.js"></script>
50+
</body>
51+
</html>

‎calculator/main.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
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 = getFormatedNumber(num);
15+
}
16+
}
17+
18+
function getFormatedNumber(num){
19+
if (num=="-"){
20+
return "";
21+
}
22+
var n = Number(num);
23+
var value = n.toLocaleString('en');
24+
return value
25+
}
26+
27+
function reverseNumberFormate(num){
28+
return Number(num.replace(/,/g,''));
29+
}
30+
31+
var operator = document.getElementsByClassName("operator");
32+
for(var i = 0;i<operator.length;i++){
33+
operator[i].addEventListener('click', function(){
34+
if(this.id=="clear"){
35+
printHistory("");
36+
printOutput("");
37+
}
38+
else if(this.id=="backspace"){
39+
var output = reverseNumberFormate(getOutput()).toString();
40+
if(output){
41+
output = output.substr(0, output.length-1)
42+
printOutput(output)
43+
}
44+
}else{
45+
var output = getOutput();
46+
var history = getHistory();
47+
if(output=="" && history!=""){
48+
if(isNaN(history[history.length-1])){
49+
history = history.substr(0, history.length-1)
50+
}
51+
}
52+
if(output!="" || history!=""){
53+
// Conditional operator
54+
output = output=="" ? output: reverseNumberFormate(output)
55+
history=history+output;
56+
if(this.id == "="){
57+
var result = eval(history);
58+
printOutput(result);
59+
printHistory("");
60+
}else{
61+
history=history+this.id;
62+
printHistory(history)
63+
printOutput("");
64+
}
65+
}
66+
}
67+
})
68+
}
69+
var number = document.getElementsByClassName("number");
70+
for(var i = 0;i<number.length;i++){
71+
number[i].addEventListener('click', function(){
72+
var output = reverseNumberFormate(getOutput())
73+
if(output!=NaN){
74+
output=output+this.id;
75+
printOutput(output);
76+
}
77+
})
78+
}
79+
80+
81+
82+
83+

‎calculator/style.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
body {
2+
font-family: "Open Sans", sans-serif;
3+
background-color: #fad0c4;
4+
background-image: linear-gradient(315deg, #fad0c4 0%, #f1a7f1 74%);
5+
}
6+
7+
.container {
8+
/* width: 1000px;
9+
height: 1000px; */
10+
background-color: #a4508b;
11+
background-image: linear-gradient(326deg, #a4508b 0%, #5f0a87 74%);
12+
margin: 20px auto;
13+
}
14+
15+
.calculator {
16+
width: 320px;
17+
height: 520px;
18+
background-color: #eaedef;
19+
/* background-image: linear-gradient(315deg, #95a5ff59 0%, #ececec 74%); */
20+
margin: 0 auto;
21+
top: 20px;
22+
position: relative;
23+
}
24+
25+
.result{
26+
height: 120px;
27+
}
28+
#history{
29+
text-align: right;
30+
height: 20px;
31+
margin: 0 20px;
32+
padding-top: 20px;
33+
font-size: 15px;
34+
color: #919191;
35+
}
36+
37+
#output{
38+
text-align: right;
39+
height: 60px;
40+
margin: 10px 20px;
41+
font-size: 30px;
42+
}
43+
44+
#keyboard{
45+
height: 400px;
46+
}
47+
.operator, .number, .empty{
48+
width: 50px;
49+
height: 50px;
50+
margin: 15px;
51+
float: left;
52+
border-radius: 50%;
53+
border-width: 0;
54+
font-weight:bold ;
55+
font-size: 15px;
56+
}
57+
58+
.number, .empty{
59+
background-color: #eaedef;
60+
}
61+
.number, .operator{
62+
cursor: pointer;
63+
}
64+
65+
.operator:active, .number:active{
66+
font-size: 13px;
67+
}
68+
69+
.operator:focus, .number:focus, .empty:focus{
70+
outline: 0;
71+
}
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+
94+

0 commit comments

Comments
 (0)