ARITHMETIC OPERATOR function subtract() {
let {a, b} = getValues();
<!DOCTYPE html>
<html> [Link]("result").textConten
<head> t = "a - b = " + (a - b);
<title>Arithmetic Operators }
with Buttons</title>
</head> function multiply() {
<body> let {a, b} = getValues();
<h2>Arithmetic [Link]("result").textConten
Operators</h2> t = "a * b = " + (a * b);
}
<label>Enter Number
1:</label> function divide() {
<input type="number" let {a, b} = getValues();
id="num1"><br><br>
[Link]("result").textConten
<label>Enter Number t = "a / b = " + (a / b);
2:</label> }
<input type="number"
id="num2"><br><br> function modulus() {
let {a, b} = getValues();
<button
onclick="add()">Addition (+)</button> [Link]("result").textConten
<button t = "a % b = " + (a % b);
onclick="subtract()">Subtraction (-)</button> }
<button
onclick="multiply()">Multiplication function exponent() {
(*)</button> let {a, b} = getValues();
<button
onclick="divide()">Division (/)</button> [Link]("result").textConten
<button t = "a * b = " + (a * b);
onclick="modulus()">Modulus (%)</button> }
<button </script>
onclick="exponent()">Exponent (**)</button>
</body>
<h3 id="result"></h3> </html>
<script>
function getValues() {
let a =
Number([Link]("num1").val
ue);
let b =
Number([Link]("num2").val
ue);
return { a, b };
}
function add() {
let {a, b} = getValues();
[Link]("result").textConten
t = "a + b = " + (a + b);
}
ASSIGNMENT OPERATOR
function mulAssign() {
<!DOCTYPE html> x *=
<html> Number([Link]("value").val
<head> ue);
<title>Assignment Operators with updateResult();
Buttons</title> }
</head>
<body> function divAssign() {
x /=
<h2>Assignment Operator</h2> Number([Link]("value").val
ue);
<label>Enter a Number:</label> updateResult();
<input type="number" id="value" }
value="0"><br><br>
// Initialize display
<button onclick="assignValue()">= updateResult();
Assign</button> </script>
<button onclick="addAssign()">+=
Add</button> </body>
<button onclick="subAssign()">-= </html>
Subtract</button>
<button onclick="mulAssign()">*</button>
<button onclick="divAssign()">/</button>
<h3 id="result"></h3>
<script>
let x = 0; // variable to demonstrate assignment
operators
function updateResult() {
[Link]("result").textConten
t = "Current Value: " + x;
}
function assignValue() {
x=
Number([Link]("value").val
ue);
updateResult();
}
function addAssign() {
x +=
Number([Link]("value").val
ue);
updateResult();
}
function subAssign() {
x -=
Number([Link]("value").val
ue);
updateResult();
}
COMPARISON OPERATOR message = "a < b : Number 2 is greater.";
}
<!DOCTYPE html>
<html> // Add boolean results for >= and <=
<head> message += " | a >= b: " + (a >= b) + " | a <=
<title>Comparison Operator with b: " + (a <= b);
Dropdowns</title>
</head>
<body> [Link]("result").textConten
t = message;
<h2>Comparison Operator Demo }
(Dropdowns)</h2> </script>
<label>Choose Number 1:</label> </body>
<select id="num1"> </html>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br><br>
<label>Choose Number 2:</label>
<select id="num2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br><br>
<button
onclick="compareValues()">Compare</button>
<h3 id="result"></h3>
<script>
function compareValues() {
let a =
Number([Link]("num1").val
ue);
let b =
Number([Link]("num2").val
ue);
let message = "";
// Comparison operators
if (a == b) {
message = "a == b : Both values are equal.";
} else if (a > b) {
message = "a > b : Number 1 is greater.";
} else if (a < b) {
BOOLEAN OPERATOR
<!DOCTYPE html>
<html>
<head>
<title>Logical Operator</title>
</head>
<body>
<h2>Logical Operator Demo (Checkboxes)</h2>
<label>
<input type="checkbox" id="hasID">
Has Valid ID
</label><br><br>
<label>
<input type="checkbox" id="hasTicket">
Has Ticket
</label><br><br>
<button onclick="checkEntry()">Check
Entry</button>
<h3 id="result"></h3>
<script>
function checkEntry() {
let id =
[Link]("hasID").checked;
let ticket =
[Link]("hasTicket").checked;
// Logical AND: both must be true
if (id && ticket) {
[Link]("result").textConten
t = "Entry Allowed (ID AND Ticket are checked).";
}
// Logical OR: at least one must be true
else if (id || ticket) {
[Link]("result").textConten
t = "Entry Partially Allowed (ID OR Ticket is
checked).";
}
// Logical NOT: none is true
else {
[Link]("result").textConten
t = "Entry Denied (!id and !ticket).";
}
}
</script>
</body>
</html>
STRING OPERATOR
<!DOCTYPE html>
<html>
<head>
<title>String Operator with Input</title>
</head>
<body>
<h2>Combine Two Strings</h2>
<label>First Name:</label>
<input type="text" id="firstName"><br><br>
<label>Last Name:</label>
<input type="text" id="lastName"><br><br>
<button
onclick="combineStrings()">Combine</button>
<h3 id="result"></h3>
<script>
function combineStrings() {
// Get values from input fields
let first =
[Link]("firstName").value;
let last =
[Link]("lastName").value;
// Using string operator (+) to join input
values
let fullName = first + " " + last;
// Using += to add extra text
fullName += " is learning coding!";
// Display result
[Link]("result").textConten
t = fullName;
}
</script>
</body>
</html>