What is Number System Converter?
A number system converter is a program or software which can change a number's format. We can write a number in different formats like Decimal, Binary, Octal, Hexadecimal. To change those formate we need to follow some mathematical rules. The number system converter can easily change the formate of different numbers. A number system converter can perform the calculation below:
- Decimal to binary/octal/hexadecimal
- Binary to decimal/octal/hexadecimal
- Octal to decimal/binary/hexadecimal
- Hexadecimal to decimal/binary/octal
Main Theory
Using programming language we can perform different mathematical operations. To create any converter we need to understand the main mathematical operation then replicate that operation with the program. Create a flow chart first then design the algorithm and at the end write code according to that algorithm.
Number System Converter Source Code
To make this you need HTML, CSS, and JavaScript files. Here we are going to share all those codes. Just copy them and paste them into your code editor.
HTML Code For Number System Converter
<!DOCTYPE html><html lang="en"><head><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>Document</title></head><body><div class="well"><h4>From</h4> <select name="" id="from" class="form-control"><option value="Decimal">Decimal</option><option value="Binary">Binary</option><option value="Octal">Octal</option><option value="Hexadecimal">Hexa Decimal</option> </select><h4>To</h4> <select name="" id="to" class="form-control"><option value="Decimal">Decimal</option><option value="Binary">Binary</option><option value="Octal">Octal</option><option value="Hexadecimal">Hexa Decimal</option> </select><h4>Enter The Number You Want To Convert</h4> <input type="text" class="form-control" placeholder="Enter Your number" maxlength="15" id="inputnumber"><br><div style="text-align: center;"> <input type="submit" class="button button1" value="convert now" id="inputsubmit"></div><div id="convert" style="font-size: 25px; margin-top: 20px;"></div></div></body></html>CSS Code For Number System Converter
<style>
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05)
}
input[type=text],
select {
width: 80%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
outline: none;
}
.button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: #f44336;
color: white;
border-radius: 20px;
margin-bottom: 25px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.button1:hover {
background-color: #008CBA;
color: white;
}
</style>JavaScript Code For Number System Converter
<script>var from,to,input,submit,cnvtres,i,cnvtresult=null,cnvtToDes=null,inputbreak=null,yresult=null,cnvtAry=null,outputInt=null;(from=document.getElementById("from")),(to=document.getElementById("to")),(input=document.getElementById("inputnumber")),(submit=document.getElementById("inputsubmit")),(cnvtres=document.getElementById("convert")),submit.addEventListener("click",function(){function t(){return input.value.split(".")[0].split("");} function e(t){switch(t){case"A":return 10;case"B":return 11;case"C":return 12;case"D":return 13;case"E":return 14;case"F":return 15;default:return t;}} function n(t){switch(t){case 10:return"A";case 11:return"B";case 12:return"C";case 13:return"D";case 14:return"E";case 15:return"F";default:return t;}} if(""!==input.value){switch(from.value){case"Binary":for(cnvtAry=t(input.value).reverse(),i=0;i<cnvtAry.length;i++)(cnvtToDes+=cnvtAry[i]*Math.pow(2,i)),(cnvtAry[i]>1||/A|B|C|D|E|F/.test(input.value.toUpperCase()))&&(inputbreak=!0);break;case"Octal":for(cnvtAry=t(input.value).reverse(),i=0;i<cnvtAry.length;i++)(cnvtToDes+=cnvtAry[i]*Math.pow(8,i)),(cnvtAry[i]>7||/A|B|C|D|E|F/.test(input.value.toUpperCase()))&&(inputbreak=!0);break;case"Decimal":(cnvtToDes=Math.trunc(input.value)),/A|B|C|D|E|F/.test(input.value.toUpperCase())&&(inputbreak=!0);break;case"Hexadecimal":for(input.value=input.value.toUpperCase(),cnvtAry=t(input.value).reverse(),i=0;i<cnvtAry.length;i++) (cnvtAry[i]=e(cnvtAry[i])),(cnvtToDes+=cnvtAry[i]*Math.pow(16,i)),cnvtAry[i]>15&&(inputbreak=!0);} switch(to.value){case"Binary":if(((outputInt=[]),0!==cnvtToDes)){for(;cnvtToDes>1;)outputInt.push(cnvtToDes%2),(cnvtToDes=Math.trunc(cnvtToDes/2));1==cnvtToDes&&outputInt.push(1),(cnvtresult=outputInt.reverse());}else cnvtresult=input.value;break;case"Octal":for(outputInt=[];cnvtToDes>7;)outputInt.push(cnvtToDes%8),(cnvtToDes=Math.trunc(cnvtToDes/8));cnvtToDes<8&&outputInt.push(cnvtToDes),(cnvtresult=outputInt.reverse());break;case"Decimal":(outputInt=[]).push(cnvtToDes),(cnvtresult=outputInt);break;case"Hexadecimal":for(outputInt=[];cnvtToDes>15;)outputInt.push(n(cnvtToDes%16)),(cnvtToDes=Math.trunc(cnvtToDes/16));cnvtToDes<16&&outputInt.push(n(cnvtToDes%16)),(cnvtresult=outputInt.reverse());}}else cnvtresult=input.value;null!==cnvtresult&&null===inputbreak&&(input.value>0||/A|B|C|D|E|F/.test(input.value.toUpperCase()))?((yresult=from.value+" number "+input.value+" in "+to.value+" is"+" = "),cnvtresult.forEach(function(t){yresult+=t;})):(yresult="Please select and enter right number"),(cnvtres.innerHTML=yresult),(cnvtresult=null),(cnvtToDes=null),(inputbreak=null),(yresult=null),(cnvtAry=null),(outputInt=null);});</script>Using this code you can create a number system converter. This can be a great project for your portfolio. We have other JavaScript projects like this. Follow our blog for more projects like this one.