Submitted over 4 years ago

Article Preview Component - Flexbox, JS

@brasspetals

A solution to the Article preview component challenge

Solution retrospective

Finally getting into the JS projects! For this one, I'm curious - what's the best practice for the share menu when it comes to accessibility? Would love to hear anyone's thoughts on this and any other feedback you might have.

Code

Please log in to post a comment

Community feedback

ApplePieGiraffe•30,525
@ApplePieGiraffe
Posted over 4 years ago
Hey, great job, Anna! 👏

JS is actually a whole lot of fun, isn't it? 😆

I like the transition you added to the social media popup in the mobile layout of the site! 🤩 The design's pixel-perfect, too!

Also, great job on remembering the hover and active states of the popup button—lots of people seem to forget those. 😉

Your code looks good! These days, it's a common (and considered slightly better) practice to put your script tag in the <head> tag in your HTML and add the boolean attribute defer to it. Apparently, this helps load the HTML and JS at the same time but keeps the JS from being executed before the HTML is loaded and is slightly faster, I hear.

Also, just a small tip for this project, but can add an event listener to your button in your JS and specify it to run the toggleShare function once it is clicked so that you can keep all your JS in your script.js file and not have to do anything to the button your HTML.
```
const btn = document.querySelector('my-btn');

function toggleStuff() {
    // blah, blah, blah
}

btn.addEventListener('click', toggleStuff); // this'll do the same thing, I believe ;)
```
You're doing a great job! Keep it up! 👍

Of course, keep coding (and happy coding, too)! 😁

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