Jump to content

Featured Replies

Posted


Oh yeah, it can be done. A long time ago (2018ish), I challenged myself to create a FizzBuzz in every language I know. Honestly, this was easier than I expected.

Take a look at it on my CodePen:
https://codepen.io/jessicabrown1028/pen/ZMagPo

Here is the code:
CSS:

body {
  counter-reset: fizzbuzz;
  background-color: #1D1E22;
  width: 300px;
  margin: auto;
}

div {
  width: 75px;
  height: 25px;
  border-radius: 5px;
  border: 1px solid #ddd;
  margin: 10px 10px 0px 0px;
  padding: 5px;
  text-align: center;
  float: left;
	display: flex;
	flex-flow: row wrap;
}

div:after {
  color: bisque;
  content: counter(fizzbuzz);
  counter-increment: fizzbuzz;
  flex: 1;
}

div:nth-child(3n):not(:nth-child(5n)):after {
  content: "Fizz";
  color: darksalmon;
}

div:nth-child(5n):not(:nth-child(3n)):after {
  content: "Buzz";
  color: aquamarine;
}

div:nth-child(3n):nth-child(5n):after {
  content: "FizzBuzz";
  color: darkseagreen;
}


HTML:
 

<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div> 

image.thumb.png.e2590200438a78dcb277b8e7bfa87ac6.png

  • Views 97
  • Created
  • Last Reply

Posted Images

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

Important Information

Terms of Use Privacy Policy Guidelines We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.