Design Binary to Decimal Number Converter using JavaScript

Last Updated : 26 Apr, 2024

Binary to Decimal Converter is a tool that transforms binary numbers (base-2) into decimal numbers (base-10). It simplifies the process of converting binary data into decimal format, aiding tasks such as programming, digital electronics, and numerical computations.

What is Binary?

Binary is a numerical system with a base of 2, utilizing only two digits: 0 and 1. It is fundamental in computing, representing data using combinations of these digits. Binary forms the foundation of digital electronics and computer programming.

What is Decimal?

Decimal refers to the base-10 numerical system, utilizing ten digits from 0 to 9 to represent values. It is the most common numerical system, widely used in everyday mathematics, finance, and calculations, where each digit’s position represents a power of 10.

How to convert Binary to Decimal?

To convert binary to decimal, you multiply each digit of the binary number by its corresponding power of 2, starting from the rightmost digit, and then sum these products.

Binary number:  1101
Calculation:
1 * 2^3 + 1 * 2^2 + 0 * 2^1 + 1 * 2^0
= 8 + 4 + 0 + 1
= 13
So, the decimal equivalent of binary 1101 is 13.

How to use Binary to Decimal Converter?

To use a Binary to Decimal Converter, input the binary number you wish to convert. The converter will automatically translate the binary digits into its equivalent decimal representation. Simply enter the binary value and obtain the corresponding decimal output, facilitating tasks such as programming and numerical computations.

Code Example:

Javascript

function validateBinary(event) { 
    const key = event.key; 
    if (key !== "0" && key !== "1" && key !== " ") { 
        event.preventDefault(); 
    } 
} 
  
function displayConversionSteps(binaryValue, decimalValue) { 
    const stepsInput = document.getElementById("conversionSteps"); 
    stepsInput.value = `(${binaryValue})₂ = `; 
  
    // Convert each binary digit to its corresponding power of 2 
    let steps = ''; 
    for (let i = 0; i < binaryValue.length; i++) { 
        const power = binaryValue.length - 1 - i; 
        const digitValue = parseInt(binaryValue[i], 2); 
        steps += `(${binaryValue[i]}) × 2^${power}`; 
        if (i < binaryValue.length - 1) { 
            steps += ' + '; 
        } 
    } 
  
    steps += ` = (${decimalValue})₁₀`; 
    stepsInput.value += steps; 
} 
  
function convertBinaryToDecimal() { 
    const binaryInput = document.getElementById("binaryInput").value.trim(); 
    if (binaryInput === "") { 
        alert("Please enter a binary number."); 
        return; 
    } 
  
    const decimalOutput = parseInt(binaryInput, 2); 
    document.getElementById("decimalOutput").value = decimalOutput; 
    displayConversionSteps(binaryInput, decimalOutput); 
} 
  
function clearFields() { 
    document.getElementById("binaryInput").value = ""; 
    document.getElementById("decimalOutput").value = ""; 
    document.getElementById("conversionSteps").value = ""; 
}

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Binary to Decimal Converter</title> 
</head> 
  
<body> 
    <div class="container"> 
        <h3>Binary to Decimal Converter</h3> 
        <div class="myInput"> 
            <div class="input-group"> 
                <label for="binaryInput"> 
                    Binary Input: 
                </label> 
                <input type="text" 
                       id="binaryInput" 
                       placeholder="Enter Binary Number"
                       onkeypress="validateBinary(event)"> 
            </div> 
        </div> 
  
        <div class="buttonsControls"> 
            <button class="myBTN" 
                    onclick="convertBinaryToDecimal()"> 
                Convert 
            </button> 
            <button class="myBTN" 
                    onclick="clearFields()"> 
                Clear 
            </button> 
        </div> 
  
        <div class="myOutput"> 
            <div class="output-group"> 
                <label for="decimalOutput"> 
                    Decimal Output: 
                </label> 
                <input type="text" 
                       id="decimalOutput" 
                       placeholder="Decimal value is here" readonly> 
            </div> 
            <div class="conversion-steps"> 
                <label for="conversionSteps"> 
                    Conversion Steps: 
                </label> 
                <input type="text" 
                       id="conversionSteps" 
                       placeholder="Conversion steps here" readonly> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

CSS

body { 
    margin: 0; 
    padding: 0; 
    font-family: Arial, sans-serif; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    top: 20px; 
} 
  
.container { 
    text-align: center; 
    margin-top: 30px; 
    width: 45%; 
    border-radius: 6px; 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); 
    background-color: #BBC3A4; 
} 
  
input { 
    padding: 10px; 
    font-size: 16px; 
    border-radius: 6px; 
    border: 1px solid #ccc; 
    text-align: center; 
} 
  
label { 
    font-size: 18px; 
    font-weight: bold; 
    text-align: center; 
} 
  
.buttonsControls { 
    width: 90%; 
    margin: 10px; 
    padding: 6px; 
} 
  
.myBTN { 
    padding: 10px 20px; 
    font-size: 16px; 
    border-radius: 3px; 
    border: none; 
    outline: none; 
    background-color: #4f4c5e; 
    color: #ffffff; 
    font-size: 14px; 
    cursor: pointer; 
    transition: background-color 0.3s ease; 
    margin: 5px; 
    font-weight: bold; 
} 
  
.myBTN:hover { 
    background-color: #2a93d5; 
    transform: scale(1.05); 
} 
  
.myOutput, 
.myInput { 
    width: 100%; 
    margin: 0 auto; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
} 
  
.output-group, 
.conversion-steps, 
.input-group { 
    width: 90%; 
    padding: 8px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
} 
  
@media screen and (max-width: 720px) { 
    .container { 
        width: 90%; 
    } 
} 
  
@media screen and (max-width: 720px) { 
    .container { 
        width: 80%; 
    } 
} 
  
@media screen and (max-width: 560px) { 
    .input-group { 
        flex-direction: column; 
    } 
  
    label { 
        margin-bottom: 0; 
    } 
  
    input { 
        margin-bottom: 10px; 
    } 
  
    .buttonsControls { 
        flex-direction: column; 
    } 
  
    .buttonsControls .myBTN { 
        margin-top: 5px; 
    } 
  
    .output-group { 
        width: 100%; 
        flex-direction: column; 
    } 
  
    .conversion-steps { 
        width: 100%; 
        flex-direction: column; 
    } 
  
    label { 
        padding: 6px 0; 
    } 
} 
  
@media screen and (max-width: 480px) { 
    .container { 
        width: 90%; 
    } 
} 
  
@media screen and (max-width: 360px) { 
    .container { 
        width: 95%; 
    } 
}

Advantages of Binary to Decimal Converter

Numerical Precision: Decimal converters provide accurate decimal representations of binary numbers, crucial for precise calculations in various fields.
Simplicity in Understanding:Decimal output simplifies comprehension and analysis, aiding clarity in mathematical operations and data interpretation.
Compatibility with Human Perception: Decimal representation aligns with human understanding, making it intuitive for everyday use and communication.
Ease of Integration: Decimal outputs seamlessly integrate with existing decimal-based systems, enhancing compatibility and interoperability in diverse applications.
Facilitates Numerical Comprehension: Decimal conversion simplifies the understanding of binary data for non-technical users, promoting accessibility and usability in educational and professional settings.

Suggest improvement

Binary to Hexadecimal Converter using JavaScript

Share your thoughts in the comments