# FizzBuzz : Frontend Coding Exercise

**URL:** <https://forum.kirupa.com/t/fizzbuzz-frontend-coding-exercise/653699>\
**Category:** programming\
**Created:** [September 24, 2022, 6:22pm UTC](https://forum.kirupa.com/t/fizzbuzz-frontend-coding-exercise/653699 "2022-09-24T18:22:16Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [September 24, 2022, 6:22pm UTC](https://forum.kirupa.com/t/fizzbuzz-frontend-coding-exercise/653699/1 "2022-09-24T18:22:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [September 24, 2022, 6:30pm UTC](https://forum.kirupa.com/t/fizzbuzz-frontend-coding-exercise/653699/2 "2022-09-24T18:30:31Z")

</div>

One solution here could look like as follows:

```auto
<!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:

[![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/8/8/888e7e1863bf8b14e7726e99a5cc35a19f263312.jpeg "FizzBuzz : Frontend Coding Exercise") ](https://www.youtube.com/watch?v=-Wyn8C4Nz44)

😛

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [September 24, 2022, 6:30pm UTC](https://forum.kirupa.com/t/fizzbuzz-frontend-coding-exercise/653699/3 "2022-09-24T18:30:32Z")

</div>



---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [September 25, 2022, 6:03am UTC](https://forum.kirupa.com/t/fizzbuzz-frontend-coding-exercise/653699/4 "2022-09-25T06:03:08Z")

</div>

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

```auto

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

```

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [September 25, 2022, 7:04am UTC](https://forum.kirupa.com/t/fizzbuzz-frontend-coding-exercise/653699/5 "2022-09-25T07:04:53Z")

</div>

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

```auto
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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [September 25, 2022, 7:52am UTC](https://forum.kirupa.com/t/fizzbuzz-frontend-coding-exercise/653699/6 "2022-09-25T07:52:47Z")

</div>

Let me assign the FizzBuzz badge to you tomorrow 😀

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [September 25, 2022, 12:23pm UTC](https://forum.kirupa.com/t/fizzbuzz-frontend-coding-exercise/653699/7 "2022-09-25T12:23:49Z")

</div>

You can clean this up with [ternary conditionals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator). You can also use empty strings instead of a space which will prevent the need to trim.

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

```

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [September 25, 2022, 12:57pm UTC](https://forum.kirupa.com/t/fizzbuzz-frontend-coding-exercise/653699/8 "2022-09-25T12:57:53Z")

</div>

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 😄… so I probably didn’t comment out enough…

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [September 25, 2022, 8:09pm UTC](https://forum.kirupa.com/t/fizzbuzz-frontend-coding-exercise/653699/9 "2022-09-25T20:09:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TheCanadian](https://avatars.discourse-cdn.com/v4/letter/t/67e7ee/32.png) [@TheCanadian](https://forum.kirupa.com/u/TheCanadian)\
**Post date:** [October 18, 2022, 3:25am UTC](https://forum.kirupa.com/t/fizzbuzz-frontend-coding-exercise/653699/10 "2022-10-18T03:25:10Z")

</div>

Loops in R are like peas out of a pod.

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

```

> **[FizzBuzz (R) - myCompiler](https://www.mycompiler.io/view/9D5QGg4JALC)**

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 18, 2022, 3:36am UTC](https://forum.kirupa.com/t/fizzbuzz-frontend-coding-exercise/653699/11 "2022-10-18T03:36:50Z")

</div>

Loops are looking much nicer in R! 😛

Awarded!

---

<div class="post-metadata">

**Author:** ![a-sauvaget](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/a-sauvaget/32/19220_2.png) [@a-sauvaget](https://forum.kirupa.com/u/a-sauvaget)\
**Post date:** [October 28, 2022, 11:33am UTC](https://forum.kirupa.com/t/fizzbuzz-frontend-coding-exercise/653699/12 "2022-10-28T11:33:50Z")

</div>

An other solution 😄

```nohighlight
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);

```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 28, 2022, 5:54pm UTC](https://forum.kirupa.com/t/fizzbuzz-frontend-coding-exercise/653699/13 "2022-10-28T17:54:30Z")

</div>

Oh! Nice 🙂

(Badge granted!)

---

<div class="post-metadata">

**Author:** ![cynna\_416](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/cynna_416/32/22342_2.png) [@cynna\_416](https://forum.kirupa.com/u/cynna_416)\
**Post date:** [June 14, 2023, 4:39am UTC](https://forum.kirupa.com/t/fizzbuzz-frontend-coding-exercise/653699/14 "2023-06-14T04:39:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![cynna\_416](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/cynna_416/32/22342_2.png) [@cynna\_416](https://forum.kirupa.com/u/cynna_416)\
**Post date:** [June 14, 2023, 4:40am UTC](https://forum.kirupa.com/t/fizzbuzz-frontend-coding-exercise/653699/15 "2023-06-14T04:40:05Z")

</div>

```auto
<!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>

```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [June 15, 2023, 6:20am UTC](https://forum.kirupa.com/t/fizzbuzz-frontend-coding-exercise/653699/16 "2023-06-15T06:20:11Z")

</div>

Badge granted! 🙂

---

<div class="post-metadata">

**Author:** ![carlcortez1](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/carlcortez1/32/23978_2.png) [@carlcortez1](https://forum.kirupa.com/u/carlcortez1)\
**Post date:** [October 27, 2023, 9:28pm UTC](https://forum.kirupa.com/t/fizzbuzz-frontend-coding-exercise/653699/17 "2023-10-27T21:28:15Z")

</div>

```auto
<!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>

```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 27, 2023, 9:29pm UTC](https://forum.kirupa.com/t/fizzbuzz-frontend-coding-exercise/653699/18 "2023-10-27T21:29:02Z")

</div>

Nicely done, @carlcortez1! You earned this Fizzbuzz badge 🙂

---

<div class="post-metadata">

**Author:** ![an2niy85](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/an2niy85/32/26227_2.png) [@an2niy85](https://forum.kirupa.com/u/an2niy85)\
**Post date:** [May 24, 2024, 4:57am UTC](https://forum.kirupa.com/t/fizzbuzz-frontend-coding-exercise/653699/19 "2024-05-24T04:57:37Z")

</div>

> **[GitHub - an2niy85/FizzBuzz](https://github.com/an2niy85/FizzBuzz)**
>
> Contribute to an2niy85/FizzBuzz development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 24, 2024, 5:06am UTC](https://forum.kirupa.com/t/fizzbuzz-frontend-coding-exercise/653699/20 "2024-05-24T05:06:41Z")

</div>

@an2niy85 - nicely done! 🙂

Badge granted!

[Next page](https://forum.kirupa.com/t/fizzbuzz-frontend-coding-exercise/653699.md?page=2)