Pure CSS FizzBuzz

This is kind of brilliant. I think if I were interviewing you, and asked you to do a FizzBuzz (which is unlikely, but let's ignore that), and you said "Oh, cool, can I do it in CSS," I'd have probably laughed at you.

This is clearly an academic exercise, but one that I would never have even thought to attempt, as I probably would have chalked it up to probably waaaay more trouble than it's worth.

Re: Pure CSS FizzBuzz

#5

Post by josephmx » Tue, May 12, 2015, 2:07 PM UTC

bmelton wrote: post #4

This is kind of brilliant. I think if I were interviewing you, and asked you to do a FizzBuzz (which is unlikely, but let's ignore that), and you said "Oh, cool, can I do it in CSS," I'd have probably laughed at you. This is clearly an academic exercise, but one that I would never have even thought to attempt, as I probably would have chalked it up to probably waaaay more trouble than it's worth.

I'm grinning more than socially okay at work right now, thanks a lot! It's really appreciated

Re: Pure CSS FizzBuzz

#6

Post by workingandtired » Tue, May 12, 2015, 2:08 PM UTC

I could be wrong, but I believe the post that he's referring to as inspiration is this one: https://css-tricks.com/tales-of-a-non-unicorn-a-story-about-...

A pretty interesting story about job titles and descriptions that are not representative of the job they're trying to hire for.

Re: Pure CSS FizzBuzz

#7

Post by kylemhill » Tue, May 12, 2015, 2:11 PM UTC

Here's the solution with numbers in the non-fizzbuzzy boxes: http://codepen.io/kylf/pen/zGqOjy

Re: Pure CSS FizzBuzz

#8

Post by bshimmin » Tue, May 12, 2015, 2:11 PM UTC

I feel like it must be possible to do the numbers using CSS's counters: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Count... If I didn't have a whole bunch of work to do this afternoon, I'd have a go myself.

Re: Pure CSS FizzBuzz

#9

Post by d_j_s » Tue, May 12, 2015, 2:12 PM UTC

You can use css counters to output the count on non fizz, buzz or fizzbuzz iterations

http://codepen.io/anon/pen/QbNLxO

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Count...

Re: Pure CSS FizzBuzz

#10

Post by bshimmin » Tue, May 12, 2015, 2:12 PM UTC

bshimmin wrote: post #8

I feel like it must be possible to do the numbers using CSS's counters: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Count... If I didn't have a whole bunch of work to do this afternoon, I'd have a go myself.

And, seconds earlier, someone else had already done the hard work!