Frontend Mentor | Article Preview Component using Vanilla JavaScript coding challenge solution

Solution retrospective

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

I need help with the image in the component. You can compare the image in my attempt to the solution. The image is somehow cropped and there's some space left in the desktop view at the bottom. It's most likely due to image.
Any suggestions would be appreciated on making the javascript code more efficient?

Community feedback

@thedanielking

Posted about 1 month ago

Nice work man. I had the same issue concerning the image since from the solution it appears to be cropped. I like you JavaScript as well. Could you by chance in a line explain the condition for your JavaScript ?

Raptor0x1• 210

@Raptor0x1

Posted about 1 month ago

Sure. When the button is clicked, if the display of shareContainer is set to none then display property would change to block and the other properties would also change.

if it's not set to none which means it would be block then the display would change to none (If its visible then it would get hide) and the other properties will also change.
By default, JavaScript will check inline style in this piece of code shareContainer.style.display but I have set the display property in an external CSS file so it's going to return an empty string. So I had to explicitly set the value shareContainer.style.display = 'none'
If you want you can set the display in inline style and then remove the value in js OR you could use getComputedStyle to directly fetch the display property from the external CSS getComputedStyle(shareContainer).display =='none'

Article Preview Component using Vanilla JavaScript

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community