Design a Number System Converter in JavaScript

JavaScript BaseX Converter: Converting Numbers Between Different Bases

Last Updated : 22 Sep, 2023

In the world of computer science and mathematics, numbers are represented in various base systems such as decimal, binary, hexadecimal, and octal. Converting numbers between these different base systems is a common requirement. For example, you may need to convert a decimal number to binary, a binary number to octal, or even convert between less common bases like base-15. Performing these conversions manually can be time-consuming and prone to errors. To address this need, we present the BaseX Converter, a handy tool that allows you to convert numbers from one base to another effortlessly.

Example:

1. Input: Converting (13)₁₆ to base 10

Let’s take the example of converting the number (13)₁₆ to base 10 (decimal). We can break down the conversion process as follows:

First, we multiply each digit of the number by the corresponding power of 16:

(13)₁₆ = 1 * 16^1 + 3 * 16^0

Next, we calculate the results of the above multiplication:

(13)₁₆ = 16 + 3

Finally, we add up the results to obtain the decimal equivalent:

(13)₁₆ = 19₁₀

Therefore, (13)₁₆ is equal to (19)₁₀ in base-10.

2. Input: Converting (10101)₂ to base-8:

Now, let’s convert the binary number (10101)₂ to base 8 (octal). The conversion process involves grouping the binary digits into sets of three, starting from the rightmost digit, and converting each group to its octal equivalent:

(10101)₂ = 010 101

The grouped binary digits are then converted to octal:

010₂ = 2₈

101₂ = 5₈

Combining the octal digits, we get:

(10101)₂ = (25)₈

Therefore, (10101)₂ is equal to (25)₈ in base-8.

Prerequisites:

Approach:

Set up the HTML structure with input fields for the number, from base, and to base, along with a button and a result display area.
Implement the convert() function:
- Retrieve the input values from the respective fields.
- Convert the input number from the specified “fromBase” to decimal using parseInt().
- Convert the decimal number to the specified “toBase” using toString().
- Update the result display area with the converted result.
Style the webpage using CSS to create a visually appealing layout.
When the user clicks the “Convert” button, the convert() function is executed, performing the conversion and updating the result display area with the converted value.

Example: In this example, we will illustrate the base converter using HTML, CSS and JS.

HTML

<!-- index.html  -->
<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
          BaseX Calculator 
      </title> 
    <style> 
        body { 
            font-family: Arial, sans-serif; 
        } 
  
        h1 { 
            text-align: center; 
        } 
  
        #converter { 
            margin: 20px auto; 
            width: 300px; 
            text-align: center; 
        } 
  
        label { 
            display: block; 
            margin: 5px 5px; 
        } 
  
        input[type="number"] { 
            width: 100%; 
            padding: 5px; 
            box-sizing: border-box; 
        } 
  
        select { 
            width: 100%; 
            padding: 5px; 
            box-sizing: border-box; 
            margin-bottom: 10px; 
        } 
  
        button { 
            padding: 10px 20px; 
            background-color: #4caf50; 
            color: white; 
            border: none; 
            cursor: pointer; 
            margin: 5px 5px; 
        } 
  
        #result { 
            margin-top: 20px; 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>BaseX Calculator</h1> 
    <div id="converter"> 
        <label>Number:</label> 
        <input type="number" id="numberInput" /> 
        <label>From Base:</label> 
        <input type="number" id="fromBaseInput" /> 
        <label>To Base:</label> 
        <input type="number" id="toBaseInput" /> 
        <button onclick="convert()"> 
              Convert 
          </button> 
    </div> 
    <div id="result"></div> 
  
    <script> 
        function convert() { 
            let numberInput =  
                document.getElementById("numberInput").value; 
            let fromBase =  
                parseInt(document.getElementById("fromBaseInput").value); 
            let toBase =  
                parseInt(document.getElementById("toBaseInput").value); 
            let result = ""; 
  
            // Convert the number from the "fromBase" to decimal 
            let decimalNumber =  
                parseInt(numberInput, fromBase); 
  
            // Convert the decimal number to the "toBase" 
            result =  
            decimalNumber.toString(toBase); 
  
            document.getElementById("result").innerHTML =  
              "Result: " + result; 
        } 
    </script> 
</body> 
  
</html>

Output:

Animation

Design a Number System Converter in JavaScript

lunatic1

News

Improve

Article Tags :

Similar Reads

JavaScript BaseX Converter: Converting Numbers Between Different Bases

In the world of computer science and mathematics, numbers are represented in various base systems such as decimal, binary, hexadecimal, and octal. Converting numbers between these different base systems is a common requirement. For example, you may need to convert a decimal number to binary, a binar

Design a Number System Converter in JavaScript

A Number System Converter is one that can be used to convert a number from one type to another type namely Decimals, Binary, Octal, and Hexadecimal. In this article, we will demonstrate the making of a number system calculator using JavaScript. It will have the option to select the number type for i

JavaScript - Convert a Number into JS Array

You have a number, like 12345, and you need to convert it into an array where each element represents a digit of the number. For example, 12345 should become [1, 2, 3, 4, 5]. How can you achieve this in JavaScript? In JavaScript, there are various ways to transform a number into an array of its digi

Javascript Program For Converting Roman Numerals To Decimal Lying Between 1 to 3999

Given a Romal numeral, the task is to find its corresponding decimal value. Example : Input: IXOutput: 9IX is a Roman symbol which represents 9 Input: XLOutput: 40XL is a Roman symbol which represents 40Input: MCMIVOutput: 1904M is a thousand, CM is nine hundred and IV is fourRoman numerals are base

How to convert string of any base to an integer in JavaScript ?

Given a string containing an integer value and along with that user passes a base value. We need to convert that string of any base value to an integer in JavaScript. String Integer "1002" 1002 For performing the above-illustrated task, we would be using a method (or a function) provided by JavaScri

Currency Converter in JavaScript

A currency converter is a tool that calculates the equivalent value of one currency in another, using current exchange rates. Itâ€™s widely used in international trade, travel, and finance to compare prices, make informed transactions, and manage cross-border expenses efficiently and accurately. A Cur

JavaScript | Encode/Decode a string to Base64

To encode or decode strings in JavaScript, we can use the built-in functions provided by the language. These functions help in encoding special characters in a URL or decoding encoded strings back to their original form. 1. btoa() MethodThis method encodes a string in base-64 and uses the "A-Z", "a-

Binary to Hexadecimal Converter using JavaScript

Binary to Hexadecimal Converter tool is a utility that converts binary numbers (base-2) into hexadecimal numbers (base-16). It simplifies the process of converting binary data into a more compact and human-readable format. This tool aids in tasks such as programming, networking, and digital data man

How numbers are stored in JavaScript ?

In this article, we will try to understand how numbers are stored in JavaScript. Like any other programming language, all the data is stored inside the computer in the form of binary numbers 0 and 1. Since computers can only understand and process data in the form of 0's and 1's. In JavaScript, ther

How to convert a string into a integer without using parseInt() function in JavaScript ?

In JavaScript, there is a simple function parseInt() to convert a string to an integer. In order to know more about the function, you can refer to this. In this article, we will learn how to convert the string to an integer without using the parseInt() function. Advantage of parseInt() over this met

翻译：