TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Pure CSS FizzBuzz

43 pointsby josephmxabout 10 years ago

20 comments

d_j_sabout 10 years ago
You can use css counters to output the count on non fizz, buzz or fizzbuzz iterations<p><a href="http:&#x2F;&#x2F;codepen.io&#x2F;anon&#x2F;pen&#x2F;QbNLxO" rel="nofollow">http:&#x2F;&#x2F;codepen.io&#x2F;anon&#x2F;pen&#x2F;QbNLxO</a><p><a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;Guide&#x2F;CSS&#x2F;Counters" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;Guide&#x2F;CSS&#x2F;Count...</a>
评论 #9532281 未加载
workingandtiredabout 10 years ago
I could be wrong, but I believe the post that he&#x27;s referring to as inspiration is this one: <a href="https:&#x2F;&#x2F;css-tricks.com&#x2F;tales-of-a-non-unicorn-a-story-about-the-trouble-with-job-titles-and-descriptions&#x2F;" rel="nofollow">https:&#x2F;&#x2F;css-tricks.com&#x2F;tales-of-a-non-unicorn-a-story-about-...</a><p>A pretty interesting story about job titles and descriptions that are not representative of the job they&#x27;re trying to hire for.
评论 #9532075 未加载
评论 #9532464 未加载
评论 #9532173 未加载
评论 #9532200 未加载
评论 #9531864 未加载
bshimminabout 10 years ago
I feel like it must be possible to do the numbers using CSS&#x27;s counters: <a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;Guide&#x2F;CSS&#x2F;Counters" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;Guide&#x2F;CSS&#x2F;Count...</a> If I didn&#x27;t have a whole bunch of work to do this afternoon, I&#x27;d have a go myself.
评论 #9531862 未加载
bmeltonabout 10 years ago
This is kind of brilliant. I think if I were interviewing you, and asked you to do a FizzBuzz (which is unlikely, but let&#x27;s ignore that), and you said &quot;Oh, cool, can I do it in CSS,&quot; I&#x27;d have probably laughed at you.<p>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&#x27;s worth.
评论 #9531831 未加载
kylloabout 10 years ago
Does this mean that CSS is now Turing-complete, or does it just mean that Turing-completeness is not required to implement FizzBuzz?
评论 #9532212 未加载
mcallisterabout 10 years ago
Pretty cool. Slightly different than the one posted three years ago <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=3939294" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=3939294</a>
collywabout 10 years ago
Can anyone recommend some intermediate resources for learning CSS. I have gone though css dog, and I kind of know most of that stuff already. Everything seems to be beginner or expert level.<p>And not csszengarden. It has some wonderful examples, but doesn&#x27;t really explain how they work.
评论 #9532463 未加载
mdpopescuabout 10 years ago
There&#x27;s a mistake in that code:<p>.fizzbuzz:nth-of-type(3n)::before{ content: &quot;buzz&quot;; }<p>Should be &quot;fizz&quot;.
kylemhillabout 10 years ago
Here&#x27;s the solution with numbers in the non-fizzbuzzy boxes: <a href="http:&#x2F;&#x2F;codepen.io&#x2F;kylf&#x2F;pen&#x2F;zGqOjy" rel="nofollow">http:&#x2F;&#x2F;codepen.io&#x2F;kylf&#x2F;pen&#x2F;zGqOjy</a>
livingstonabout 10 years ago
Shorter version of pure css fizzbuzz :)<p><a href="http:&#x2F;&#x2F;codepen.io&#x2F;livingston&#x2F;pen&#x2F;xGVbGd?editors=110" rel="nofollow">http:&#x2F;&#x2F;codepen.io&#x2F;livingston&#x2F;pen&#x2F;xGVbGd?editors=110</a>
dandigangiabout 10 years ago
Am I missing something on how this is CSS only when you are using jQ...?
评论 #9532004 未加载
nine_kabout 10 years ago
I love how declarative style makes the important part of the code practically trivial.<p>If anyone needs an example to show how functional style is more concise and expressive than procedural, this could be one.
Practicalityabout 10 years ago
Nice! I am going to use this concept to solve problems &quot;that can only be done in Javascript.&quot; Can&#x27;t wait to confuse and delight the designers.
agjmillsabout 10 years ago
Without the JS:<p><a href="http:&#x2F;&#x2F;codepen.io&#x2F;anon&#x2F;pen&#x2F;NqNKYv" rel="nofollow">http:&#x2F;&#x2F;codepen.io&#x2F;anon&#x2F;pen&#x2F;NqNKYv</a>
评论 #9533003 未加载
评论 #9531965 未加载
dbjabout 10 years ago
display: float; indeed
评论 #9531959 未加载
jebronieabout 10 years ago
but how well does it scale?
waximabout 10 years ago
Nice idea.
honest_joeabout 10 years ago
BTW i loved your honest CV. No exaggerating.
patrickocoffeyoabout 10 years ago
Why is this on hacker news.
评论 #9532253 未加载
smrtinsertabout 10 years ago
Oh, now you&#x27;re a REAL programmer. Congratulations.