Hello everyone. Welcome to today’s tutorial. In today’s tutorial, we will create a decimal-binary converter. To build this project, we use HTML, CSS and Javascript.
In this project, we have to number input fields. The first field is for the user to enter the decimal value, and the second is for binary input. When the user enters a value in the decimal field the converted binary value is displayed in the binary field. Similarly, when the user inputs in the binary field the corresponding converted value is output in the decimal field.
Video Tutorial:
If you like learning by coding along with a video tutorial, check out this tutorial from my youtube channel. Similar to this tutorial, I post new tips, tricks and tutorials on my youtube channel regularly. Subscribe to my youtube channel so you don’t miss any of these tutorials.
Project Folder Structure:
Before we start to code let us create the project folder structure. We create a folder called – Decimal Binary Converter. Inside this folder, we have three files- index.html, style.css and script.js.
HTML:
We begin with HTML code. First, copy the code provided to you below and paste it into your HTML document.
The HTML code mainly consists of two number input fields. Each of these fields has a unique id assigned to it. We also have a ‘p’ tag to display the error message.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Decimal-Binary Converter</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h2>Decimal Binary Converter</h2>
<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>
<p id="error-msg"></p>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we use CSS to style this decimal binary converter. To do this copy the code below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #0075ff;
}
.container {
background-color: #ffffff;
width: 80vmin;
max-width: 37.5em;
padding: 3em 2.5em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 0.62em;
box-shadow: 0 1.2em 2.5em rgba(0, 21, 44, 0.18);
}
h2 {
font-size: 1.8em;
color: #0075ff;
text-align: center;
font-weight: 600;
letter-spacing: 0.5px;
margin-bottom: 1.3em;
}
.wrapper {
display: flex;
justify-content: space-between;
gap: 1.8em;
}
label {
display: block;
margin-bottom: 0.5em;
font-weight: 500;
color: #050121;
}
input {
position: relative;
font-size: 1.1em;
width: 100%;
padding: 0.5em;
border-radius: 0.2em;
border: 1.5px solid #43405c;
color: #43405c;
outline: none;
}
input:focus {
border-color: #0075ff;
}
#error-msg {
text-align: center;
margin-top: 1.25em;
color: #ff4362;
}
Javascript:
Lastly, we implement functionality using Javascript. Copy the code below and paste it into your script file.
We add the ‘input’ event listeners to both the input fields. To convert the decimal number to binary we use the ‘toString(2)’ method.
Next, we create a binValidator function that checks whether the entered binary number is valid. If the number is valid it is converted into decimal. Else an error message is displayed.
//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
decInp.addEventListener("input", () => {
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
binInp.addEventListener("input", () => {
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;
}
});
That’s it for this tutorial. If you have any issues while creating this code, you can download the source code by clicking on the download button below. Also, if you have any queries, suggestions, or feedback you can comment below.
Happy Coding!
waiting for the octal and hexadecimal converter 🙌
Does not work with:
234.56
1309.1
345.66
work with:
234
1309
345
fix it please