Skip to content
Submitted 3 months ago

Article Preview Component using Vanilla JavaScript

Raptor0x1•210
@Raptor0x1
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 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

  • Daniel king•240
    @thedanielkingPosted 3 months 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 ?

    1
    Raptor0x1•210
    @Raptor0x1Posted 3 months 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'
    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