Binary to Decimal Converter Using JavaScript [Updated]

Hello guys, today I am going to show you how to create Binary to Decimal Converter Using Html CSS & JavaScript

What is bin2decimal converter?

This is a tool to convert binary numbers (010101) to decimal.

Binary to Decimal conversion table.

Binary Number	Decimal Number
10101	21
10110	22
10111	23
11000	24
11001	25

How to Create Bin2Dec Converter Step by Step

Step 1 — Creating a New Project

The first thing we’ll do is create a folder that will contain all of the files that make up the project. Create an empty folder on your devices and name it “as you want”.

Open up Visual Studio Code or any Text editor, and create files(index.html, style.css, main.js) inside the folder. for creating B2D Converter Tool. In the next step, you will start creating the structure of the webpage.

Step 2 — Setting Up the basic structure

In this step, we will add the HTML code to create the basic structure of the project.

<!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>How to Create Binary to Decimal Converter Using JavaScript</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

This is the base structure of most web pages that use HTML.

Add the following code inside the <body> tag:

<div class="binary_to_decimal">
    <div class="container">
      <h2>Binary to Decimal Converter</h2>
      <div class="form-row">
        <form>
          <div class="field">
            <label>
              <input type="text" name="bin" id="input" autocomplete="off" placeholder="Binary No.">
              <p>Binary</p>
            </label>
          </div>
          <div class="field">
            <label>
              <input type="text" name="dec" id="output" readonly="true" placeholder="Decimal No. will appear here">
              <p>Decimal</p>
            </label>
          </div>
          <div class="field btn-field">
            <button type="button" id="btn">Convert</button>
          </div>
        </form>
        <div id="error-msg">
          <p>You should enter a binary number composed by 0 and 1!</p>
        </div>
      </div>
    </div>
  </div>

Step 3 — Adding Styles for the Classes

In this step, we will add styles to the section class Inside style.css file

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  -webkit-tap-highlight-color: transparent;
}
html,body {
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f1f1;
}
.binary_to_decimal h2 {
  margin-bottom: 20px;
  font-size: 30px;
  color: #4766ff;
}
.binary_to_decimal {
  width: 100%;
  max-width: 500px;
  padding: 20px;
  background: #fff;
  border-radius: 0.2rem;
}
.field {
  margin-bottom: 15px;
}
.field label {
  position: relative;
}
.field label input {
  font-size: 1rem;
  color: #565656;
  background: transparent;
  padding: 1rem 1.2rem;
  min-width: 100%;
  border: 2px solid #565656;
  border-radius: 0.2rem;
}
.field label input:focus {
  border-color: #4766ff;
}
.field label p {
  color: #4766ff;
  font-size: 1rem;
  user-select: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0.8rem;
  padding: 0 0.4rem;
  background: #fff;
  pointer-events: none;
  transition: top 0.2s, font-size 0.2s, color 0.2s;
}
.field label input:focus + p, .field label input:not(:placeholder-shown) + p {
  top: -20px;
  font-size: 0.9rem;
  color: #4766ff;
}
.field label input:not(:focus) + p {
  color: #565656;
}
button#btn {
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  background: #4766ff;
  width: 100%;
  cursor: pointer;
  border-radius: 0.2rem;
}

div#error-msg {
  color: red;
  display: none;
}

Step 4 — Adding some lines of JavaScript code

In this step, we will add some JavaScript code to create binary to decimal converter tool.

const input = document.querySelector("#input");
const output = document.querySelector("#output");
const btn = document.querySelector("#btn");
const error = document.querySelector("#error-msg");


function Bin2Dec() {
    const regEx = /^[0-1]+$/;

    if(input.value.match(regEx)) {
        const binArr = input.value.split('').reverse();
        let decNo = 0;

        binArr.forEach((item, index) => item === '1' ? decNo += Math.pow(2, index) : void 0);

        output.value = decNo.toString();
        output.style.cursor = 'text';
    }else {
        error.style.display = 'block';
    }
}


btn.addEventListener('click', () => {
    error.style.display = 'none';
    Bin2Dec();
})

There is another way to create a Binary to Decimal Converter which is fairly simple, and relies more heavily on HTML5.

By LUKE知る

Step 1: Add a pattern in the input, so it only allow 0 and 1 and make it required. You might also need to add a title so it has a good description when the pattern doesn’t match

<!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>How to Create Bin2Decimal Converter Using JavaScript</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="binary_to_decimal">
    <div class="container">
      <h2>Binary 2 Decimal Converter</h2>
      <div class="form-row">
        <form>
          <div class="field">
            <label>
              <input
                  autocomplete="off"
                  id="input"
                  name="bin"
                  pattern="[0|1]+"
                  placeholder="Binary No."
                  required
                  title="You should enter a binary number composed by 0 and 1"
                  type="text"
              />
              <p>Binary</p>
            </label>
          </div>
          <div class="field">
            <label>
              <input type="text" name="dec" id="output" readonly="true" placeholder="Decimal No. will appear here">
              <p>Decimal</p>
            </label>
          </div>
          <div class="field btn-field">
            <button type="submit" id="btn">Convert</button>
          </div>
        </form>
        <div id="error-msg">
          <p>You should enter a binary number composed by 0 and 1!</p>
        </div>
      </div>
    </div>
  </div>
  <script src="main.js"></script>
</body>
</html>

Step 2: Listen to the submit event of the form instead of listening to the click even in the button (because we are doing this, remember the type of button needs to be submit), no need to validate because that was done by the input already, so this is all the JS code you need

const input = document.querySelector("#input");
const output = document.querySelector("#output");
const form = document.querySelector("form");

form.addEventListener("submit", event => {
    event.preventDefault();
    output.value = parseInt(input.value, 2);
});

For Style you can use your custom style or use my CSS code as well.

Binary to Decimal Converter Tool Result

If you want source code you can download it from the below button

Download Code

Best collection of Bin2Dec Converter

#1 Simple Bin2decimal converter

Simple Bin2decimal converter using JavaScript, which was developed by Julia Shikanova. Moreover, you can customize it according to your wish and need.

Author:	Julia Shikanova
Created on:	May 31, 2019
Made with:	HTML, CSS & JS
Demo Link:	Source Code / Demo
Tags:	Simple Bin2decimal converter

#2 JavaScript binary to decimal converter

JavaScript bin2dec converter, which was developed by Yegor Kravchenko. Moreover, you can customize it according to your wish and need.

Author:	Yegor Kravchenko
Created on:	July 5, 2020
Made with:	HTML, CSS(SCSS) & JS
Demo Link:	Source Code / Demo
Tags:	JavaScript bin2dec

#3 Binary To Decimal Converter App

Bin2Dec Converter App, which was developed by Bartosz. Moreover, you can customize it according to your wish and need.

Author:	Bartosz
Created on:	August 14, 2020
Made with:	HTML, CSS & JS
Demo Link:	Source Code / Demo
Tags:	Bin2Dec Converter

#4 Awesome Bin2Dec Converter

Awesome Bin2Dec Converter, which was developed by Sara Cavalcante. Moreover, you can customize it according to your wish and need.

Author:	Sara Cavalcante
Created on:	October 6, 2021
Made with:	HTML, CSS & JS
Demo Link:	Source Code / Demo
Tags:	Awesome Bin2Dec Converter

#5 Binary to Decimal Visualizer

Binary to Decimal Visualizer, which was developed by JR Shampang. Moreover, you can customize it according to your wish and need.

Author:	JR Shampang
Created on:	October 20, 2017
Made with:	HTML, CSS(SCSS) & JS
Demo Link:	Source Code / Demo
Tags:	Binary to Decimal Visualizer

If you liked this article Bin2Decimal Converter Using JavaScript, you should check out this one How to create currency converter in JavaScript.