The KIRUPA orange logo! A stylized orange made to look like a glass of orange juice! Tutorials Coding Exercises Videos Books

FORUMS

Customize Theme


Color

Background


Done

FizzBuzz

by kirupa   |   filed under Coding Exercises

Some coding exercises are so popular and legendary, they are the primary topic of watercoolers, sports bars, and family dinners. One such exercise is FizzBuzz. The rules of FizzBuzz are as follows:

  1. We want to print each number from 1 to 100
  2. For any number that is a multiple of 3, we print the word Fizz instead of the number
  3. For any number that is a multiple of 5, we print the word Buzz instead
  4. For any number that is a multiple of both 3 and 5, we print the word FizzBuzz

An example of output here could be:

1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz
16
...

The exercise is to turn these rules into some sweet SWEET JavaScript code that prints the proper output to the Console for numbers starting at 1 and going all the way to 100.

Onwards!

Starting Point

The easiest way is to fork the following Codepen pen and start adding your modifications:

See the Pen FizzBuzz by Kirupa Chinnathambi (@kirupa) on CodePen.

You may want to open the pen in a new window if you want more space to code your solution or bring up the Console to see the output.

If you prefer developing locally in your favorite code editor (like Visual Studio Code), create a new HTML document and copy/paste the following boilerplate/starting content into it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FizzBuzz</title>
</head>
<body>
  <script>
    
  </script>
</body>
</html>

The HTML you see here is just the bare minimum content needed to help us get our web page up and running. The rest of the content is what you will add entirely on your own!

Hint: Some Learning Resources

The following tutorials may provide some helpful tips and techniques to help you with this exercise: Console Logging Basics, If/Else Statements,Looping in JavaScript, Numbers

Getting Your Badge

Once you have completed this challenge, you have earned the awesome bragworthy privilege of adding the following badge to your collection:

To claim it, head over to the forums and respond in the FizzBuzz topic. Be sure to include a link to your solution or insert a copy of your HTML/CSS/JS in the body of the message:

Once you have created your topic, Kirupa will give you a virtual high-five and ensure this badge is added to your list of assigned badges.

Stuck? Need Help? Want a Code Review?

We want to make this a fun learning activity. If you are stuck and need help, please ask on the forums. Please explain your problem in detail and one of the many helpful forum members will help you out.

If you want to see one way of solving this, check out Kirupa's video below:

There are many solutions possible, so don't worry if your working solution looks different. If it is different, do share it on the forums and the community as a whole will benefit from your creative solution!

The KIRUPA Newsletter

Thought provoking content that lives at the intersection of design 🎨, development 🤖, and business 💰 - delivered weekly to over 100,000 subscribers!

SUBSCRIBE NOW

Serving you freshly baked content since 1998!
Killer hosting by (mt) mediatemple

Twitter Youtube Facebook Pinterest Instagram Github