# Decimal To Binary Converter with HTML, CSS & JavaScript

In this article you will learn how to create Decimal To Binary Converter using HTML CSS and JavaScript.

If you know basic JavaScript then you can easily create JavaScript Decimal To Binary Converter tool. Earlier I have shared with you many more types of JavaScript element tutorials. This is a simple Decimal To Binary Converter tool that can convert any Decimal value to Binary.

Simple Decimal To Binary Converter is often used for many purposes. Decimal is basically any number from one to infinity. Each number has a binary code that a computer can understand.

That is, the computer cannot understand normal numbers. Binary numbers are basically made up of zeros and ones. So sometimes we need binary of a common number.

## Decimal-Binary Converter Javascript

I used html css and javascript to create this project. The JavaScript used here is very simple. So simple that you can easily understand it if you have a basic understanding of JavaScript.

Not only that, here you will get the necessary information, step by step tutorial and all the source code to create this design.

As you can see in the preview above this is a simple JavaScript Decimal To Binary Converter project. First, blue color is given on the web page, then a box is created.

In that box first I have given a heading and then two input boxes. One box for inputting decimal numbers and second input box for inputting binary numbers.

When you input a number in the decimal input box, its binary amount will be automatically displayed in the binary input box.

## Decimal to Binary Converter using HTML, CSS & JavaScript

If you want to create this Decimal-Binary Converter html then follow the tutorial below. Here I used html to create the basic structure, css to design and javascript to activate.

Here you will find step by step tutorial to create this project(How to Create a Decimal To Binary Converter using HTML, CSS). If you just want the source code then you can use the download button below the article.

### Step 1: Basic Structure of Converter

I have created a basic structure on the webpage using the following HTML CSS codes. First a box is created on the web page.

We will add information to this box later. Here I have used blue as the background color of the web page.

```				```
<div class="container">

</div>
```
```
```				```
* {
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}

body {
background-color: #0075ff;
}
```
```

The background color of the box is white, also width: 80vmin and position: absolute, transform: translate(-50%, -50%), top: 50%,left: 50%; I used

```				```
.container {
background-color: #ffffff;
width: 80vmin;
max-width: 37.5em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
box-shadow: 0 1.2em 2.5em rgba(0, 21, 44, 0.18);
}
```
``` Here we need to add a heading like you see in the demo above. I used the h2 tag to add a header to the box first.

```				```
<h2>Decimal Binary Converter</h2>
```
```
```				```
h2 {
font-size: 1.8em;
color: #0075ff;
text-align: center;
font-weight: 600;
letter-spacing: 0.5px;
margin-bottom: 1.3em;
}
```
``` ### Step 3: Create decimal and binary input boxes

Now we need to create two input boxes in this Decimal To Binary Converter. I used display: flex to keep the two boxes side by side.

```				```
<div class="wrapper">
<div class="input-wrapper">
<label for="dec-inp">Decimal:</label>
<input type="number" id="dec-inp" />
</div>

<div class="input-wrapper">
<label for="bin-inp">Binary:</label>
<input type="number" id="bin-inp" />
</div>
</div>
```
```
```				```
.wrapper {
display: flex;
justify-content: space-between;
gap: 1.8em;
}
label {
display: block;
margin-bottom: 0.5em;
font-weight: 500;
color: #050121;
}
```
``` The input box is designed more nicely by using your own codes. A nice border is used around the input box. Also padding: 0.5em is used to define its length and height.

```				```
input {
position: relative;
font-size: 1.1em;
width: 100%;
border: 1.5px solid #43405c;
color: #43405c;
outline: none;
}
input:focus {
border-color: #0075ff;
}
```
``` ### Step 4: Create a place to display the error message

An error message is now displayed. If you input any wrong information in that input box then you will see an error message. We will execute the message later with javascript.

```				```
<p id="error-msg"></p>
```
```
```				```
#error-msg {
text-align: center;
margin-top: 1.25em;
color: #ff4362;
}
```
```

### Step 5: Activate Decimal-Binary Converter via JavaScript

Now time to implement this Decimal To Binary Converter by JavaScript. JavaScript used here is very simple so you can understand very easily.

```				```
//Initial References
let decInp = document.getElementById("dec-inp");
let binInp = document.getElementById("bin-inp");
let errorMsg = document.getElementById("error-msg");

//Convert decimal to binary when user inputs in the decimal field
let decValue = parseInt(decInp.value);
//Converts the decimal value to binary
binInp.value = decValue.toString(2);
});

//Convert binary to decimal when user inputs in the binary field
let binValue = binInp.value;
//If the binary number is valid convert it to decimal
if (binValidator(binValue)) {
decInp.value = parseInt(binValue, 2);
errorMsg.textContent = "";
}
//Else display an error message
else {
errorMsg.textContent = "Please Enter An Valid Binary Input";
}

//Function to check if the binary number is valid i.e it does not contain any number other than 0 and 1
function binValidator(num) {
for (let i = 0; i < num.length; i++) {
if (num[i] != "0" && num[i] != "1") {
return false;
}
}
return true;
}
});
```
``` Hope you got to know how I created this project(Decimal-Binary Converter using HTML, CSS & JavaScript) from this tutorial.

Earlier I have shared many more advanced JavaScript tutorials with you. If you like this design then you can definitely follow the tutorials. Comment how you like this Decimal To Binary Converter html and css tutorial.

This is a simple JavaScript program that can convert Decimal numbers to Binary. Here you will find the necessary source code and tutorial. Also get complete source code.

As I said earlier if you know basic javascript then you will have no difficulty in understanding this project. This decimal to binary converter is made in a very simple way.

For that you can follow this tutorial. However, it is not possible to create a decimal to binary converter with JavaScript alone. Created the basic structure by html. Designed it with css and implemented it with javascript.