Skip to content
Submitted almost 2 years ago

Article Preview Component (SASS + JS)

Hussain Hussain•410
@LysitheaDarkKnight
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

Hello, this is my solution

I am a noob at Javascript, so it took me a while to get the .share pop up to work. It doesn't work on the first click, but then it functions normally from the second clock onwards. Don't know why this happens. Please comment if you have any idea why this happens.

Furthermore, I used customized colours for this project, let me know whether it looks good or not!

Thank you for reading, any feedback is appreciated!

Community feedback

  • Adriano•38,290
    @AdrianoEscarabotePosted almost 2 years ago

    Hi Hussain Hussain, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

    We can change the switch order to solve the click problem!

    cardShare.addEventListener('click', (e) => {
    switch (messageBox.style.opacity) {
        case arr[0]:
            messageBox.style.opacity = arr[1]
            break
        case arr[1]:
            messageBox.style.opacity = arr[0]
            break
        default:
            messageBox.style.opacity = arr[1]
    }
});

    What was happening is that it was falling into the default on the first click, and as the default has a value of zero, the opacity was still zero!

    The rest is great!

    I hope it helps... 👍

    Marked as helpful
    1

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