-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (114 loc) · 3.76 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
background-image: linear-gradient(to right,rgb(62, 115, 249),lightblue);
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
h1 {
text-align: center;
position: absolute;
top:30px;
cursor: pointer;
}
fieldset {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 30px;
background-color: #a5e2fa;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input, select, button {
width: calc(100% - 20px);
padding: 10px;
margin-bottom: 10px;
display: block;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
button {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-image: linear-gradient(to right,rgb(62, 115, 249),lightblue);
transform: scale(1.1);
}
#result {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Welcome to My Calculator</h1>
<form>
<fieldset>
<input type="number" id="num1" placeholder="Number 1" required autofocus>
<br>
<input type="number" id="num2" placeholder="Number 2" required>
<br>
<input type="text" id="operation" placeholder="Operator (+, -, *, /)" required>
<button type="button" onclick="calculate()">Calculate</button>
<button type="button" onclick="clearData()">Clear</button>
<br><br>
<div id="result"></div>
</fieldset>
</form>
<script>
function calculate() {
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var operation = document.getElementById('operation').value.trim();
var result;
try {
result = performOperation(num1, operation, num2);
document.getElementById('result').innerText = "Result: " + result;
} catch (error) {
document.getElementById('result').innerText = error.message;
}
}
function performOperation(num1, operator, num2) {
if (isNaN(num1) || isNaN(num2)) {
throw new Error("Invalid input! Please provide valid numbers.");
}
switch (operator) {
case '+':
return num1 + num2;
case '-':
return num1 - num2;
case '*':
return num1 * num2;
case '/':
if (num2 === 0) {
throw new Error("Division by zero is not allowed!");
}
return num1 / num2;
default:
throw new Error("Invalid operator! Please provide one of '+', '-', '*', or '/'.");
}
}
function clearData() {
document.getElementById('num1').value = '';
document.getElementById('num2').value = '';
document.getElementById('operation').value = '';
document.getElementById('result').innerHTML = '';
}
</script>
</body>
</html>