danab

Hi all, thanks for trying the game! The goal is to clear the screen of squares before the time runs out. If you think you are stuck you may use the buttons at the bottom to rotate or scramble the puzzle. 12 levels in total, I'll let you figure out the scoring mechanics. I would love to hear your high scores (current high score I know of is my sister with 249,906).

Built with react, which was overall a nice experience. Repo is here https://github.com/danab/DropClicks/, any code feedback would be lovely!

Even though I also enjoy not closing my li's, I don't think this is an egregious error. The app appears to be focused on helping novices interested in learning HTML. To those just beginning, it's probably most important to enforce the idea of most elements having opening and closing tags.

However, if their target audience is actual developers...well, they've got lots of other problems to deal with as well.

I retract my answer in favor of this. Clever.

Correct me if I'm wrong, but I don't believe you need any of the :not statements, and instead or (3n) and (5n) you can just use 15n for the 'fizzbuzz'.

The cascade of the CSS will take care of the cases the div is a 'fizzbuzz'.

Sorry I can't post the example, Dabblet is working strangely for me this morning.

CSS that should work:

  /**
   * FizzBuzz with CSS
   */

  body {
  	counter-reset: fizzbuzz;
  }

  div {
  	width: 100px;
  	height: 20px;
  	background: #ddd;
  	margin: 0 0 10px;
  }

  div::after {
  	content: counter(fizzbuzz);
  	counter-increment: fizzbuzz;
  }

  div:nth-child(3n)::after {
  	content: "fizz";
  }  

  div:nth-child(5n)::after {
  	content: "buzz";
  }

  div:nth-child(15n)::after {
  	content: "fizzbuzz";
  }