Creating Fizz Buzz in Javascript!

So many people who interview for a programming job are required to write a simple Fizz Buzz program in the language that they are going to be working in. The problem itself is not terribly difficult but many people fail. Why? I personally believe that too many people over think these trivial problems. We get so wrapped up in our daily routines and skill sets that we forget how to do even the most trivial of problems. Well today I am going to walk you through how to create a Fizz Buzz program in JavaScript. Not only will it allow you to find the right answers from 1-100 but it will also prompt the user for an ending number. I.E. 1 to 1000. This program will effectively solve for any number you throw at it. Lets begin:

To start lets look at the rules that define Fizz Buzz and what we need to do.

Count from 1 to 100 replacing any number divisible by 3 with the word "Fizz" and any number divisible by 5 with "Buzz". Now if the number is both divisible by 3 and 5 then we need to display "FizzBuzz". If the number is not divisible by 3 or 5 we need to just output that number.

Does that sound complicated? Does your mind immediately start looking for some super complicated answer to code out to solve such a seemingly difficult problem?
Well you shouldn't be. Lets look at this simply and break it apart.

"Count from 1 to 100 replacing any number divisible by 3 with "Fizz" and any number Divisible by 5 with "Buzz""

So the first thing we need to look at is how do we count from 1 to 100? Well in JavaScript this is solved using a loop. We use loops all the time in our day to day programming and scripting so this shouldn't be hard.

Lets use a for loop for this case.



Ok so lets explain what I did. I first declared the variable i. This allows me to now set a value to it in my for loop allowing me to count from 1 to 100. "i<=100" this statement tells me code "if i is less than or equal to 100 then run the code below". The i++ is adding i to itself each time the code is looped through until i reaches 100. This will effectively count to 100 for us.

Now we need to actually output the code to the console. We are going to be using firebug to debug the code. So to print to the console we will be using console.log()



This will effectively list 1-100 on the console screen. Now lets look at the next part to this problem.

We need to change the integers that are divisible by 3 to say Fizz. To do this we simply create an if statement. Also how do we know if a number is divisible by 3? Well do you remember in math having remainders when dividing? If the remainder was 0 that means that that specific number divided evenly. Luckily JavaScript has a modulus operand that allows us to test this against any integer.



So for this bit of code we say "If the remainder of the integer we just divided by 3 equals 0 then output Fizz" We used the modulus operand % to test the remainder of dividing 3 to what ever integer i is as the time. Since i loops from 1 to 100 it will check every integers remainder after being divided by 3 in that range.

Now we need to do the same thing for any integer that is divisible by 5. But this time we need to output "Buzz" instead of "Fizz". Lets create an else if to add to our if statement above.



As you can see its pretty easy so far. No need for all that complex thinking in your head. But wait! We forgot that we need to also output "FizzBuzz" if the integer is both divisible by 3 and 5! Oh no!

Don't freak out. We simply just have to move some things around to account for this. So far this is the code we have is:



So what we need to do now is modify our if statement slightly.



So now that we added this to the main if statement we need to create another else if statement to add the statement i%3 === 0 back into our program.

Lastly we need to output to the console any number that is not divisible by 3 or 5. To do this simply add an else statement at the bottom of the program:

That's pretty much it. The final code will be below for you to use and test out in Firebug. I hope you enjoyed this tutorial. Remember, don't get caught up in some difficult solution. First pick it apart and think simply. Sometimes the simpler you think the easier thinks become! Also as a extra goodie I added in the little bit of code that will allow it to prompt you for a number first before running the script. Its all the same idea as above.

Written by: PBS Web Design

JM Canine Services Revamped!

We are currently working on revamping JM Canine Services! We are adding many great features to the website that will ensure that your visit is more enjoyable and easier to navigate. We hope that you will enjoy the new site and if you have any comments or suggestions don't hesitate to message us on our contact page!

New Website

The new website is now live The Debt Lawyer