Submitted 29 days ago

Article Preview Component

Stephanie Dennehy• 220

@Stephanie-Dennehy

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Article preview component

HTML
CSS
JS

1newbie

View challenge

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

@lavil014

Posted 29 days 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%)'
}

}

Please log in to post a comment

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