Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

article preview component

batuhan 60

@bacayo

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • Desktop active design was challenging. I am not sure it was the optimal way to implement active state.

Community feedback

Ken 935

@kenreibman

Posted

Great job! The style looks great.

I would say the only issue with your component challenge here is that your share button is improperly functioning. I am also going to suggest better js code for the share button.

  • Instead of adding a style.display on each element, it would be better if you toggled your classes.
  • In your style.css I would make a class called .show or .active or any name that indicates an active state with a display: flex; property.
  • Then make a click event listener for your shareBtn
shareBtn.addEventlistener('click', () => {
    social.classList.toggle('active') 
});

This would also, I believe fix the fact that your social button disappears, denying the user from closing the social pop-up as well.

I hope this helps! Please let me know if you have any questions.

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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