JavaScript Projects: Decimal to Binary Converter

In this article you will learn to write an application using HTML,CSS and JavaScript to convert a decimal number into a binary equivalent.

The source code of the program is given below. You can use any text editor and still it will work.

Program Code: Decimal To Binary Converter

<!DOCTYPE html>
<html>
<head>
   <title>Decimal To Binary Converter</title>
   <meta charset="utf-8">
   <style>
   #main{
   
       position:absolute;
	   top:10%;
	   left:15%;
       width:60%;
       margin:auto;
	   padding:5%;
	   background:gray;
	   font-family: helvetica, sans-serif;
	   font-size: 1em;
	   text-align:center;
	   
   }
   #decimal,#bin,#bit{
    
	  width:30%;
	  padding:2%;
	  margin:2%;
	  font-size:16px;
	  font-weight:bold;
	  font-family:arial,sans-serif;
	  }
	 #bit{
    
	  width:20%;
	  padding:2%;
	  margin:2%;
	  align:center;
	   font-size:16px;
	  font-family:arial,sans-serif;
	  font-weight:bold;
	  }
   #con ,#reset{
   
       width:20%;
	   padding:2%;
	   margin:2%;
	   background-color:#a4a4a4;
	   }
   </style>
 </head>
 <body>
 <div id="main">
<h2>Decimal To Binary Calculator</h2>

<label for="bit" class="dd">Enter number of Bits:</label><br>
 <input type="text" id="bit"><br>
 <label for="decimal" class="dd">Decimal Number:</label><br>
 <input type="text" id="decimal"><br>
 <label for="bin" class="dd">Binary Number:</label><br>
 <input type="text" id="bin"><br>
 <button onclick="decToBinaryConvert()" id="con">Convert</button>
 <button onclick="decToBinaryReset()" id="reset">Reset</button>
 </div>
 <script>
     function decToBinaryConvert() {
	     
		 var binary = "";
		 var bitvalue = document.getElementById("bit").value;
		 var decimal_number = document.getElementById("decimal").value;
		 
		 for(i=0;i<bitvalue;i++)
		 { 
		 
		    
		     var remainder = decimal_number % 2;
			 
			 if(remainder == 0)
			 { 
			     binary = binary + "0";
				 
		     }
			 else 
			 {
			     binary = binary + "1";
				 
			 }
			
			decimal_number = Math.trunc(decimal_number/2);
			
	    }
		
		var binaryStr1 = binary.split("");
		var binaryStr2 = binaryStr1.reverse();
		var binaryStrFinal = binaryStr2.join("");
	      document.getElementById("bin").value = binaryStrFinal;
	 
	 }
	 function decToBinaryReset() {
	 
	 document.getElementById("decimal").value = "";
	  document.getElementById("bit").value = "";
	   document.getElementById("bin").value = "";
	 }

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

Output to the Browser: Decimal To Binary Converter

JavaScript Project - Decimal To Binary Converter
JavaScript Project – Decimal To Binary Converter

Please support us by disabling your adblocker or whitelist this site from your adblocker. Thanks!

turn of adblocker imag