Skip to content

Commit 29522ab

Browse files
Pankaj-StrPankaj-Str
committed
Add Switch.html for basic calculator functionality with operator selection
1 parent 62cbb40 commit 29522ab

1 file changed

Lines changed: 81 additions & 0 deletions

File tree

‎Lectures/Lecture01/Day 27 Nov 2025/Switch.html‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
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>Document</title>
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
8+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
9+
10+
11+
<script>
12+
13+
function print_result(){
14+
number1 = document.getElementById("num1").value;
15+
number2 = document.getElementById("num2").value;
16+
operator = document.getElementById("operator").value;
17+
result = document.getElementById("result");
18+
19+
switch(operator){
20+
case "+" :
21+
result.innerHTML = number1 + number2;
22+
break;
23+
case "-" :
24+
result.innerHTML = number1 - number2;
25+
break;
26+
case "*" :
27+
result.innerHTML = number1 * number2;
28+
break;
29+
case "/" :
30+
result.innerHTML = number1 / number2;
31+
break;
32+
default :
33+
result.innerHTML = "Select Operator";
34+
35+
}
36+
}
37+
38+
39+
</script>
40+
41+
</head>
42+
<body>
43+
44+
<div class="container mt-5">
45+
<div class="row justify-content-center">
46+
<div class="col-sm-6 shadow-lg border border-1 border-black rounded-4">
47+
<form class="m-4">
48+
<div class="mb-3">
49+
<label class="form-label">Number 1</label>
50+
<input type="number" class="form-control" id="num1" required>
51+
</div>
52+
<div class="mb-3">
53+
<label class="form-label">Operator</label>
54+
<select class="form-select" id="operator" required>
55+
<option value="" selected>Select Operator</option>
56+
<option value="+">+</option>
57+
<option value="-">-</option>
58+
<option value="*">*</option>
59+
<option value="/">/</option>
60+
</select>
61+
</div>
62+
<div class="mb-3">
63+
<label class="form-label">Number 2</label>
64+
<input type="number" class="form-control" id="num2" required>
65+
</div>
66+
<div class="mb-b">
67+
<button type="submit" class="btn btn-primary" onclick="print_result()">Submit</button>
68+
</div>
69+
</form>
70+
<div class="m-4 alert alert-danger p-3 rounded-3">
71+
<h4>Result: <span id="result">N/A</span></h4>
72+
</div>
73+
</div>
74+
</div>
75+
76+
</div>
77+
78+
79+
80+
</body>
81+
</html>

0 commit comments

Comments
 (0)