Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to Create a Binary Calculator using HTML, CSS and JavaScript?
A binary calculator is a program that performs mathematical calculations on binary numbers. Binary numbers consist of only two digits: 0 and 1. In this tutorial, we'll create a functional binary calculator that can perform addition, subtraction, multiplication, and division operations using HTML for structure, CSS for styling, and JavaScript for functionality.
HTML Structure
First, let's create the HTML structure with a form containing a display field and buttons for binary digits and operations:
<!DOCTYPE html>
<html>
<head>
<title>Binary Calculator</title>
</head>
<body>
<form>
<table>
<tr>
<td colspan="8">
<input type="text" id="display" disabled />
</td>
</tr>
<tr>
<td>
<input type="button" value="1" onclick="addToDisplay(1)" />
</td>
<td>
<input type="button" value="0" onclick="addToDisplay(0)" />
</td>
<td>
<input type="button" value="C" onclick="clearDisplay()" />
</td>
<td>
<input type="button" value="+" onclick="addToDisplay('+')" />
</td>
<td>
<input type="button" value="-" onclick="addToDisplay('-')" />
</td>
<td>
<input type="button" value="*" onclick="addToDisplay('*')" />
</td>
<td>
<input type="button" value="/" onclick="addToDisplay('/')" />
</td>
<td>
<input type="button" value="=" onclick="calculate()" />
</td>
</tr>
<tr>
<td colspan="8">
Decimal Equivalent: <span id="toDecimal"></span>
</td>
</tr>
</table>
</form>
</body>
</html>
The structure includes a disabled input field for display, buttons for binary digits (0 and 1), operation buttons (+, -, *, /), a clear button (C), an equals button, and a section to show the decimal equivalent.
CSS Styling
Next, we'll add CSS styling to make the calculator visually appealing:
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
}
table {
margin: 0 auto;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#display {
background-color: #f2f2f2;
text-align: right;
padding: 12px 20px;
font-size: 24px;
border: 2px solid #ddd;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
}
input[type="button"] {
width: 50px;
height: 50px;
font-size: 18px;
font-weight: bold;
background-color: #f9f9f9;
border: 2px solid #ddd;
border-radius: 5px;
margin: 3px;
cursor: pointer;
transition: background-color 0.2s;
}
input[type="button"]:hover {
background-color: #e6e6e6;
}
input[type="button"][value="+"],
input[type="button"][value="-"],
input[type="button"][value="*"],
input[type="button"][value="/"] {
background-color: #4caf50;
color: white;
}
input[type="button"][value="C"] {
background-color: #f44336;
color: white;
}
input[type="button"][value="="] {
background-color: #2196f3;
color: white;
}
#toDecimal {
font-size: 20px;
font-weight: bold;
color: #333;
}
</style>
JavaScript Functionality
Now we'll implement the JavaScript functions to handle calculator operations:
<script>
function addToDisplay(val) {
const display = document.getElementById("display");
display.value += val;
}
function clearDisplay() {
const display = document.getElementById("display");
display.value = "";
document.getElementById("toDecimal").textContent = "";
}
function calculate() {
const display = document.getElementById("display");
const input = display.value;
if (!input) return;
try {
// Split input by operators
const numbers = input.split(/[+\-*/]/);
const operator = input.replace(numbers[0], "").replace(numbers[1], "");
// Validate binary numbers
if (!isBinary(numbers[0]) || !isBinary(numbers[1])) {
display.value = "Error: Invalid binary number";
return;
}
// Convert binary to decimal
const num1 = parseInt(numbers[0], 2);
const num2 = parseInt(numbers[1], 2);
let result;
switch (operator) {
case "+":
result = num1 + num2;
break;
case "-":
result = num1 - num2;
break;
case "*":
result = num1 * num2;
break;
case "/":
if (num2 === 0) {
display.value = "Error: Division by zero";
return;
}
result = Math.floor(num1 / num2); // Integer division
break;
default:
display.value = "Error: Invalid operator";
return;
}
// Convert result back to binary
const binaryResult = result.toString(2);
display.value = binaryResult;
document.getElementById("toDecimal").textContent = result;
} catch (error) {
display.value = "Error";
document.getElementById("toDecimal").textContent = "";
}
}
function isBinary(str) {
return /^[01]+$/.test(str);
}
</script>
Complete Binary Calculator
Here's the complete working binary calculator combining all components:
<!DOCTYPE html>
<html>
<head>
<title>Binary Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
}
table {
margin: 0 auto;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#display {
background-color: #f2f2f2;
text-align: right;
padding: 12px 20px;
font-size: 24px;
border: 2px solid #ddd;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
}
input[type="button"] {
width: 50px;
height: 50px;
font-size: 18px;
font-weight: bold;
background-color: #f9f9f9;
border: 2px solid #ddd;
border-radius: 5px;
margin: 3px;
cursor: pointer;
transition: background-color 0.2s;
}
input[type="button"]:hover {
background-color: #e6e6e6;
}
input[type="button"][value="+"],
input[type="button"][value="-"],
input[type="button"][value="*"],
input[type="button"][value="/"] {
background-color: #4caf50;
color: white;
}
input[type="button"][value="C"] {
background-color: #f44336;
color: white;
}
input[type="button"][value="="] {
background-color: #2196f3;
color: white;
}
#toDecimal {
font-size: 20px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<td colspan="8">
<input type="text" id="display" disabled />
</td>
</tr>
<tr>
<td>
<input type="button" value="1" onclick="addToDisplay(1)" />
</td>
<td>
<input type="button" value="0" onclick="addToDisplay(0)" />
</td>
<td>
<input type="button" value="C" onclick="clearDisplay()" />
</td>
<td>
<input type="button" value="+" onclick="addToDisplay('+')" />
</td>
<td>
<input type="button" value="-" onclick="addToDisplay('-')" />
</td>
<td>
<input type="button" value="*" onclick="addToDisplay('*')" />
</td>
<td>
<input type="button" value="/" onclick="addToDisplay('/')" />
</td>
<td>
<input type="button" value="=" onclick="calculate()" />
</td>
</tr>
<tr>
<td colspan="8">
Decimal Equivalent: <span id="toDecimal"></span>
</td>
</tr>
</table>
</form>
<script>
function addToDisplay(val) {
const display = document.getElementById("display");
display.value += val;
}
function clearDisplay() {
const display = document.getElementById("display");
display.value = "";
document.getElementById("toDecimal").textContent = "";
}
function calculate() {
const display = document.getElementById("display");
const input = display.value;
if (!input) return;
try {
// Split input by operators
const numbers = input.split(/[+\-*/]/);
const operator = input.replace(numbers[0], "").replace(numbers[1], "");
// Validate binary numbers
if (!isBinary(numbers[0]) || !isBinary(numbers[1])) {
display.value = "Error: Invalid binary number";
return;
}
// Convert binary to decimal
const num1 = parseInt(numbers[0], 2);
const num2 = parseInt(numbers[1], 2);
let result;
switch (operator) {
case "+":
result = num1 + num2;
break;
case "-":
result = num1 - num2;
break;
case "*":
result = num1 * num2;
break;
case "/":
if (num2 === 0) {
display.value = "Error: Division by zero";
return;
}
result = Math.floor(num1 / num2);
break;
default:
display.value = "Error: Invalid operator";
return;
}
// Convert result back to binary
const binaryResult = result.toString(2);
display.value = binaryResult;
document.getElementById("toDecimal").textContent = result;
} catch (error) {
display.value = "Error";
document.getElementById("toDecimal").textContent = "";
}
}
function isBinary(str) {
return /^[01]+$/.test(str);
}
</script>
</body>
</html>
Key Features
The binary calculator includes several important features:
- Binary Validation: Ensures only valid binary numbers (0s and 1s) are processed
- Error Handling: Displays appropriate error messages for invalid operations
- Decimal Conversion: Shows the decimal equivalent of the binary result
- Visual Feedback: Color-coded buttons and hover effects for better user experience
How It Works
The calculator works by first parsing the input to extract binary numbers and the operator. It converts binary numbers to decimal using parseInt() with base 2, performs the arithmetic operation, and converts the result back to binary using toString(2). The decimal equivalent is displayed alongside the binary result.
Conclusion
This binary calculator demonstrates how HTML, CSS, and JavaScript work together to create an interactive web application. The calculator handles basic binary arithmetic operations while providing error handling and a user-friendly interface for learning binary number systems.
Updated on: 2026-03-15T23:19:00+05:30
2K+ Views
Advertisements