## DEV Community is a community of 695,394 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

# How to Build Binary to Decimal Converter Using JavaScript

Stackfindover
Hii i'm Rahul Jangir, a tech geek, designing enthusiast and an online expert, graduated in technology who is addicted to front-end development.

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

### What is binary to decimal 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 Binary to Decimal 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 Binary to Decimal 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">
<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>
<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;
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;
background: #fff;
}
.field {
margin-bottom: 15px;
}
.field label {
position: relative;
}
.field label input {
font-size: 1rem;
color: #565656;
background: transparent;
min-width: 100%;
border: 2px solid #565656;
}
.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;
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 {
font-size: 20px;
font-weight: 600;
color: #fff;
background: #4766ff;
width: 100%;
cursor: pointer;
}

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';
}
}

error.style.display = 'none';
Bin2Dec();
});
``````

## Discussion (5)

Eckehard

I tried the same using DML, bit shorter:

``````<!DOCTYPE html>
<html lang="de">

<meta charset="utf-8">
<title>title</title>
<script src="https://efpage.de/DML/DML_homepage/lib/DML-min.js"></script>
<style> body { font-family: sans-serif } </style>

<body>
<script>  "use strict";
// Make the input elements / key filter
function myInput(txt, rule) {
// Create text and input field
idiv(txt, "width: 100px;")
let inp = make("input", { value: 1 })
br()

// Key filter
inp.onkeydown = (e) => { if (e.key.length == 1) if (!e.key.match(rule)) e.preventDefault() } // Filter keys
return inp
}

// Build the page
h1("Binary converter")
let b = myInput("binary", "[0,1]")
let d = myInput("decimal", "[0-9]")
b.oninput = () => d.value = parseInt(b.value, 2)
d.oninput = () => b.value = ( parseInt(d.value,10) >>> 0).toString(2);
</script>
</body>
</html>
``````

LUKESHIRU • Edited

There is another approach that is quite simpler, and relies more in HTML5. Only 2 steps:

• First: Add a `pattern` in the input, so it only allows `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:
``````<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"
/>
``````
• Second: 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 form = document.querySelector("form");

event.preventDefault();
output.value = parseInt(input.value, 2);
});
``````

As you might notice, we used `parseInt` instead of implementing a custom logic, because is more than enough to parse a binary to decimal by setting the `radix` value (the second argument) to `2`.

Cheers!

Stackfindover

Awesome, Thanks for your suggestion bro :)

Jon Randy • Edited

A shorter way to do the actual conversion (without using `parseInt`):

``````[...str].reverse().reduce((a,v,i)=>a+(+v?1<<i:0),0)
``````
Jon Randy • Edited

Or even:

``````[...str].reduce((a,v)=>+v+a*2,0)
``````