Hello Friends Today, through this tutorial, I will tell you How to Create Bitwise Calculator Using JavaScript with HTML? Below is a simple HTML file with JavaScript to create a bitwise calculator. This example includes HTML elements for input, buttons, and a result display.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bitwise Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
label {
display: block;
margin-bottom: 8px;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 16px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h2>Bitwise Calculator</h2>
<label for="num1">Enter Number 1:</label>
<input type="text" id="num1" placeholder="Enter number 1 (decimal)">
<label for="num2">Enter Number 2:</label>
<input type="text" id="num2" placeholder="Enter number 2 (decimal)">
<button onclick="performBitwiseOperation('&')">AND (&)</button>
<button onclick="performBitwiseOperation('|')">OR (|)</button>
<button onclick="performBitwiseOperation('^')">XOR (^)</button>
<button onclick="performBitwiseOperation('<<')">Left Shift (<<)</button>
<button onclick="performBitwiseOperation('>>')">Right Shift (>>)</button>
<p id="result"></p>
<script>
function performBitwiseOperation(operation) {
// Get input values
const num1 = parseInt(document.getElementById('num1').value);
const num2 = parseInt(document.getElementById('num2').value);
// Perform bitwise operation
let result;
switch (operation) {
case '&':
result = num1 & num2;
break;
case '|':
result = num1 | num2;
break;
case '^':
result = num1 ^ num2;
break;
case '<<':
result = num1 << num2;
break;
case '>>':
result = num1 >> num2;
break;
default:
result = 'Invalid operation';
break;
}
// Display the result
document.getElementById('result').innerHTML = `Result of ${num1} ${operation} ${num2} is ${result}`;
}
</script>
</body>
</html>
This example allows users to enter two decimal numbers, and then they can perform various bitwise operations (AND, OR, XOR, Left Shift, Right Shift) by clicking corresponding buttons. The result is displayed below the buttons.