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

P
Ortaly 970

@ortalyarts

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@Agus27111

Posted

HI ortalyarts....

Lovely design, in desktop and mobile. but maybe you can make the button more responsive.. i mean if we click it for the first time its appear the share box and we just click for the second time the box disapear again.

maybe you can do it by "toggle"

var shareIcon = document.querySelector('#share-icon'); var socialIcons = document.querySelector('#share-holder') const autorHolder = document.querySelector('.autor-holder')

shareIcon .addEventListener("click", (event) => { autorHolder .classList.toggle('share-active') socialIcons .classList.toggle("share-active");

}

});

and in your CSS u can add style that the display in class share-active is none. .share-active { display: none; }

I hope that helps

Marked as helpful

0

P
Ortaly 970

@ortalyarts

Posted

@Agus27111 Thank you so much for your tips!

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