Design comparison
Reports
Accessibility report (4)
warning
All page content should be contained by landmarks
<div class="left">
<img class="drawer-pic" src="images/drawers.jpg" alt="drawer picture">
</div>warning
All page content should be contained by landmarks
<article>
<p>
Ever been in a room and felt like something was missing? Perhaps it
felt slightly bare and uninviting. I’ve got some simple tips to help
you make any room feel complete.
</p>
</article>batuhan’s questions for the community
- Desktop active design was challenging. I am not sure it was the optimal way to implement active state.
Community feedback
Ken• 975
@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.displayon each element, it would be better if you toggled your classes. - In your
style.cssI would make a class called.showor.activeor any name that indicates an active state with adisplay: flex;property. - Then make a
clickevent listener for yourshareBtn
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
Join our Slack community
Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!