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 186
  • Created
  • Last Reply

Posted Images

Create an account or sign in to comment

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.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.