Binary Converter Calculator
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f4f7f6;
margin: 0;
padding: 20px;
}
.calculator-container {
max-width: 700px;
margin: 40px auto;
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
h1, h2 {
text-align: center;
color: #004a99;
margin-bottom: 20px;
}
.input-section, .output-section {
margin-bottom: 30px;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 6px;
background-color: #f8f9fa;
}
.input-group {
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
label {
font-weight: bold;
margin-bottom: 8px;
color: #004a99;
display: block;
}
input[type="text"], input[type="number"] {
width: calc(100% – 20px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
margin-top: 5px;
}
button {
display: block;
width: 100%;
padding: 12px 20px;
background-color: #004a99;
color: white;
border: none;
border-radius: 4px;
font-size: 1.1rem;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 10px;
}
button:hover {
background-color: #003366;
}
#result {
margin-top: 20px;
padding: 15px;
background-color: #28a745;
color: white;
text-align: center;
font-size: 1.4rem;
font-weight: bold;
border-radius: 4px;
}
.article-section {
margin-top: 40px;
padding: 25px;
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 6px;
}
.article-section h2 {
text-align: left;
color: #004a99;
margin-bottom: 15px;
}
.article-section p, .article-section ul {
color: #555;
margin-bottom: 15px;
}
.article-section code {
background-color: #e9ecef;
padding: 2px 6px;
border-radius: 3px;
font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
}
@media (max-width: 600px) {
.calculator-container {
padding: 20px;
margin: 20px auto;
}
h1 {
font-size: 1.8rem;
}
button {
font-size: 1rem;
}
#result {
font-size: 1.2rem;
}
}
Binary Converter
Conversion Result
Enter a value and click Convert.
Understanding Binary Conversion
Binary (base-2) is a numeral system that uses only two symbols: typically "0" (zero) and "1" (one). It's the fundamental language of computers and digital systems. Unlike the decimal system (base-10) we use daily, which has ten unique digits (0-9), binary relies on powers of 2.
Decimal to Binary Conversion
To convert a decimal number to its binary equivalent, you can use the method of repeated division by 2.
- Divide the decimal number by 2.
- Record the remainder (which will be either 0 or 1). This is your least significant bit (LSB).
- Take the quotient from the division and divide it by 2 again.
- Record the new remainder. This will be the next bit to the left.
- Continue this process until the quotient becomes 0.
- The binary representation is formed by reading the remainders from bottom to top (the last remainder is the most significant bit, MSB).
Example: Convert decimal 25 to binary.
- 25 ÷ 2 = 12 remainder 1 (LSB)
- 12 ÷ 2 = 6 remainder 0
- 6 ÷ 2 = 3 remainder 0
- 3 ÷ 2 = 1 remainder 1
- 1 ÷ 2 = 0 remainder 1 (MSB)
Reading the remainders from bottom to top:
11001. So, decimal 25 is binary 11001.
Binary to Decimal Conversion
To convert a binary number to its decimal equivalent, you multiply each binary digit by its corresponding power of 2 and sum the results. The rightmost digit is the 0th power, the next digit to the left is the 1st power, and so on.
Example: Convert binary 11001 to decimal.
- The binary number is
11001.
- Starting from the right (LSB):
- 1 * 20 = 1 * 1 = 1
- 0 * 21 = 0 * 2 = 0
- 0 * 22 = 0 * 4 = 0
- 1 * 23 = 1 * 8 = 8
- 1 * 24 = 1 * 16 = 16 (MSB)
Summing these values: 1 + 0 + 0 + 8 + 16 = 25. So, binary 11001 is decimal 25.
Use Cases for Binary Conversion
Binary conversion is fundamental in computing and various technical fields:
- Computer Science: Understanding how data is stored and processed at the lowest level.
- Digital Electronics: Designing logic gates and circuits.
- Networking: IP addressing and subnetting often involve binary representations.
- Programming: Bitwise operations, data compression, and low-level optimizations.
- Cryptography: Algorithms often operate on binary data.
This calculator simplifies these conversions, making it easier to work with binary and decimal numbers.
function convertBinary() {
var decimalInput = document.getElementById("decimalInput").value;
var binaryInput = document.getElementById("binaryInput").value;
var resultDiv = document.getElementById("result");
resultDiv.innerText = ""; // Clear previous results
// Check if decimal input is provided and valid
if (decimalInput !== null && decimalInput !== "") {
var decimalValue = parseInt(decimalInput, 10);
if (isNaN(decimalValue) || decimalValue < 0) {
resultDiv.innerText = "Invalid decimal input. Please enter a non-negative whole number.";
return;
}
// Convert decimal to binary
var binaryResult = decimalValue.toString(2);
resultDiv.innerHTML = "Decimal
" + decimalValue + " is Binary
" + binaryResult + "";
}
// Check if binary input is provided and valid
else if (binaryInput !== null && binaryInput !== "") {
// Basic validation for binary string
if (!/^[01]+$/.test(binaryInput)) {
resultDiv.innerText = "Invalid binary input. Please enter only 0s and 1s.";
return;
}
// Convert binary to decimal
var decimalResult = parseInt(binaryInput, 2);
if (isNaN(decimalResult)) {
resultDiv.innerText = "Invalid binary input. Could not convert.";
return;
}
resultDiv.innerHTML = "Binary
" + binaryInput + " is Decimal
" + decimalResult + "";
} else {
resultDiv.innerText = "Please enter a decimal number or a binary string.";
}
}