Hello Friends Today, through this tutorial, I will tell you How to Create NAND Calculator Using JavaScript with HTML? Creating a NAND calculator using JavaScript and HTML involves building a simple user interface for input and output, along with the logic to perform NAND operations. Here’s a basic example:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NAND 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>NAND Calculator</h2>
<label for="inputA">Input A:</label>
<input type="number" id="inputA" placeholder="Enter 0 or 1">
<label for="inputB">Input B:</label>
<input type="number" id="inputB" placeholder="Enter 0 or 1">
<button onclick="calculateNAND()">Calculate NAND</button>
<p id="result"></p>
<script>
function calculateNAND() {
// Get input values
const inputA = parseFloat(document.getElementById('inputA').value);
const inputB = parseFloat(document.getElementById('inputB').value);
// Check if inputs are valid (0 or 1)
if (!isValidInput(inputA) || !isValidInput(inputB)) {
document.getElementById('result').innerHTML = 'Invalid inputs. Please enter 0 or 1.';
return;
}
// Perform NAND operation
const result = nandOperation(inputA, inputB);
// Display the result
document.getElementById('result').innerHTML = `NAND Result: ${result}`;
}
function isValidInput(value) {
return value === 0 || value === 1;
}
function nandOperation(a, b) {
// NAND truth table
// 0 NAND 0 = 1
// 0 NAND 1 = 1
// 1 NAND 0 = 1
// 1 NAND 1 = 0
return !(a && b);
}
</script>
</body>
</html>
In this example, the HTML file includes input fields for two binary inputs (0 or 1), a button to trigger the NAND operation, and a paragraph to display the result. The JavaScript functions `calculateNAND`, `isValidInput`, and `nandOperation` handle the logic of checking input validity and performing the NAND operation. When the “Calculate NAND” button is clicked, the result is displayed on the page.