function calculateBinary() {
var binaryInputConvert = document.getElementById('binaryInputConvert').value.trim();
var decimalInputConvert = document.getElementById('decimalInputConvert').value.trim();
var binaryInput1 = document.getElementById('binaryInput1').value.trim();
var binaryInput2 = document.getElementById('binaryInput2').value.trim();
var operation = document.getElementById('operationSelect').value;
var decimalResultConvert = document.getElementById('decimalResultConvert');
var binaryResultConvert = document.getElementById('binaryResultConvert');
var arithmeticBinaryResult = document.getElementById('arithmeticBinaryResult');
var arithmeticDecimalResult = document.getElementById('arithmeticDecimalResult');
var errorMessage = document.getElementById('errorMessage');
decimalResultConvert.textContent = ";
binaryResultConvert.textContent = ";
arithmeticBinaryResult.textContent = ";
arithmeticDecimalResult.textContent = ";
errorMessage.textContent = ";
// — Conversion Logic —
if (binaryInputConvert !== ") {
if (!/^[01]+$/.test(binaryInputConvert)) {
errorMessage.textContent = 'Error: Binary to Decimal input must contain only 0s and 1s.';
return;
}
decimalResultConvert.textContent = parseInt(binaryInputConvert, 2);
}
if (decimalInputConvert !== ") {
var decNum = parseInt(decimalInputConvert, 10);
if (isNaN(decNum) || decNum >> 0).toString(2);
}
// — Arithmetic Logic —
if (binaryInput1 !== " && binaryInput2 !== ") {
if (!/^[01]+$/.test(binaryInput1) || !/^[01]+$/.test(binaryInput2)) {
errorMessage.textContent = 'Error: Arithmetic inputs must contain only 0s and 1s.';
return;
}
var decNum1 = parseInt(binaryInput1, 2);
var decNum2 = parseInt(binaryInput2, 2);
var decResult;
switch (operation) {
case 'add':
decResult = decNum1 + decNum2;
break;
case 'subtract':
decResult = decNum1 – decNum2;
if (decResult >> 0).toString(2);
} else if (binaryInput1 !== " || binaryInput2 !== ") {
errorMessage.textContent = 'Error: Both binary numbers are required for arithmetic operations.';
}
if (binaryInputConvert === " && decimalInputConvert === " && binaryInput1 === " && binaryInput2 === ") {
errorMessage.textContent = 'Please enter values in at least one section to calculate.';
}
}
.calculator-container {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
padding: 25px;
max-width: 600px;
margin: 30px auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.calculator-container h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
font-size: 1.8em;
}
.calculator-container h3 {
color: #555;
margin-top: 25px;
margin-bottom: 15px;
font-size: 1.3em;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
}
.calculator-content p {
font-size: 0.95em;
line-height: 1.6;
color: #666;
margin-bottom: 15px;
}
.input-group {
margin-bottom: 18px;
}
.input-group label {
display: block;
margin-bottom: 7px;
color: #444;
font-weight: bold;
font-size: 0.95em;
}
.input-group input[type="text"],
.input-group input[type="number"],
.input-group select {
width: calc(100% – 22px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1em;
box-sizing: border-box;
transition: border-color 0.3s ease;
}
.input-group input[type="text"]:focus,
.input-group input[type="number"]:focus,
.input-group select:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}
button {
display: block;
width: 100%;
padding: 12px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
font-size: 1.1em;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
margin-top: 20px;
}
button:hover {
background-color: #0056b3;
transform: translateY(-2px);
}
.result-container {
background-color: #e9f7ff;
border: 1px solid #b3e0ff;
border-radius: 8px;
padding: 20px;
margin-top: 25px;
}
.result-container h3 {
color: #0056b3;
margin-top: 0;
border-bottom: 1px solid #b3e0ff;
padding-bottom: 10px;
margin-bottom: 15px;
}
.result-container p {
margin-bottom: 10px;
font-size: 1em;
color: #333;
}
.result-container p strong {
color: #004085;
}
.result-container span {
font-weight: normal;
color: #000;
}
#errorMessage {
margin-top: 15px;
font-weight: bold;
text-align: center;
}
Understanding Binary Numbers: The Language of Computers
Binary numbers are the fundamental language that computers use to process information. Unlike the decimal system we use daily (base-10, with digits 0-9), the binary system (base-2) uses only two digits: 0 and 1. Each position in a binary number represents a power of 2, much like each position in a decimal number represents a power of 10.
Why Binary?
Computers operate using electrical signals, which are either "on" or "off." These two states perfectly correspond to the two binary digits: 1 for "on" (or true) and 0 for "off" (or false). This simplicity makes binary an incredibly efficient and reliable system for digital electronics.
Binary to Decimal Conversion
To convert a binary number to its decimal equivalent, you multiply each binary digit by the corresponding power of 2 and then sum the results. Starting from the rightmost digit (least significant bit), the powers of 2 begin with 20 (which is 1), then 21 (2), 22 (4), and so on.
Example: Convert 101102 to Decimal
- 1 * 24 = 1 * 16 = 16
- 0 * 23 = 0 * 8 = 0
- 1 * 22 = 1 * 4 = 4
- 1 * 21 = 1 * 2 = 2
- 0 * 20 = 0 * 1 = 0
Summing these values: 16 + 0 + 4 + 2 + 0 = 22. So, 101102 = 2210.
Decimal to Binary Conversion
Converting a decimal number to binary typically involves repeatedly dividing the decimal number by 2 and recording the remainder. The binary number is then formed by reading the remainders from bottom to top.
Example: Convert 2210 to Binary
- 22 ÷ 2 = 11 remainder 0
- 11 ÷ 2 = 5 remainder 1
- 5 ÷ 2 = 2 remainder 1
- 2 ÷ 2 = 1 remainder 0
- 1 ÷ 2 = 0 remainder 1
Reading the remainders from bottom to top gives us 10110. So, 2210 = 101102.
Binary Arithmetic
Performing arithmetic operations directly on binary numbers follows rules similar to decimal arithmetic, but with only two digits. For simplicity, this calculator converts binary numbers to decimal, performs the operation, and then converts the result back to binary. This method is often used for understanding and verification, though computers perform these operations directly in binary using logic gates.
Binary Addition
The basic rules for binary addition are:
- 0 + 0 = 0
- 0 + 1 = 1
- 1 + 0 = 1
- 1 + 1 = 0 (carry 1 to the next position)
Example: 10112 + 1012
1011 (11 in decimal)
+ 101 (5 in decimal)
-----
10000 (16 in decimal)
Binary Subtraction
Binary subtraction can be more complex, especially when borrowing is involved. For positive results, the rules are:
- 0 – 0 = 0
- 1 – 0 = 1
- 1 – 1 = 0
- 0 – 1 = 1 (borrow 1 from the next position)
Example: 10112 – 1012
1011 (11 in decimal)
- 101 (5 in decimal)
-----
110 (6 in decimal)
Binary Multiplication
Binary multiplication is similar to decimal multiplication, but simpler because you only multiply by 0 or 1.
- 0 * 0 = 0
- 0 * 1 = 0
- 1 * 0 = 0
- 1 * 1 = 1
Example: 10112 * 1012
1011 (11 in decimal)
x 101 (5 in decimal)
-----
1011 (1011 * 1)
0000 (1011 * 0, shifted)
1011 (1011 * 1, shifted twice)
-----
110111 (55 in decimal)
Using the calculator above, you can quickly perform these conversions and arithmetic operations to better understand how binary numbers work.