JavaScript Project: Binary To Decimal Conversion

In this example, you are going to write a program in JavaScript that takes binary input and convert it into a decimal value.

Advertisements
Advertisements

This program uses JavaScript parseInt(string, radix) command where string is a string representation of number and radix is the base number system to process the number.

Program Code: Binary To Decimal Converter

<!DOCTYPE html>
<html>
<head>
   <title>Binary To Decimal Converter</title>
   <meta charset="utf-8">
   <style>
   body{
     background:lightgray;
   }
   #main{
   position:absolute;
   top:10%;
   left:23%;
   width:40%;
   background:teal;
   text-align:center;
   padding:6%;
     
   }
   #bin,#dec{
   width:50%;
   margin:1%;
   height:30px;
   font-size:16px;
   font-weight:bold;
   }
   .btn {
  
  width:23%;
  padding:15px;
  margin:10px;
  background:#30160e;
  border:1px solid #30160e;
  color:whitesmoke;
  }
  .lbl {
  
  font-size:16px;
  font-weight:bold;
  font-family:ariel,sans-serif;
  padding:15px;
  }
   </style>
</head>
<body>
<div id="main">
<h1>Binary To Decimal Converter</h1>
<label class="lbl" for="bin">Enter Binary Number</label><br>
<input type="text" id="bin"><br>
<label class="lbl" for="dec">Decimal Output</label><br>
<input type="text" id="dec"><br>
<button onclick="binToDec()" class="btn">Convert</button>
<button onclick="binToDecReset()" class="btn">Reset</button>
</main>
<script>

function binToDec(){

var str = document.getElementById("bin").value;
var output = parseInt(str,2);
return document.getElementById("dec").value = output;
}

function binToDecReset() {

    document.getElementById("bin").value = "";
	document.getElementById("dec").value = "";
}

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

Output: Binary To Decimal Converter

Output – Binary To Decimal Converter
Advertisements

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Exit mobile version