Skip to content
Submitted about 2 months ago

Responsive article preview component

#bem
P
Valeria Montoya•400
@ValeriaMontoya
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

From this project I've learned how to implement the following with JS:

  • How to use classList.toggle() to show or hide an element by adding or removing a class
  • How to dynamically change the appearance of elements using inline styles
What specific areas of your project would you like help with?

I'd like to read your feedback about my JS code, maybe there's something I can improve 🤓

Community feedback

  • P
    Jakub Strzyżykowski•260
    @jstrzyzykowskiPosted 27 days ago

    Hey!

    Great job! I like the precision with which you have reproduced the design of the card.

    Based on your question regarding JS feedback:

    1. We can put our scripts directly into header section now (check defer and async prop for script tag)

    2. We can add a behaviour where the tooltip goes off when the width of the viewport changes (check resize event)

    Keep going!

    Marked as helpful
    0
    P
    Valeria Montoya•400
    @ValeriaMontoyaPosted 21 days ago

    Hi @jstrzyzykowski 👋🏼

    Thank you so much for your kind words! I'm glad to hear that you liked the design precision of the card.

    I really appreciate the feedback on the JS aspects. You're right, using defer in the header section is definitely a more streamlined approach.

    I also love the idea of adding a behavior for the tooltip to disappear when the viewport width changes. It sounds like a useful enhancement, and I'll look into implementing the resize event to make that happen.

    Thanks again for your thoughtful suggestions!

    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