Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS Diner

flukeout.github.io

Post reply on HN
Print view View original

61–70 of 121 posts

Re: CSS Diner

#61

Post by flukeout »

smokinjoe wrote: post #6
baddox wrote: post #3

Earlier quoted context omitted.

> 1. Would be nice to have some sort of 'hint' or 'solve' button. Did you see the CSS documentation on the right sidebar? It took me a while to notice it was there.

Yeah I did - but I ran into an issue on level 9 (A, B) where I wasn't producing the answer it was looking for but my solution was still technically correct. I couldn't for the life of me 'unstick' myself from my initial answer. The hint could have kinda slapped my brain and jolted the more concise answer outta me. Really minor detail I know, but with a lot of these online lesson helpers people do like to have the ans…

I agree, I think I'll add a way to expose the solution. The problem with A,B is that it's also looking for one specific order, so I'll make sure both A,B and B,A work! Cheers!

Re: CSS Diner

#62

Post by flukeout »

kleinishere wrote: post #18
smokinjoe wrote: post #6

Earlier quoted context omitted.

Yeah I did - but I ran into an issue on level 9 (A, B) where I wasn't producing the answer it was looking for but my solution was still technically correct. I couldn't for the life of me 'unstick' myself from my initial answer. The hint could have kinda slapped my brain and jolted the more concise answer outta me. Really minor detail I know, but with a lot of these online lesson helpers people do like to have the ans…

Still trying to figure this one out.. Apparently "plate pickle, bento pickle" (or reverse order) isn't correct. Would love to see a hint/solution manual.

plate,bento does the trick, but because it's order-specific right now, so bento,plate fails - I'm updating it tonight to fix that issue.

Re: CSS Diner

#63

Post by harlanlewis »

yeldarb wrote: post #53

Nice, I've been doing CSS for years but never knew about the "+" or "~" selectors until now. Anyone have any examples of how they have or would use these in real-life?

The adjacent sibling selector `+` can be used to style an element based on the state of a sibling. For example:

input:valid + label { color: black; }

input:invalid + label {color: red; }

CSS Tricks has a tutorial (http://css-tricks.com/float-labels-css/) on this technique for displaying form labels as faux placeholders until the input has content, although it's not quite ready for most site's production requirements.

I haven't found many uses for the general sibling selector `~`, as it matches all elements after the initial selected element. I usually want the preceding elements as well if I'm shooting that broadly, so simply excluding the item with `:not()` is generally a better choice.

Re: CSS Diner

#65

Post by lifthrasiir »

flukeout wrote: post #60
JoshTriplett wrote: post #26

Quite a bit of fun. One notable issue: several puzzles need to have additional elements or classes added to prevent less sophisticated solutions from working. It's often possible to use a simpler selector than the one being taught in a particular puzzle.

Hey can you give me a specific example that's bothering you?

Some examples: `plate>apple, plate>pickle` for 16, `apple, pickle` for 17, `bento:nth-child(2)` for 19, `plate:nth-child(2)>apple` for 22.

Re: CSS Diner

#66

Post by flukeout »

colinramsay wrote: post #10

I know CSS pretty well and I have no idea how to make this work. I'm on the current version of Chrome and it's throwing a load of JavaScript errors in the console so maybe that's got something to do with it.

Type in "plate" for level 1 - that's the correct selector. The goal is to type the correct CSS selector for each level into the strobing blue input. Also, use chrome or firefox :D

Re: CSS Diner

#69

Post by subrat_rout »

It is a really neat game. Kudos to maker(Luke). One must possess a unique combination of creativity and subject matter expertise to bring this kind of engaging game to audience(users). I heartily encourage those makers and wish for more games on other programming languages (such as Rails, HTML and Javascript etc).

Does anybody know other games like this in HTML, Javascript and Rails?

Post reply on HN