FizzBuzz : Frontend Coding Exercise

programming
1
This is a companion discussion topic for the original entry at https://www.kirupa.com/codingexercises/fizzbuzz.htm
2

One solution here could look like as follows:

<!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>
    for (let i = 1; i <= 100; i++) {
      if ((i % 3 == 0) && (i % 5 == 0)) {
        console.log("FizzBuzz")
      } else if (i % 3 == 0) {
        console.log("Fizz");
      } else if (i % 5 == 0) {
        console.log("Buzz");
      } else {
        console.log(i);
      }
    }
  </script>
</body>
</html>

There is a video of me struggling through this as well:

:stuck_out_tongue:

2 Likes
4

I tried to do it with a one liner a while ago… :slightly_smiling_face:
I couldn’t get it to only log F, B and FB without the empty string check…


let arr = [...Array(100).keys()]
for(let i of arr){
    let val = i && ((i % 3 && " " || 'Fizz') + (i % 5 && " " || "Buzz")).trim()
    val && console.log(val)
  }
5

I cant pass up a challenge… :smile:
Here’s a one liner:

let arr = [...Array(100).keys()]
for(let i of arr){
console.log((i && ((i % 3 && " " || 'Fizz') + (i % 5 && " " || "Buzz")).trim()) || i)
  }

For anybody trying to follow the logic:

  • i && --short circuit 0 because it will match fizz buzz and fizzbuzz

  • (i % 3 && " " || 'Fizz') – if you match 3 it will = 0 and be falsey which will skip && and move to || which is the string ‘Fizz’

  • + --add the first string to the second

  • (i % 5 && " " || 'Buzz') – same as above but with Buzz

  • .trim() – remove the empty strings

  • || i – if the value of the string is an empty string log the i / number

1 Like
6

Let me assign the FizzBuzz badge to you tomorrow :grinning:

7

You can clean this up with ternary conditionals. You can also use empty strings instead of a space which will prevent the need to trim.

for (let i = 1; i <= 100; i++)
    console.log(
        (i % 3 ? "" : "Fizz") +
            (i % 5 ? "" : "Buzz") || i
    );
2 Likes
8

That weird… I did try it but it didn’t work so I assumed that ? didn’t match falsey 0…

It’s probably because originally I was attempting to do it branchless with bitwise operators :smile:… so I probably didn’t comment out enough…

I also tried to use empty strings but that didn’t want to play with || :smile:

1 Like
9

@senocular , @steve.mills - you both got the FizzBuzz badge! :honeybee:

1 Like
10

Loops in R are like peas out of a pod.

nums = nums2 <- 1:100
nums[!(nums2 %% 3)] = "Fizz"
nums[!(nums2 %% 5)] = "Buzz"
nums[!(nums2 %% 15)] = "FizzBuzz"
cat(nums, sep = "\n")
11

Loops are looking much nicer in R! :stuck_out_tongue:

Awarded!

1 Like
12

An other solution :smile:

function printFizzBuzz(startNumber) {
  for (testedNumber = startNumber; testedNumber <= 100; testedNumber++) {
    if (testedNumber % 3 === 0 && testedNumber % 5 === 0) {
      console.log("FizzBuzz");
    } else if (testedNumber % 3 === 0) {
      console.log("Fizz");
    } else if (testedNumber % 5 === 0) {
      console.log("Buzz");
    } else {
      console.log(testedNumber);
    }
  }
}

printFizzBuzz(1);
2 Likes
13

Oh! Nice :slight_smile:

(Badge granted!)

14
Fizz Buzz

Fizz Buzz


Instructions:

We are going to console log the numbers 1-100. Every number that is a multiple of 3 will be "Fizz" instead of the number. Every number that is a multiple of 5 will be "Buzz" instead of the number. And every number that is a multiple of 3 and 5 will be "FizzBuzz" instead of the number.

15 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fizz Buzz</title>
</head>
<body>
    <h1>Fizz Buzz</h1>
    <br>
    <h2>Instructions:</h2>
    <p>We are going to console log the numbers 1-100.  Every number that is a multiple of 3 will be "Fizz" instead of the number. Every number that is a multiple of 5 will be "Buzz" instead of the number.  And every number that is a multiple of 3 and 5 will be "FizzBuzz" instead of the number.</p>
    <script>
        function fizzBuzz() {
    for (let i = 1; i <= 100; i++) {
        if (i % 15 == 0) {
            console.log("FizzBuzz");
        }
        else if (i % 3 == 0) {
            console.log("Fizz");
        }
        else if (i % 5 == 0) {
            console.log("Buzz");
        }
        else {
            console.log(i);
        }
    }
}
console.log(fizzBuzz());
    </script>
</body>
</html>
16

Badge granted! :slight_smile:

17 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title> FizzBuzz </title>
    
    
</head>

<body>
    <script>

function Fuzzbuzz(){

for(let i=1; i<101;i++)
{

if((i % 3)==0 && (i % 5)==0){
     document.writeln("FizzBuzz \n ");
     
}else if((i % 3)==0 ){
     document.writeln("Fizz \n ");
     
}else if((i % 5)==0){
     document.writeln("Buzz \n ");
}
else{document.writeln(i);}
     

}
}

Fuzzbuzz();



    </script>
    
</body>
</html>
1 Like
18

Nicely done, @carlcortez1! You earned this Fizzbuzz badge :slight_smile: