Skip to content

Commit ce384e2

Browse files
YuvrajchandraYuvrajchandra
committed
Formatted code structure
1 parent 4243182 commit ce384e2

File tree

2 files changed

+44
-50
lines changed

2 files changed

+44
-50
lines changed

‎index.html

+38-43
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,44 @@
11
<!DOCTYPE html>
22
<html lang="en" dir="ltr">
3-
43
<head>
5-
<meta charset="utf-8">
6-
<title>Simple Calculator using HTML, CSS and JavaScript</title>
7-
<link rel="stylesheet" href="styles.css">
4+
<meta charset="utf-8">
5+
<title> Simple Calculator using HTML, CSS and JavaScript </title>
6+
<link rel="stylesheet" href="styles.css">
87
</head>
9-
108
<body>
11-
12-
<table class="calculator">
13-
<tr>
14-
<td colspan="3"><input class="display-box" type="text" id="result" disabled /></td>
15-
<!-- clearScreen() function clear all the values -->
16-
<td><input class="button" type="button" value="C" onclick="clearScreen()" style="background-color: #fb0066;" /> </td>
17-
</tr>
18-
<tr>
19-
<!-- display() function display the value of clicked button -->
20-
<td><input class="button" type="button" value="1" onclick="display('1')" /> </td>
21-
<td><input class="button" type="button" value="2" onclick="display('2')" /> </td>
22-
<td><input class="button" type="button" value="3" onclick="display('3')" /> </td>
23-
<td><input class="button" type="button" value="/" onclick="display('/')" /> </td>
24-
</tr>
25-
<tr>
26-
<td><input class="button" type="button" value="4" onclick="display('4')" /> </td>
27-
<td><input class="button" type="button" value="5" onclick="display('5')" /> </td>
28-
<td><input class="button" type="button" value="6" onclick="display('6')" /> </td>
29-
<td><input class="button" type="button" value="-" onclick="display('-')" /> </td>
30-
</tr>
31-
<tr>
32-
<td><input class="button" type="button" value="7" onclick="display('7')" /> </td>
33-
<td><input class="button" type="button" value="8" onclick="display('8')" /> </td>
34-
<td><input class="button" type="button" value="9" onclick="display('9')" /> </td>
35-
<td><input class="button" type="button" value="+" onclick="display('+')" /> </td>
36-
</tr>
37-
<tr>
38-
<td><input class="button" type="button" value="." onclick="display('.')" /> </td>
39-
<td><input class="button" type="button" value="0" onclick="display('0')" /> </td>
40-
<!-- calculate() function evaluate the mathematical expression -->
41-
<td><input class="button" type="button" value="=" onclick="calculate()" style="background-color: #fb0066;" /> </td>
42-
<td><input class="button" type="button" value="*" onclick="display('*')" /> </td>
43-
</tr>
44-
</table>
45-
46-
<script type="text/javascript" src="script.js"></script>
9+
<table class="calculator" >
10+
<tr>
11+
<td colspan="3"> <input class="display-box" type="text" id="result" disabled /> </td>
12+
<!-- clearScreen() function clear all the values -->
13+
<td> <input type="button" value="C" onclick="clearScreen()" id="btn" /> </td>
14+
</tr>
15+
<tr>
16+
<!-- display() function display the value of clicked button -->
17+
<td> <input type="button" value="1" onclick="display('1')" /> </td>
18+
<td> <input type="button" value="2" onclick="display('2')" /> </td>
19+
<td> <input type="button" value="3" onclick="display('3')" /> </td>
20+
<td> <input type="button" value="/" onclick="display('/')" /> </td>
21+
</tr>
22+
<tr>
23+
<td> <input type="button" value="4" onclick="display('4')" /> </td>
24+
<td> <input type="button" value="5" onclick="display('5')" /> </td>
25+
<td> <input type="button" value="6" onclick="display('6')" /> </td>
26+
<td> <input type="button" value="-" onclick="display('-')" /> </td>
27+
</tr>
28+
<tr>
29+
<td> <input type="button" value="7" onclick="display('7')" /> </td>
30+
<td> <input type="button" value="8" onclick="display('8')" /> </td>
31+
<td> <input type="button" value="9" onclick="display('9')" /> </td>
32+
<td> <input type="button" value="+" onclick="display('+')" /> </td>
33+
</tr>
34+
<tr>
35+
<td> <input type="button" value="." onclick="display('.')" /> </td>
36+
<td> <input type="button" value="0" onclick="display('0')" /> </td>
37+
<!-- calculate() function evaluate the mathematical expression -->
38+
<td> <input type="button" value="=" onclick="calculate()" id="btn" /> </td>
39+
<td> <input type="button" value="*" onclick="display('*')" /> </td>
40+
</tr>
41+
</table>
42+
<script type="text/javascript" src="script.js"></script>
4743
</body>
48-
49-
</html>
44+
</html>

‎styles.css

+6-7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
2-
32
.calculator {
43
padding: 10px;
54
border-radius: 1em;
@@ -9,7 +8,6 @@
98
background-color: #191b28;
109
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
1110
}
12-
1311
.display-box {
1412
font-family: 'Orbitron', sans-serif;
1513
background-color: #dcdbe1;
@@ -19,8 +17,10 @@
1917
width: 100%;
2018
height: 65%;
2119
}
22-
23-
.button {
20+
#btn {
21+
background-color: #fb0066;
22+
}
23+
input[type=button] {
2424
font-family: 'Orbitron', sans-serif;
2525
background-color: #64278f;
2626
color: white;
@@ -30,10 +30,9 @@
3030
height: 70%;
3131
outline: none;
3232
}
33-
34-
.button:active {
33+
input:active[type=button] {
3534
background: #e5e5e5;
3635
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
3736
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
3837
box-shadow: inset 0px 0px 5px #c1c1c1;
39-
}
38+
}

0 commit comments

Comments
 (0)