user profile image

Responsive recipe page powered by AngularJS. It's used to perform serving size calculations and handle checking off recipes off the list. Both directions and ingredients are generated dynamically through the JavaScript models.

Entry for the first week of Season Three of the Pattern Rodeo.

(Click through directions for a little extra)

See full pen: http://codepen.io/janrubio/full/rxtos


  1. Looks like J-Rubz already nailed it.

  2. Really nice timeline effect!

  3. Thanks! Glad you guys like it :)

  4. On a phone, it's not using your "small-screen" styles --- maybe throw a < meta name="viewport" content="initial-scale=1, maximum-scale=1" > in there?

    I was thinking about making mine with Angular.js - Awesome to see how you did it.

  5. This is amazing! I entered the contest as well, but I guess I know who will win now! Good luck! BTW I love your creativity. I probably don't even know half of the code that you used for this.

  6. @sheriffderek Thanks, I added that and it should be working now.

  7. @GRXDesign That's a fork of this pen.

  8. Right. Didn't see the differences though.

  9. @GRXDesign That's because all he did was remove Jan's credits at the bottom.

  10. Sometimes I feel like I'm pretty good at web design, then I realize that this was put together in a day. Fantastic job, you deserve the win for this week.

  11. Good work, Jan.

    Too bad the hearts of the forks. Should add them to your pen Although certainly you dont need them to win. ;-)

  12. Nice! I like the little icon images with the directions. You've got a little bug with your +/- quantity buttons, though -- if the user has typed in a number, then presses +, you get string concatenation (e.g. 4 + 1 = 41) instead of addition.

  13. Thanks all! @AmeliaBR I saved a fix so it should be working now.

  14. The ingredients quantity changing is super smart. Makes me wish ever recipe on the internet had that.


  16. in germany we say SUPERGEIL !

  17. shouldn't the 'directions' fade on hover be reversed? example

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.