FizzBuzz : Frontend Coding Exercise

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

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:

1 Like

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)
  }

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

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

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

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

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

1 Like

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")

Loops are looking much nicer in R! :stuck_out_tongue:

Awarded!

1 Like

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

Oh! Nice :slight_smile:

(Badge granted!)