Number base conversion | javascript projects for beginners

What is number base conversion?

There are different types of numbers base on our mathematics system. Decimal, Binary, Hexadecimal are the most common of them. In the decimal system to represent ten we write 10, but in the binary system to represent ten we need to write 1010, and finally to represent ten in the hexadecimal system we need to write A.
Now in this post, we will learn how can we convert number base.

1. Decimal to Binary in javascript
2. Binary to Decimal in JavaScript
3. Decimal to Hexadecimal in javascript
4. Hexadecimal to Decimal in JavaScript
5. Binary to Hexadecimal in javascript
6. Hexadecimal to binary in javascript

UI design of javascript number base conversion

In every javascript project UI design is one of the most important parts. Your main should execute in the UI design.
From the cover image, you already know about our UI, but in this section, I will describe in detail so that you can understand why which element I take.

To take user input we need an input element and we will take input type text so that we can take the hexadecimal numbers as input. Because a hexadecimal number has digits and characters both.
We will use the HTML select element for option selection. Inside the select tag, we will define all(six) options so that the user can select from which base to which base he/she wants to convert.
To start calculating we will take a button. So that user can start calculating by clicking the button.
Also to reset everything we will take a button. So that by clicking the reset button user can calculate again without refresh the full page.
Finally, we will take a paragraph element to show our number conversion result.

Javascript number base conversion project validation

Validation is one of the most important parts of every javascript project. For number base conversion is also important.

Validation scenario of number base conversion project.

• ✅ You need to make sure the user gives an input number and selects one option. If the user does not input any number and does not select any option you can disable calculate button so that the user can not start converting the number.
  So If the user gives an input number and selects an option enable the calculating button else to disable the button

• ✅ Before start converting you need to be sure that users’ input is valid. Suppose the user selects decimal to binary form select option but gives a hexadecimal number as an input, in this case, you should give a message to the user that it is not a decimal number. Similarly, for all based numbers, you need to validate that the user gives the valid number.

How to reset everything by clicking the reset button

You already know we take a rest button so that users can recalculate the number base without repressing the full page. So the technique is after clicking the reset buttons we will do

1. Set the empty value to the input element.
2. Set empty option in the select tag.
3. Set the empty value to the answer tag.
4. Disable the converting button.
5. Finally, disable the reset button also.

Note: We will enable the reset button if the user gives any input (number or option)

How can we start converting numbers from one base to another?

To converting the number base we will use the javascript function. That means for every type of conversion we will create a function. The function will take the user input number and return the selected based number.
So after clicking the convert button we need to check the selected option and call the corresponding function
For example: if the user selects decimal to binary then we need to call decimal to binary converting function.

How can we show the result in the result tag?

Using javascript you can easily set text to any HTML element. So after calling the corresponding function we will receive the result from the function and then set it to the result tag.
Note: we will also show the validation error message in our result showing tag.

Decimal to Binary conversion in javascript

Before start creating decimal to binary function you should know that.

• ✅ We need to validate the number. Is the given number is in decimal format or not.
• ✅ The base of the binary number is 2 so we need to divide the decimal number by 2
• ✅ After converting decimal to binary we need to write right to left / bottom to top
• ✅ We need to covert until the given input becomes zero.

function convertDecimalToBinary(inputNumber){
    var answer = "";
    if(!isNaN(inputNumber)){
        inputNumber = Number(inputNumber);
        var remainder = 0;
        while(inputNumber != 0){
            remainder = inputNumber % 2;
            inputNumber = ((inputNumber - remainder) / 2);
            answer = remainder + answer;
        }
    }else{
        answer = '<span style="color: red;">This is not decimal number!</span>';
    }
    return answer;
}    

Note: The isNaN(is not a number) function returns true if the input is text and returns false if the input is a number.

Binary to decimal conversion in javascript

Before start creating binary to decimal converting function you should know that.

• ✅ We need to validate the number. Is the given number is in binary format or not.
• ✅ The base of the binary number is 2 so we need to power the binary number by 2
• ✅ The base of the decimal number is 10
• ✅ We need to calculate the decimal value for every binary digit.
• ✅ In binary format, we show results in right to left or bottom to top format.

function convertBinaryToDecimal(inputNumber){
    inputNumber = inputNumber.toString();
    var numberLen = inputNumber.length;
    var position = numberLen;
    var answer = 0;
    for(var i = 0; i < numberLen; i++){
        if(inputNumber[i] == '0' || inputNumber[i] == '1'){
            position--;
            answer = answer + (Number(inputNumber[i]) *  Math.pow(2, position));
        }else{
            answer = '<span style="color: red;">This is not binary number!</span>';
        }
    }
    return answer;
}    

Note: Here we convert the input number to the string format so that we can easily oop-through to all the digits.

Decimal to Hexadecimal conversion in javascript

Before start creating decimal to hexadecimal converting function you should know that.

• ✅ We need to validate the number. Is the given number is in Decimal format or not.
• ✅ The base of the Hexadecimal number is 16.
• ✅ The base of the decimal number is 10.
• ✅ We need to calculate Until the input number became zero.
• ✅ In Decimal format, we show results in right to left or bottom to top format.
• ✅ In Hexadecimal format for 10, 11, 12, 13, 15 and 16 we use A, B, C, D, E and F.

function convertDecimalToHexadecimal(inputNumber){
    inputNumber = Number(inputNumber);
    var remainder = 0;
    var answer = "";
    if(!isNaN(inputNumber)){
        inputNumber = Number(inputNumber);
        while(inputNumber != 0){
            remainder = inputNumber % 16;
            inputNumber = ((inputNumber - remainder) / 16);
            if(remainder == 10){
                answer = 'A' + answer;
            }else if(remainder == 11){
                answer = 'B' + answer;
            }else if(remainder == 12){
                answer = 'C' + answer;
            }else if(remainder == 13){
                answer = 'D' + answer;
            }else if(remainder == 14){
                answer = 'E' + answer;
            }else if(remainder == 15){
                answer = 'F' + answer;
            }else{
                answer =  remainder + answer;
            }
        }
    }else{
        answer = '<span style="color: red;">This is not decimal number!</span>';
    }
    return answer;
}      

Hexadecimal to Decimal conversion in javascript

function convertHexadecimalToDecimal(inputNumber){
    inputNumber = inputNumber.toString();
    var numberLen = inputNumber.length;
    var position = numberLen;
    var answer = 0;
    for(var i = 0; i < numberLen; i++){
        var num = inputNumber[i];
        if(num == 'A'){
            num = 10;
        }else if(num == 'B'){
            num = 11;
        }else if(num == 'C'){
            num = 12;
        }else if(num == 'D'){
            num = 13;
        }else if(num == 'E'){
            num = 14;
        }else if(num == 'F'){
            num = 15;
        }else if(num >= '0' && num <= '9'){
            num = Number(num);
        }else{
            answer = '<span style="color: red;">This is not Hexadecimal number!</span>';
            return answer;
        }
        position--; 
        answer = answer + (num* Math.pow(16,position));
    }
    return answer;
}    

Binary to Hexadecimal conversion in javascript

To convert a number from binary to hexadecimal format we do not need any direct function because we already have a function to create Hexadecimal Number.
So we can do like this

• ✅ Binary to Decimal first
• ✅ Then Decimal to Hexadecimal

var decimalVal = convertBinaryToDecimal(inputNumber);
answer = convertDecimalToHexadecimal(decimalVal);    

Hexadecimal to Binary Conversion in javascript

To convert a number from Hexadecimal to Binary format we do not need any direct function because we already have a function to create a Binary Number.
So we can do like this

• ✅ Hexadecimal to Decimal first
• ✅ Then Decimal to Binary

var decimalVal = convertHexadecimalToDecimal(inputNumber);
answer = convertDecimalToBinary(decimalVal);