Skip to content

Commit 17d54e8

Browse files
Nivedita-coderNivedita-coder
authored
Merge pull request Nivedita-coder#6 from AbhilashaGupta16/main
Simple Calculator using using html and css
2 parents 0f29fd2 + 8cd60dd commit 17d54e8

2 files changed

Lines changed: 175 additions & 0 deletions

File tree

‎Calc/index.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Simple Calculator</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<form class="calc" name="calculator">
11+
<table>
12+
<tr>
13+
<td colspan="4">
14+
<input type="text" name="display" id="display" disabled>
15+
16+
</td>
17+
</tr>
18+
<tr>
19+
<td><input type="button" name="one" value="1" onclick="calculator.display.value += '1'"></td>
20+
<td><input type="button" name="two" value="2" onclick="calculator.display.value += '2'"></td>
21+
<td><input type="button" name="three" value="3" onclick="calculator.display.value += '3'"></td>
22+
<td><input type="button" class="operator" name="plus" value="+" onclick="calculator.display.value += '+'"></td>
23+
</tr>
24+
<tr>
25+
<td><input type="button" name="four" value="4" onclick="calculator.display.value += '4'"></td>
26+
<td><input type="button" name="five" value="5" onclick="calculator.display.value += '5'"></td>
27+
<td><input type="button" name="six" value="6" onclick="calculator.display.value += '6'"></td>
28+
<td><input type="button" class="operator" name="minus" value="-" onclick="calculator.display.value += '-'"></td>
29+
</tr>
30+
<tr>
31+
<td><input type="button" name="seven" value="7" onclick="calculator.display.value += '7'"></td>
32+
<td><input type="button" name="eight" value="8" onclick="calculator.display.value += '8'"></td>
33+
<td><input type="button" name="nine" value="9" onclick="calculator.display.value += '9'"></td>
34+
<td><input type="button" class="operator" name="times" value="x" onclick="calculator.display.value += '*'"></td>
35+
</tr>
36+
<tr>
37+
<td><input type="button" id="clear" name="clear" value="c" onclick="calculator.display.value = ''"></td>
38+
<td><input type="button" name="zero" value="0" onclick="calculator.display.value += '0'"></td>
39+
<td><input type="button" name="doit" value="=" onclick="calculator.display.value = eval(calculator.display.value)"></td>
40+
<td><input type="button" class="operator" name="div" value="/" onclick="calculator.display.value += '/'"></td>
41+
42+
</tr>
43+
</table>
44+
</form>
45+
</body>
46+
</html>

‎Calc/style.css‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
body {
2+
background-color: #888;
3+
}
4+
5+
table {
6+
margin: auto;
7+
background-color: #222;
8+
width: 295px;
9+
max-width: 295px;
10+
height: 325px;
11+
text-align: center;
12+
border-radius: 4px;
13+
padding-right: 10px;
14+
}
15+
16+
input {
17+
outline: 0;
18+
position: relative;
19+
left: 5px;
20+
top: 5px;
21+
border: 0;
22+
color: #495069;
23+
background-color: #fff;
24+
border-radius: 4px;
25+
width: 60px;
26+
height: 50px;
27+
float: left;
28+
margin: 5px;
29+
font-size: 20px;
30+
box-shadow: 0 4px rgba(0,0,0,0.2);
31+
margin-bottom: 15px;
32+
}
33+
34+
input:hover {
35+
border: 0 solid #000;
36+
color: #495069;
37+
background-color: #fff;
38+
border-radius: 4px;
39+
width: 60px;
40+
height: 50px;
41+
float: left;
42+
margin: 5px;
43+
font-size: 20px;
44+
box-shadow: 0 4px #b0d2cf;
45+
}
46+
47+
input:active {
48+
top: 4px;
49+
border: 0 solid #000;
50+
color: #495069;
51+
background-color: #fff;
52+
border-radius: 4px;
53+
width: 60px;
54+
height: 50px;
55+
float: left;
56+
margin: 5px;
57+
font-size: 20px;
58+
box-shadow: none;
59+
}
60+
61+
#display {
62+
width: 265px;
63+
max-width: 270px;
64+
font-size: 26px;
65+
text-align: right;
66+
background-color: #bcbd95;
67+
float: left;
68+
}
69+
70+
#display:hover {
71+
width: 270px;
72+
font-size: 26px;
73+
text-align: right;
74+
background-color: #bcbd95;
75+
box-shadow: 0 4px rgba(0,0,0,0.2);
76+
}
77+
78+
#display:active {
79+
top: 5px;
80+
width: 270px;
81+
font-size: 26px;
82+
text-align: right;
83+
background-color: #bcbd95;
84+
box-shadow: 0 4px rgba(0,0,0,0.2);
85+
}
86+
87+
.operator {
88+
background-color: #cee9ea;
89+
position: relative;
90+
}
91+
92+
.operator:hover {
93+
background-color: #cee9ea;
94+
box-shadow: 0 4px #b0d2cf;
95+
}
96+
97+
.operator:active {
98+
top: 4px;
99+
box-shadow: none;
100+
}
101+
102+
#clear {
103+
float: left;
104+
position: relative;
105+
display: block;
106+
background-color: #ff9fa8;
107+
}
108+
109+
#clear:hover {
110+
float: left;
111+
display: block;
112+
background-color: #F297A0;
113+
margin-bottom: 15px;
114+
box-shadow: 0 4px #CC7F86;
115+
}
116+
117+
#clear:active {
118+
float: left;
119+
top: 4px;
120+
display: block;
121+
background-color: #F297A0;
122+
margin-bottom: 15px;
123+
box-shadow: none;
124+
}
125+
126+
.calc{
127+
position: relative;
128+
top: 100px;
129+
}

0 commit comments

Comments
 (0)