Skip to content
Submitted over 1 year ago

Responsive Reusable JS template string Solution

P
Justin Green•2,940
@jgreen721
A solution to the Recipe page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Fun design. I ended up creating a JSON object for the recipe and added one other item to demonstrate a re-usable template added via Javascript. Put an observer onto the sections for some enhanced UX but got a little convoluted on repetitive tasking with class management to prevent re-application of the observer. Nothing crazy but could probably be cleaned up a bit. Feedback/suggestions welcomed!

Code

Please log in to post a comment

Log in

Community feedback

  • ngdangtu•120
    @ngdangtu-vn

    The appearing animation is nice but there is 1 small bug in the "Preparation time". I think you forgot to add --delay css var so the animation was failed to run.

    The pagination bullet may need a bit guard in js to prevent double click. Visitors don't need the page to re-render right?

    And I like your new cover gradient, it looks much better than the shadow 👍

    Marked as helpful
  • P
    Justin Green•2,940
    @jgreen721

    I appreciate your eye/attention on this! Umm, I think I got confused on prep-item actually being prep-header (this is more a byproduct of the seat of my pants design as I go). Seeing as I didn't assign any animations/observer events to the other sections headers I'm not entirely sure why prep area is my exception, I suppose it was initial loading experience since it'll generally be in view but I'm rambling. I think its fixed and now the prep-section(header and items) is animating accordingly (once when in view and then done). Again, appreciate the look and feedback, and if it's still buggy on your experience... From my eye, it seemed your suggestion more targeted the img/img-container but maybe I read it wrong. It kind of became a templated mess down there so again I appreciate you parsing through it! 🙂

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord