Skip to content

Commit 47653ce

Browse files
SangeethaKarthSangeethaKarth
committed
Updated Calculator
1 parent 9178903 commit 47653ce

File tree

2 files changed

+53
-78
lines changed

2 files changed

+53
-78
lines changed

‎projects/basic-calculator/index.html

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,32 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
1+
<html>
32
<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-
<title>Basic Calculator</title>
8-
<link rel="stylesheet" href="style.css">
3+
<link rel="stylesheet" type="text/css" href="style.css">
4+
<body style="background-color:powderblue;"></body>
95
</head>
106
<body>
7+
<h1>Calculator</h1>
118
<div class="calculator">
12-
<input type="text" id="result" readonly>
9+
<input type="text" id="display" readonly>
1310
<div class="buttons">
14-
<button class="clear">C</button>
15-
<button class="operator">/</button>
16-
<button class="operator">*</button>
17-
<button class="operator">-</button>
18-
<button class="number">7</button>
19-
<button class="number">8</button>
20-
<button class="number">9</button>
21-
<button class="operator">+</button>
22-
<button class="number">4</button>
23-
<button class="number">5</button>
24-
<button class="number">6</button>
25-
<button class="equals">=</button>
26-
<button class="number">1</button>
27-
<button class="number">2</button>
28-
<button class="number">3</button>
29-
<button class="number">0</button>
30-
<button class="decimal">.</button>
11+
<button onclick="clearDisplay()">C</button>
12+
<button onclick="appendToDisplay('7')">7</button>
13+
<button onclick="appendToDisplay('8')">8</button>
14+
<button onclick="appendToDisplay('9')">9</button>
15+
<button onclick="appendToDisplay('+')">+</button>
16+
<button onclick="appendToDisplay('4')">4</button>
17+
<button onclick="appendToDisplay('5')">5</button>
18+
<button onclick="appendToDisplay('6')">6</button>
19+
<button onclick="appendToDisplay('-')">-</button>
20+
<button onclick="appendToDisplay('1')">1</button>
21+
<button onclick="appendToDisplay('2')">2</button>
22+
<button onclick="appendToDisplay('3')">3</button>
23+
<button onclick="appendToDisplay('*')">*</button>
24+
<button onclick="appendToDisplay('0')">0</button>
25+
<button onclick="appendToDisplay('.')">.</button>
26+
<button onclick="calculateResult()">=</button>
27+
<button onclick="appendToDisplay('/')">/</button>
3128
</div>
3229
</div>
33-
<script src="index.js"></script>
30+
<script src="script.js"></script>
3431
</body>
3532
</html>

‎projects/basic-calculator/style.css

Lines changed: 30 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,46 @@
1-
* {
2-
box-sizing: border-box;
3-
margin: 0;
4-
}
5-
61
.calculator {
7-
background-color: #f2f2f2;
8-
padding: 20px;
9-
max-width: 400px;
10-
margin: 0 auto;
11-
border: solid 1px #ccc;
12-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
13-
border-radius: 5px;
14-
margin-top: 40px;
2+
width: 250px;
3+
margin: 0 auto;
4+
text-align: center;
5+
background-color: #2c3e50; /* Dark blue-gray background */
6+
border: 1px solid #34495e; /* Slightly darker border color */
7+
border-radius: 5px;
8+
padding: 10px;
159
}
1610

17-
#result{
18-
width: 100%;
19-
padding: 10px;
20-
font-size: 24px;
21-
border: none;
22-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) inset;
23-
border-radius: 5px;
11+
#display {
12+
width: 95%;
13+
margin: 5px;
14+
padding: 5px;
15+
font-size: 20px;
16+
color: #ecf0f1; /* Light gray text color for better contrast */
17+
background-color: #34495e; /* Slightly darker blue-gray background */
18+
border: 1px solid #2c3e50; /* Matching border color */
19+
border-radius: 3px;
2420
}
2521

26-
.buttons{
22+
.buttons {
2723
display: grid;
2824
grid-template-columns: repeat(4, 1fr);
29-
grid-gap: 10px;
30-
margin-top: 20px;
25+
gap: 5px;
3126
}
3227

33-
button{
28+
h1 {
29+
text-align: center;
30+
color: #2b0b11; /* Light gray text color for the heading */
31+
}
32+
33+
button {
34+
width: 100%;
3435
padding: 10px;
35-
font-size: 24px;
36+
font-size: 20px;
37+
background-color: #3498db; /* Blue color for buttons */
38+
color: #ffffff;
3639
border: none;
37-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
3840
border-radius: 5px;
3941
cursor: pointer;
40-
transition: background-color 0.3s ease;
41-
42-
}
43-
44-
button:hover{
45-
background-color: #ddd;
46-
}
47-
48-
.clear{
49-
background-color: #ff4136;
50-
color: #fff;
51-
}
52-
53-
.number, .decimal{
54-
background-color: #fff;
55-
color: #333;
56-
57-
}
58-
59-
.operator{
60-
background-color: #0074d9;
61-
color: #fff;
6242
}
6343

64-
.equals{
65-
background-color: #01ff70;
66-
grid-row: span 3;
67-
color: #fff;
44+
button:hover {
45+
background-color: #2980b9; /* Darker blue color on hover */
6846
}

0 commit comments

Comments
 (0)