Binary-Decimal Converter

October 17th, 2014

Binary/Decimal Converter

Converts from binary to decimal (and vice versa).

1) Enter a positive integer in the field below.

2) Select the base for the number entered.

3) Select the base to convert to.

4) Click “Convert” when ready.

In this blog post, I’ll show you how to build your own binary-decimal converter machine exactly like the one above. It’s a fairly simple program I wrote in JavaScript and HTML. The HTML code creates the “dashboard” you see on the web page. The JavaScript is the magic behind the machine. Feel free to use it on your own website and tweak it to your satisfaction.

In the near future, I shall upgrade this calculator so that it converts between more than two bases. Specifically, the new base converter will convert between any base from two to sixteen. Using the logic from the binary-decimal converter, you can convert from virtually any base to any base. It’s quite magical once you see the pattern! (To see a visual example of how to convert from binary to decimal, please see the video tutorial and blogpost here. This may come in handy if you’re new to binary numbers).

“The Dashboard” (User Interface)

The code below will generate the nice green-colored dashboard you see above. Copy and paste the code below into the body of your HTML file. Check to make sure it looks like the “applet” above by viewing the page through a web browser.

“The Push Lever” (Event Handler)

Without the JavaScript, the dashboard would have no functionality. If you clicked on the “Convert” button, nothing would happen. With all the JavaScript in place, the button click will set the machine into motion. To get started, we need a JavaScript function that handles the button click event.

In your HTML file, between “script” tags, copy and paste the JavaScript functions. If you want to encapsulate your JavaScript away from the HTML, put the functions in a separate file. Name this file something like “functions.js.” Then place the JS file in the same directory as your HTML page. To include the JS file in your HTML file, add the following line of code to the HTML:

Here’s the “trigger” function that responds to button clicks:

“The Engine” (Functionality)

The event-handler function above acts like a “main” function in C/C++. We will use the buttonClick function to call the other “helper” functions. Some of these functions validate the user input, checking it for errors. We can think of those as our “scrubbers.” The converter functions represent the heart and soul of this machine. We can think of those as the “motor.”

“The Scrubbers”

The removeSpaces function eliminates any spaces from the textfield input, either typed accidentally or on purpose to bug me.

The validateInput function determines whether the input number and input base match. If they don’t match, the machine will display an error message. If the inputs do match, the machine will proceed with the appropriate calculation.

“The Motor”

Below are the two most important functions in this application. These demonstrate the essential logic we need to convert between bases.

Here’s the function for converting from binary to decimal.

Here’s the function for converting from decimal to binary.


Categories: mathtechnologytutorials