Skip to content
Submitted about 2 months ago

Article preview component with html, css and js

Opeoluwa•290
@opeoluwa7
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?

I tried to implement a new way of thinking in both my css and js especially with separating styling concerns with css (i.e separating the base styles with adaptive styles) and also, I learnt how to add interactivity with javascript.

What specific areas of your project would you like help with?

I was not able to completely figure out the interactivity so there are a lot of bugs with the button especially on different screen sizes, it still works but the button can go missing in some cases which will require you to refresh the browser...I had to create another media query for 1501px and upwards but to no avail, I have done my best and I sincerely hope someone can help me point out the errors I made and or solutions to the bugs the current website has...overall, this was a very good project and I am happy I made it this far (P.s, the bug mostly shows on larger screens, on mobile, there is no issue unless you switch to landscape mode)

Community feedback

  • Ayako•250
    @Ayako-YokoePosted about 2 months ago

    Great work! Your design is precise and well-executed.

    I noticed that when clicking the button on mobile, the height of the footer changes. I struggled with this issue as well. You could try setting a minimum height for the footer to prevent this from happening.

    Additionally, the tooltip on desktop is displayed outside the card. Adjusting its position might help keep it fully within the card.

    Marked as helpful
    0
    Opeoluwa•290
    @opeoluwa7Posted about 2 months ago

    @Ayako-Yokoe Thank you

    0
    Opeoluwa•290
    @opeoluwa7Posted about 1 month ago

    @Ayako-Yokoe I’ve been able to make some adjustments

    What do you think of it now?

    1
    Ayako•250
    @Ayako-YokoePosted about 1 month ago

    @opeoluwa7 Yes, this looks great! I like how you change the background color with JavaScript.

    If you're interested, you could add a triangle below the tooltip. My approach might not be the best practice since it uses position: absolute, but you can create a triangular shape with borders like this:

    border-width: 15px;

    border-style: solid;

    border-color: #555 transparent transparent transparent;

    Marked as helpful
    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