15+ JavaScript Binary to Decimal Converters

This post contains a total of 15+ Hand-Picked JavaScript Binary to Decimal Converters. All the Binary to Decimal converters are made using JavaScript, Html and uses CSS for Styling.

You can use the source code of these converters for your own personal or educational use with credits to the original owner.

Related Posts

Click a Code to Copy it.

1. By Pedro Dias

Made by Pedro Dias. A Simple Binary to Decimal Converter made using JavaScript. Enter the Binary number in the input box and click the “Enter” button. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Binary to Decimal</title>
    </head>
    <body>
        <input id="text" type="text" placeholder="binary number">
        <input type="button" value="Enter" onclick="check()">
        <p id="answer"></p>
    </body>
    <script>
        function conversor(text, p) {
    // Alternative soluction:
    //var binary = parseInt(text, 2);
    //p.innerHTML = binary;
    
    var decimal = 0;
    
    for (let n of text) {
        decimal = decimal * 2 + parseInt(n, 10);
    }
    
    p.innerHTML = decimal;
}

function check() {
    var text = document.querySelector("#text").value;
    var p = document.querySelector("#answer");
    
    for (let n of text) {
        if (!(n == '1' || n == '0')) {
            p.innerHTML = "A binary number is composed just by 0s and 1s!";
            return false;
        }
    }
    
    conversor(text, p);
}

        </script>
</html>

2. By Manaf SULTAN

Made by Manaf SULTAN. Enter the binary number and click the Convert button to get the decimal output. ( Source )

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>
        <style>
            body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}

.container {
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    border-radius: 15px;
    padding: 50px;
    width: 50%;
    max-width: 500px;
    margin-top: 8%;
}

p {
    font-size: 16pt;
}

input[type=text] {
    border-style: solid;
    border-radius: 5px;
    border-width: 1px;
    background-color: #fcfcfc;
    height: 35px;
    font-size: 14pt;
    padding-left: 5px;
}

input[type=button] {
    border-style: solid;
    border-radius: 5px;
    border-width: 1px;
    background-color: #fcfcfcfc;
    width: 125px;
    height: 35px;
    transition: all 0.3s ease;
}

input[type=button]:hover{
    transform: scale(1.1);
    box-shadow: 0 0 2px 2px;
}
            </style>
	    
		 <div class="container">
		     
        <h1>Bin2Dec</h1>
        
        <h3>Binary to Decimal Converter</h3>
        
        <p>Binary: <input type="text" id="b-input" onchange="convert()" placeholder="Entr a binary number"/></p>
        
        <p>Decimal: <input type="text" id="d-input" readonly /></p>
        
        <p><input type="button" value="CONVERT" onclick="convert()"></p>
        
    </div>
    <script>
        function convert() {
    
    const binary = document.getElementById('b-input').value;
    
    if (binary === '') return alert('Please, enter a binary number');
    
    binary.split('').map((char) => {
        
        if (char !== '0' && char !== '1') return alert('Please, enter a binary number');
        
    });
    
    const decimal = parseInt(binary, 2);
    
    document.getElementById('d-input').value = decimal;
    
    return true;
}
        </script>
	</body>
</html>

3. By Tim Berland

Made by Tim Berland. Program runs in the console. ( Source )


            //super simple and powerful binary to decimal converter!
var num = prompt("Please enter your binary number for conversion.");
var num0 = num;
var dec = 0;

while (num>0) {
    a = Math.floor(Math.log10(num));
    dec += Math.pow(2,a);
    num -= Math.pow(10,a);
}

document.write("The binary number "+num0+" in decimal is: "+dec+".");

4. By Abderrahim Oukhrib

Made by Abderrahim Oukhrib. Enter the binary number on the right-side and click the change button to get the output. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <style>
            body {
    background-color:#123;
    color:#def;
}
input{
width:100%;
}
table{
    width:100%;
    text-align:center;
}
td{
}
            </style>
    <table>
    <tr><td>Decimal</td><td></td><td>Binary</td></tr>
        <tr>
        <td><input onchange="ToBinary()" placeholder="Decimal"></td>
        <td> <></td>
      <td><input onchange="ToDecimal()" placeholder="Binary">
       </td></tr>
       <tr><td colspan="3"><button>Change</button></td></tr>
        </table>
        <script>
            var Decimal,Binary;
window.onload = function(){
    Decimal = document.getElementsByTagName("input")[0];
    Binary = document.getElementsByTagName("input")[1];
}
function ToBinary(){    
    Binary.value = Number(Decimal.value).toString(2);
}
function ToDecimal(){
    Decimal.value = parseInt(Binary.value,2);
}

            </script>
    </body>
</html>

5. By Jace Fincham

Made by Jace Fincham. The program gives the result in Realtime, enter binary number at the top and get result at bottom. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Binary to Decimal Converter</title>
    </head>
    <body>
        <style>
            * {
     box-sizing: border-box;
 }

body {
    background-color: #4df;
}

h1 {
    font-variant: small-caps;
    margin-bottom: 0;
    text-align: center;
}

h4 {
    font-variant: small-caps;
    margin-top: 0;
    text-align: center;
}

p {
    margin: 0.7em 0;
}

table {
    width: 100%;
}

input {
    font-size: 16px;
    margin: 0.5em 0;
    padding: 5px;
    width: 100%;
}

section {
    border: 1px solid #888;
    border-radius: 5px;
    background-color: #eee;
    margin-top: 1em;
    padding: 0 0.7em;
}
            </style>
        <div class="container">
            <h1>Binary to Decimal</h1>
            <h4>Version 1.3</h4>
            <p>Enter a binary value up to 16 digits in length to see its decimal equivalent.</p>
            <table>
            <tr><td><input type="text" id="input-field" name="input" placeholder="Binary" maxlength="16" autofocus /></td></tr>
            <tr><td><input type="text" id="output-field" name="output" placeholder="Decimal" readonly /></td></tr>
            </table>
            <section>
                <p><strong>Binary</strong> is a base-2 number system. Its only possible values are 0 and 1.</p>
                <p><strong>Decimal</strong> is a base-10 number system. Its possible values are 0 - 9.</p>
            </section>
        </div>
        <script>
            window.onload = function() {
    let input = document.getElementById('input-field');
    let output = document.getElementById('output-field');
    let maxlength = input.getAttribute('maxlength');
    let val = search = calc = 0;
    let arr = [];
    let regex = /[^0-1]/;
    
    input.addEventListener('input', function() {
        input.value = input.value.length > maxlength ? input.value.substring(0, maxlength) : input.value;
        val = input.value;
        search = val.search(regex);
        
        if(search === -1) {
            arr = val.split('');
            arr = arr.reverse();
            
            for(let i = 0; i < arr.length; i++)
                calc += arr[i] * Math.pow(2, i);
            
            output.value = calc;
        } else {
            output.value = 'ERROR';
        }
        
        calc = 0;
    });
};
            </script>
    </body>
</html>

6. By TerrIA

Made by TerrIA. Enter Binary number and click the convert button. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Binary to Decimal</title>
        <!--This program can convert/translate Binary Number to Decimal-->
    </head>
    <body>
        <style>
            body {
    background-color:black;
    color:green;
}
            </style>
        <h3>Enter a binary number</h3>
        <input type="text" id="Bnum" style="width:100%"/>
        <button onclick="Convert()">Convert</button>
        <br />
        <h3>Decimal Form: </h3>
        <textarea id="Out" style="width:100%;"></textarea>
        <br />
        <p id="temp"></p>
        <script>
function Convert(){
    var k = 1,l = 0;
    var tmp = document.getElementById("temp");
     document.getElementById("temp").innerHTML = temp.value = ""
    var num = document.getElementById("Bnum").value
    var out = document.getElementById("Out")
    
    
    for (var i = num.length-1; i >-1; i--){
        if(num.charAt(i) == "1"){
        document.getElementById("temp").innerHTML = tmp.value += num.charAt(i) +": " + k + "<br />";
            k += k;
            l += k;
        }else{
            k+=k;
            document.getElementById("temp").innerHTML = tmp.value += num.charAt(i) + "<br />";
        }
    }
    document.getElementById("Out").innerHTML = l/2;
}
            </script>
    </body>
</html>

7. By Derek Tan

Made by Derek Tan. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Bin to Dec</title>
        <meta charset="utf-8">
    </head>
    <body>
        <style>
            body {
    display:block;
    background-color:lightgray;
    font-family:sans-serif, arial;
    color:gray;
}

.container{
    display:block;
    min-height:2rem;
    padding-top:1rem;
    background-color:whitesmoke;
}

#bin, #dec{
    background-color:white;
    color:maroon;
}

#action{
    size:200%;
    border:none;
    background-color:red;
    color:white;
    transition-duration:1s;
}

#action:hover{
    background-color:green;
}
            </style>
        <center><h1>Binary to Decimal</h1></center>
        <div class="container">
            <center><input id="bin" placeholder="8-digit binary" maxlength="8"></input></center>
            <br>
            <center><input id="dec" placeholder="decimal number here" readonly="true"></input></center>
            <br>
            <div id="action" onclick="showNumber()"><center>Convert</center></div>
        </div>
        <script>
            //binary to decimal converter.

function isBin(bin){
    //get all digits.
    var digits = bin.split('');
    for(var i = 0; i < 8; i++){
        //check if digits are binary.
        if(digits[i] === '0' || digits[i] === '1'){
            continue;
        }
        else{
            return false;
        }
    }
    return true;
}

function toDec(bin){
    var dec = 0;
    if(typeof bin != "number"){
        if(isBin(bin)){
            for(var j = 0; j < 8; j++){
                dec += Math.pow(2, 7 - j) * parseInt(bin[j]);
            }
            return dec;
        }
    }
    else{
        return dec;
    }
}

function showNumber(){
    var binary = document.getElementById("bin").value;
    document.getElementById("dec").value = toDec(binary);
}

            </script>
    </body>
</html>

8. By Milos popadic

Made by Milos popadic. A automatic Binary to Decimal converter. ( Source )

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Binary to decimal</title>
        <link rel="stylesheet" href="./style.css" />
    </head>
    <body>
        <style>
            * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    width: 100vw;
    display: flex;
}

.card {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: lightgray;
    padding: 3rem;
    width: fit-content;
    box-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.8);
    z-index: 1;
}

.input {
    line-height: 2rem;
    font-size: 2rem;
    text-align: center;
    border: 1px solid black;
}

.input:focus {
    outline: 0;
}

.label {
    margin: 1rem 0 0.5rem 0;
    text-align: center;
}

.danger {
    border: 1px solid red;
}

.danger:focus {
    outline: 0;
}
            </style>
        <div class="card">
            <h1>Binary to decimal conversion</h1>
            <label class="label">Enter binary value</label>
            <input class="input" id="input" />
            <label class="label">Decimal value</label>
            <input class="input" id="output" disabled />
        </div>
        <script>
            const input = document.getElementById('input');
const output = document.getElementById('output');

input.addEventListener('keyup', () => {
    this.inputValueChanged();
});

input.addEventListener('focusout', () => {
    if (input.value.length == 0) {
        input.classList.remove('danger');
    }
});

function inputValueChanged() {
    if (this.validateInput()) {
        input.classList.remove('danger');
        this.convertToBinary();
    } else {
        input.classList.add('danger');
        output.value = '';
    }
}

function validateInput() {
    const allowedValues = ['0', '1'];

    if (input.value.split('').some((v) => !allowedValues.includes(v))) {
        return false;
    } else if (input.value.length == 0 || input.value.length > 8) {
        return false;
    } else {
        return true;
    }
}

function convertToBinary() {
    let result = 0;
    const array = input.value.split('');
    array.reverse();

    for (let i = 0; i < array.length; i++) {
        result += +array[i] * Math.pow(2, i);
    }

    output.value = result;
}
            </script>
    </body>
</html>

9. By Fukushiro

Made by Fukushiro. Enter Binary number and after that click the Convert button. ( Source )

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="script.js"></script>
  <body>
    <input id="input" type="text" placeholder="Binario" />

    <p id="output"></p>

    <button id="convertButton">Converter</button>
    <script>
        function binaryToDecimal(binary) {
  return parseInt(binary, 2);
}

window.onload = () => {
  document.getElementById("convertButton").onclick = () => {
    const binary = document.getElementById("input").value;
    if (!binary.match(/^[01]+$/)) {
      document.getElementById("output").innerHTML = "Insira um valor valido";
      return;
    }
    const decimal = binaryToDecimal(binary);
    document.getElementById("output").innerHTML = decimal;
  };
};
        </script>
  </body>
</html>

10. By Aditya Vaste

Made by Aditya Vaste. The program gives an error if you enter a number that is not 0 or 1. ( Source )

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Document</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Texturina:[email protected]&display=swap" rel="stylesheet">
</head>

<body>
    <style>
        body{
    background-image:url(https://images.unsplash.com/photo-1504276048855-f3d60e69632f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8NHx8Z2lybHxlbnwwfHwwfA%3D%3D&auto=format&fit=crop&w=1100&q=60);
    background-size:cover;
}
#maindiv{
  width:100%;
  height:100%;
  color: white;
  text-align: center;
  font-family: 'Texturina', serif;
}

input {
  font-family: Texturina;
  font-size: 1.2rem;
  text-align:center;

}

.layer { background-color: rgba(0, 0, 0, 0.3);
         position: absolute;
         top: 0; left: 0;
         width: 100%;
         height: 100%;
         z-index:-1;
}
    </style>
<div class="layer"></div>

<div id="maindiv">

  <h1>Binary To Decimal</h1>
  <input type="number" id="biNum" />
  <input type="button" value="Convert" id="convertBtn" />
  <h2 id="showOutput">Output</h2>
  
 </div>
 <script>
     

document.addEventListener("DOMContentLoaded", function(event) { 
var btn = document.getElementById('convertBtn').addEventListener('click', bi2dec);

function bi2dec() {

  var input = document.getElementById('biNum').value;

  if (input.includes(2) || input.includes(3) || input.includes(4) || input.includes(5) || input.includes(6) || input.includes(7) || input.includes(8) || input.includes(9)) {

 document.getElementById('showOutput').innerText = 'Sorry The Binary Number Only Consists of 0 and 1';

  }

  else if (input.includes(0) || input.includes(1))
  {
    var num2st = input.toString();

    var sum = 0;
    for (var i = 0; i < num2st.length; i++) {
      let eachBit = num2st.charAt(num2st.length - 1 - i);

      sum += parseInt(eachBit) * Math.pow(2, i);
    }
    document.getElementById('showOutput').innerText = sum;

  }
};

});
     </script>
</body>

</html>

11. By Yeffry

Made by Yeffry. Enter the binary number in the input box and press enter to get the decimal output. ( Source )

<!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</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body{
    font-family: 'Roboto', sans-serif;
    height: 100vh;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 50%;
}

.heading{
    margin: 3rem;
}
.binary-form{
    width: 80%;
    text-align: center;

}
.binary{
    display: block;
    padding: 15px 5px;
    margin: 10px auto;
    height: 20px;
    width: 50%;
    border:1px solid #eaeaea;
    outline:none;
}
.binary-label{
    font-size: 1.2rem;
}
        </style>
    <div class="container">
        <h1 class="heading title">Convert Binary to Decimal</h1>
        <form class="binary-form">
            <label for="binary" class="binary-label">Enter Binary Number</label>
            <input type="number" name="binary" class="binary">
        </form>

        <div class="decimal-data">

        </div>
    </div>



    <script src="app.js"></script>
    <script>
        function convert (bin) {
    let result = [];
    let revArr = bin.split('').reverse();
    console.log(revArr)
    revArr.forEach((num, index) => {
        result.push(parseInt(num) * Math.pow(2, index))
    })

    return result.reduce((acc, curr) => acc+=curr , 0)
}

function renderData (decimal) {
    const heading = document.createElement('h3');
    heading.textContent = `Decimal: ${decimal}`;
    decimalData.appendChild(heading);
}

function checkData (event) {
    event.preventDefault();
    const binaryNum = event.target.binary.value;

    console.log(binaryNum.split(''))
    //check that every num is 0 and 1
    const status = binaryNum.split('').every((num) =>{
        return num === '1' || num === '0';
    })

    if(status && binaryNum.length <= 8){
        const decimal = convert(binaryNum);
        renderData(decimal)
    } else {

    }
}


const binaryForm = document.querySelector('.binary-form');
const decimalData = document.querySelector('.decimal-data');
binaryForm.addEventListener('submit', checkData);
        </script>
</body>

</html>

12. By Chasing Hunter

Made by Chasing Hunter. Enter binary number at the bottom and get the decimal number at the top. ( Source )

<!DOCTYPE html>

<html>

    <head>
    
        <title>
        Binary / Decimal Converter
        </title>
        
    </head>
    
    <body>
        <style>
            body {
    background:radial-gradient(#FFEE00,#FFCC00,#FFAA00,#FF8800,#FF6600,#FF4400,#FF2200,#FF0000);
    height:420px;
}

marquee {
   font-size:24px; 
   position:absolute;
   color:#77FF00;
}

hr {
   position:absolute;
}

label {
   font-size:30px;
   color:#000099;
   text-shadow:4px 4px 5px #FFFFFF;
}

input {
   height:60px;
   font-size:25px;
   width:180px;
   border:0;
   border-radius:15px;
   background-color:#00ff00;
}

.b1 {
   top:70px;
   left:25px;
}

.h1 {
   position:absolute; 
   top:100px;
   left:65px;
}

#deci {
   position:absolute;
   top:140px;
   left:65px;
}

.b2 {
   top:220px; 
   left:25px;
}

.h2 {
   position:absolute; 
   top:250px;
   left:65px;
}

#bin {
    position:absolute;
    top:290px;
    left:65px;
}

.b3 {
   top:370px;
   left:25px; 
}

.m2 {
   top:398px; 
}
            </style>
        <marquee behavior="alternate" class="m1">
        &nbsp &nbsp &nbspEnter Numbers in<br/> any of the Input Boxes.
        </marquee>
        
        <hr class="b1" height="2px" width="270px" color="#00FAFA">
        
        <label class="h1">
        Decimal No.:
        </label>
        
        <form>
        
        <input id="deci" type="number" placeholder="24" onkeyup="deci_to_bin();" onclick="deci_to_bin();">
        </input>
        
        <hr class="b2" height="2px" width="270px" color="#00FAFA">
        
        <label class="h2">
        Binary No.:
        </label>
        
        <input id="bin" type="number" placeholder="11000" onkeyup="bin_to_deci();" onclick="bin_to_deci();">
        </input>
        
        </form>
        
        <hr class="b3" height="2px" width="270px" color="#00FAFA">
        
        <marquee class="m2" behavior="alternate">
        By Chasing Hunter
        </marquee>
        <script>
            function deci_to_bin() {
    var bin = document.getElementById("bin");

    var deci = document.getElementById("deci");
    
    if(deci.value=="ERROR!") {
       deci.value = "" ;
    }
    
    deci.type = "number";

    bin.value = Number(deci.value).toString(2);
}

function bin_to_deci() {
    var bin = document.getElementById("bin");

    var deci = document.getElementById("deci");
    
    var b = bin.value;
    
    var co_eff;
    var power = b.length - 1;
    var len = b.length - 1;
    var sum = 0;
    
    for(co_eff=0;co_eff<=len;co_eff++) {
        sum = b[co_eff]*(Math.pow(2,power)) + sum;
        power--;
        
    if(b[co_eff]!=0 && b[co_eff]!=1) {
       deci.type = "text";
       deci.value = "ERROR!";
       break;
    }
    
    else {
       deci.type = "num";
       deci.value = ""
        }        
        
        deci.value = sum;
    
    }

}
            </script>
    </body>
    
</html>

13. By Alex O

Made by Alex O. ( Source )

function convert(binary){
    
    var binaryArray = String(binary).split("").map((binary)=>{
        return Number(binary)//converting user input into an array of numbers
    }).reverse();//reversing the string so the numbering of the binary numbers matches the index which is easier to work with.
    var products = [];
    //iterating the array
    for(var i = 0;i < binaryArray.length;i++){
        var conv = binaryArray[i]*Math.pow(2,binaryArray.indexOf(binaryArray[i]));
        products.push(conv);
        binaryArray[i] = 0;//turning the already worked on value to zero so the indexOf doesn't get into a loop of selecting the first occurence of elements 
    };
    //iterating the products array
    var sum = products.reduce(function add(a,b){
        return a + b;
    },0)
    return sum;//binary number in decimal form
}

try{
    var user_input = prompt("Enter a binary number");
    console.log(convert(user_input));
    if(user_input == "") throw "empty";
    for(var i = 0;i < user_input.length;i++){
        if(user_input[i] > 1) throw "invalid";
    }
    }
catch(err){
    console.log("input is " + err);
}

14. By Bobby

Made by Bobby. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <style>
            body{
    background:oldlace;
    text-align:center;
}
#result{
    width:100px;
    margin:0 auto;
    background:lightskyblue;
    color:white;
    border:3px inset grey;
    padding:10px;
}
input{
    background:black;
    color:limegreen;
    text-align:center;
    width:100px;
}
.wrapper{
    width:100px;
    margin:0 auto;
}
            </style>
       <h2>Binary to decimal</h2>
    
       <div class='wrapper'>
       <label>Binary:</label> <input id='binary' type='number' placeholder='0000...'>
       </div>
       <hr>
       <div id='result'>0</div>
       <script>
           window.onload=function(){

var ifield = document.getElementById('binary');

ifield.addEventListener('input', function(){
   document.getElementById("result").textContent = parseInt( ifield.value, 2) || 0 ;
});

};
           </script>
    </body>
</html>

15. By Larissa Carvalho

Made by Larissa Carvalho. ( Source )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="fav-icon.png" type="image/png">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <title>Bin2Dec</title>
</head>
<body>
    <style>
        * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    font-family: 'Roboto', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #111;
}

.container {
    position: relative;
    width:90%;
    max-width: 500px;
    padding: 40px;
    background: #151515;
}

.container h2 {
    color: #999;
    margin-bottom: 45px;
}

#form.valid .indicator {
    background: #0f0;
    box-shadow: 0 0 5px #0f0,
                0 0 10px #0f0,
                0 0 20px #0f0,
                0 0 40px #0f0;
}

#form.invalid .indicator {
    background: #f00;
    box-shadow: 0 0 5px #f00,
                0 0 10px #f00,
                0 0 20px #f00,
                0 0 40px #f00;
}

.input-field {
    position: relative;
    height: 40px;
    width: 100%;
}

.input-field input[type="tel"] {
    position: absolute;
    background: transparent;
    font-size: 1rem;
    color: #fff;
    width: 100%;
}

.input-field label {
    position: absolute;
    top: 0;
    left: 0;
    color: #555;
    pointer-events: none;
    display: block;
    transition: 0.5s;
}

.input-field input[type="tel"]:focus + label,
.input-field input[type="tel"]:valid + label {
    transform: translateY(-35px);
    font-size: 1.2rem;
    color: #fff;
    background: #0F878A;
    padding: 2px 6px;
}

.input-field span {
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
    background: #555;
    width: 100%;
    height: 2px;
}

.input-field .border:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00b0ff;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s ease-in-out;
}

.input-field input[type="tel"]:focus ~ .border:before,
.input-field input[type="tel"]:valid ~ .border:before {
    transform: scaleX(1);
    transform-origin: right;
    transition: transform 0.5s ease-in-out;
}

.container > span {
    width: 100%;
    padding: 15px 0;
    display: block;
    margin-top: 1rem;
    color: #555;
    font-weight: bold;
    background: transparent;
    border-bottom: 3px solid #333;
}

.container #result {
    font-weight: bold;
    color:#fff
}

.container #result.invalid {
    color: #f00;
}

.btn {
    margin-top: 20px;
    border: none;
    box-shadow: none;
    padding: 10px 25px;
    background: #333;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}

.btn:hover {
    background: #00b0ff;
}

.input-field .indicator {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 10px;
    height: 10px;
    background: #555;
    border-radius: 50%;
}
        </style>
    <div class="container">
        <h2>Binary To Decimal</h2>
        <form id="form">
            <div class="input-field">
                <input type="tel" maxlength="8" required name="" id="binary" onkeyup="validate()">
                <label>Enter a Number Binary:</label>
                <span class="indicator"></span>
                <span class="border"></span>
            </div>
        </form>
        <span >Result:<span id="result"></span></span> 
    </div>
    <script src="js/script.js">

    </script>
    <script>
        function validateBinary(){  
    let binary = document.getElementById('binary').value;
    let isBinary;

    for (binarys of binary) {
        if (binarys != 0 && binarys !=1) {
            isBinary = false;
            break
        } else {
            isBinary = true;
        }
    }
    return isBinary; 
}

function binToDec() {
    let result = 0;
    let indexBinary = 0;
    let binary = document.getElementById('binary').value;
    let binLength = binary.length;
    for (binLength; binLength > 0; binLength--, indexBinary++) { 
        result = result + (Number(binary[indexBinary]) * Math.pow(2, binLength - 1));
    }
    return result; 
}

function validate() {
    let binary = document.getElementById('binary').value;
    const isBinary = validateBinary();
    const form = document.getElementById('form');
    const result = document.getElementById('result');
    const span = document.querySelector('.container > span');
    
    if (binary == "") {
        form.classList.remove('invalid');
        form.classList.remove('valid');
        result.classList.remove('invalid');
        result.innerHTML = "";
    } else if (!isBinary){
        form.classList.remove('valid');
        form.classList.add('invalid');
        result.classList.add('invalid');
        result.innerHTML = " Enter only 0's and 1's";
    } else {
        form.classList.remove('invalid')
        form.classList.add('valid')
        result.classList.remove('invalid');
        const resultDec = binToDec();
        result.innerHTML = " " + resultDec;
        console.log(spanResult)
    }
}


        </script>
</body>
</html>

16. By Cletus Nwokoro

Made by Cletus Nwokoro. Enter the binary number inside the bracket at “bin2dec(1010);”. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
    <h2>Converting Binary to Decimal</h2>
    
    <p id="demo"></p>
    
    <script>
    document.getElementById("demo").innerHTML =
    bin2dec(1010);
    
    function bin2dec(bin) {
        return parseInt(bin,2).toString(10);
    }
    </script>
    </body>
</html>