Skip to content
Submitted over 1 year ago

Article preview component (RWD, no JS)

Kamil Wiater•230
@WiaterKa
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

Hello there!

Finally managed to make an easy responsive website. However I am still new to JS and I had problems implementing it into the project - do you have any ideas how I can do it in this project?

Any other suggestions are also welcome :)

Many thanks in advance! Happy coding!

Community feedback

  • visualdennis•8,375
    @visualdennissPosted over 1 year ago

    Hello,

    congrats on completing the challenge successfully!

    Regarding JS for the social icons, here is how you can do:

    • have the pop-up-box inside the share_img_personal and make that container position relative.
    • Then make pop-up position with position absolute. Make it display:none or opacity:0,
    • then create an additional css class for its active state e.g. pop-up-active
    • then add an event listener to the share-img so on click it should use this document.querySelector('.pop-up-box').toggle.classList('pop-up-active')

    Hope you find this feedback helpful!

    Marked as helpful
    1

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