Binary to decimal converter script

Let first take a look at how you make a binary to decimal converter script:

function convertBinary(){
   var binaryNumber = document.getElementById('binary').value;
   binaryNumber = parseInt(binaryNumber,2);
   var decimalNumber = binaryNumber.toString(10);
   alert(decimalNumber)
 }

First you need to get the input form the user. I assume you have made a input text filed with the ID=”binary” in your HTML.

Then you have to parse that input to an integer. This operation is very basic JavaScript but be aware the second parameter (radix) in the parseInt function. The radix is optional. A number (from 2 to 36) that represents the numeral system to be used. Using 2 as the radix tells JavaScript to parse it into the binary numeral system.

Finally we use JavaScript toString function to convert the number into a string. The parameter 10(again called radix in this function) tells Javascript, that we want to use the decimal numeral system in this conversion.

Now we just need to alert the converted number, and we are done. Very simple and very easy.

Decimal to binary converter script

And here’s how to make a decimal to binary converter script. This conversion is just as simple.

 function convertDecimal(){
   var decimalNumber = document.getElementById('decimal').value;
   decimalNumber = parseInt(decimalNumber);
   var binaryNumber = decimalNumber.toString(2);
   alert(binaryNumber)
 }

This decimal to binary converter script is basically the same as in the above. The only change is that we don’t need the second radix parameter to the parseInt function. JavaScript assume per default that we want to parse to integer using the decimal number system.

How to make a Hexadecimal converter

Just as simple as the 2 above examples. You just need to use the right radix in the 2 JavaScript functions as already explained. the radix in the Hexadecimal numeral system is 16.

Finalization of the converter scripts

Now you just need to put the JavaScript and HTML together. This can be done in a lot of ways. I have made an example of a Binary to Decimal converter. Just right click and choose “view source” to view the code. You are of course welcome to copy the Binary to Decimal converter code and use as a base for your own experiments.

Binary – Decimal resources

Binary numeral system, Decimal numeral system and Hexadecimal numeral system. Great descriptions description of the Binary, Decimal and Hexadecimal numeral system at Wikipedia. Lots of facts about history,  representation, counting and calculating using the numeral systems.

parseInt at W3 schools. W3 schools is a great place to learn basic JavaScript.

Binary to Decimal converter. An example script that makes both Binary to Decimal and Decimal to Binary conversions.

If you came here looking for some cool random names visit the online name generators.

The name generator script

Open IDLE which is the Python supplied IDE or editor (Go to the bottom of the post to see, how you get started with Python).

Open a new window from the file menu and write the following name generator script into this window.

def name_generator():
  import random
  color = ["Red","Blue","Black","White"]
  tool = ["Hammer","Drill","Cutter","Knife"]
  randomNumber1 = random.randrange(0,len(color))
  randomNumber2 = random.randrange(0,len(tool))
  name = color[randomNumber1] + " " + tool[randomNumber2]
  print(name)

name_generator()

(Be aware that copy-paste from the blog may give syntax errors!
 A correct indent is an important element Python syntax!)

Save it as name-generator.py.  Now you can run the python program by pressing F5.

Name generator walk through

Lets walk through the python script, line by line.

1. In the first line we define our name generator function.
2. Then we import the random module, so we can call the random function later on.
3. In line define 2 arrays (color and tool) and asign values to them
4. Then we make 2 random numbers based on the length of our arrays. The randrage() function returns an integer in the range defined by the parameters. As parameters we use 0 and the len() function to count the numbers of words in the arrays.
5. In line 7 and 8 we make the final name and print it on the screen.
6. Finally we call the name generator function, we have just written.

That’s all it takes to make a simple Python random name generator. When you this basic functionality it’s easy to experiment and develop the random name generator to suit your needs and wishes.

Name generator inspiration

For inspiration visit the name generators where you can find a lot of name generators in several genres. From random names over fantasy and nicknames to band and business names.

Python Beginner guides and tutorials

Python is a free scripting language running on all platforms from Linux to Windows. Python is a relative easy programming language and a name generator is a simple application so it’s a good place to start if you wanna learn some programming.

If you haven’t Python installed at your computer you can download it at Python.org. This name generator script is based on python 3.12, which is the newest stable version at the moment.

At python.org you can find an excellent Python tutorial. And you can find much more about how to use the Random function in Python.

Or visit this beginner guide to Python which contains lots of links and resources.

The name generator tutorial is very simple and are aimed at absolute beginners in web programming.

But enough talk, here is some name generator code that makes superhero names:

function generator(){
  // Add your own words to the wordlist. Be carefull to obey the showed syntax
  var adjectives = ["Cool","Masked","Bloody","Lame"]
  var animals = ["Hamster","Moose","Lama","Duck"]

  // Random numbers are made
  var randomNumber1 = parseInt(Math.random() * adjectives.length);
  var randomNumber2 = parseInt(Math.random() * animals.length);
  var name = adjectives[randomNumber1] + " " + animals[randomNumber2];

  alert(name); //Delete this when the below works            

  //If there's already a name it is removed  
  if(document.getElementById("result")){
    document.getElementById("placeholder").removeChild(document.getElementById("result"));
  }
  // A div element is created to show the generated name.
  //The Name is added as a textnode. Textnode is added to the placeholder.
  var element = document.createElement("div");
  element.setAttribute("id", "result");
  element.appendChild(document.createTextNode(name));
  document.getElementById("placeholder").appendChild(element);
}

The script is a simplified version of the one I use to make superhero names with my superhero generator.

The name generator piece by piece

The arrays

The most important part of  the name generator is the word lists. The more words in the list the more variety in the output. So the first part to do is to create a couple of arrays holding all our cool words:

var adjectives = ["cool","masked","bloody","lame"];
var animals = ["hamster","moose","lama","duck"]

To retrieve data  from the list we call the name of array with the count of the word as a parameter in a square bracket.  Be aware that counting in programming almost always starts at zero and not at 1.

So adjectives[0] is cool and  animals[1] gives moose

Randomness

We of course want random names, so we need to replace the hard coded numbers with random numbers. In our case numbers between 0 and 3 because we have 4 words in our lists. Instead of counting the words ourself, we do that we let the JavaScript length function do the counting. Then we multiply it with a random floating-point number between 0 and 0.9999999999999. Finally we use the parseInt funktion to make the floating-point number into a integer.

All sounds a bit complicated but code wise  it’s  quite easy.

randomNumber1 = parseInt(Math.random() * adjectives.length);
randomNumber2 = parseInt(Math.random() * animals.length);

The output

The most simple way to output the name is using the alert function. I use it only to check the generated name cause,  the alert box is  very annoying. So just delete the line, when the code below is up an running.

We will use 7 extra lines to integrate the result into the web page in a more natural way.

But before we begin you need to make an empty div tag in your HTML:

<div id=”placeholder”></div>

And here are the 7 lines that write the result in the page..

if(document.getElementById("result")){
  document.getElementById("placeholder").removeChild(document.getElementById("result"));
}

element = document.createElement("div");
element.setAttribute("id", "result");
element.appendChild(document.createTextNode(name));
document.getElementById("placeholder").appendChild(element);

In short it works like this:

1. If there’s already a result it is removed
2. Then a new div element to hold the result  is created
3. The name is added as a text node
4. Finally the element is appended to a placeholder in the HTML.

When this part works, you can delete the alert(name) from the script.

Putting it all together

The generator function can either be included in the head of the HTML document or you can place it in a external JavaScript file.

Now you can call the function from your HTML page.  I always do it 2 places. First in the body tag with an onload event. The generator function then also runs when the page is loaded.

<body onload=”generator()”>

And then I also call the JavaScript function on a button:

<input type=”button” onclick=”generator()” />

Download the name generator script

Download name generator script here and read the description of how to make the name generator script work.

Extra funcionality

The random functions in this guide is very simple. At some time you’ll probably want to make more complex and interesting names. Here you can see how to make more complex random names.

On all of my name generators I also have a save list, which saves all the generated names to a list. Read here how to add a save list to the name generator.

Want a review of your name generator?

Write a comment if  you make a cool name generator with this script. I might very well  write a review of it. 

Also remember to visit my name generators to see  how I make superhero names with the superhero generator.