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

Reports

Accessibility report (4)
warning

Document should have one main landmark

<html lang="en">
Learn more
warning

Page should contain a level-one heading

<html lang="en">
Learn more
warning

All page content should be contained by landmarks

<div class="left">
        <img class="drawer-pic" src="images/drawers.jpg" alt="drawer picture">
      </div>
Learn more
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>
Learn more

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.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
Slack logo

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!