Skip to content
Submitted 3 months ago

Article Preview Component

Stephanie Dennehy•220
@Stephanie-Dennehy
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

What are you most proud of, and what would you do differently next time?

I am very proud of the fact that I was able to make the JavaScript work! I have struggled with implementing JavaScript correctly in other attempted projects. I know it was a very simple task, but being able to complete it and make it work the way it was supposed to was a big win for me!

What challenges did you encounter, and how did you overcome them?

I could not get the share icon to change colors. I tried doing it on hover and on click. I am able to change the background color but I could not get the arrow to change colors. I did a lot of searching without finding a solution that worked. I decided to submit my project anyway in hopes of reviewing others that might have working solutions.

What specific areas of your project would you like help with?

I had trouble with getting the arrow icon for the share feature to change colors. I was able to change the background, but not the icon. I considered editing it in a photo program and just swapping the image when it was clicked, but I feel like there is a better way to do this. So I am looking for ways to make that color change happen. Any suggestions are welcome!

Community feedback

  • Luis Aviles•180
    @lavil014Posted 3 months ago

    Hi Stephanie, try adding 2 button tags in HTML and use the visibility hidden and visible property in CSS to have 2 button tags with different background color. You can use position absolute and relative to place one button over the other and make a button visible when the event listener in JS is triggered.

    Hope this is helpful and you can understand this. I will add the event listener function in my JS file:

    const displayMedia = ()=>{

    let width = window.innerWidth;

if (width<375){
    profileInformation.style.visibility = 'hidden';
    socialMedia.style.visibility = 'visible';
    closeBtn.style.backgroundColor = ' hsl(212, 23%, 69%)';
} else if( width > 376){
    profileInformation.style.visibility = 'visible';
    socialMedia.style.visibility = 'visible';
    closeBtn.style.backgroundColor = ' hsl(210, 46%, 95%)'
}

    }

    0

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