Skip to content
Submitted 10 months ago

Responsive Reusable JS template string Solution

Justin Green•2,770
@jgreen721
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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!

Community feedback

  • ngdangtu•120
    @ngdangtu-vnPosted 10 months ago

    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
    1
    Justin Green•2,770
    @jgreen721Posted 10 months ago

    Good spot on the prep-item bug. I got a little twisted up on the how/where I was juggling classes and left a classname in the html template causing the bug. I think it's fixed now.

    Another good spot/clean-up on the same item double-click. I think the guard I implemented fixes it.

    Appreciate the catches/feedback. And yea, the shadow was a bit much! lol

    1
    ngdangtu•120
    @ngdangtu-vnPosted 10 months ago

    @jgreen721 the prep-item bug is still there. I've test your website and the most simplest solution I found is add "delay-0" class to prep-item. In short, add "delay-0" in line 143.

    Marked as helpful
    1
  • Justin Green•2,770
    @jgreen721Posted 10 months ago

    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! 🙂

    0

Please log in to post a comment

Log in with GitHub

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