@ApplePieGiraffe
Posted
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)! 😁
@ApplePieGiraffe
Posted
@ApplePieGiraffe
Oh, yeah, and for making the social media popup accessible—I'm no expert—but I believe adding the WAI-ARIA thingy aria-pressed=true causes some screen readers to read the button as a toggle button. You can take a look at this article from MDN for more aria-pressed and other helpful attributes like aria-haspopup and aria-expanded.
A good ol' aria-label (along with a short description) might help screen readers, too, perhaps. 🙂
@brasspetals
Posted
@ApplePieGiraffe Thanks for the wonderful feedback and JS tips - definitely looking forward to working with DOM manipulation more! I've implemented the event listener and have started reading up on placing the script tag in the head with defer. 👍
Thank you also for sharing the MDN aria article - I have long way to go with accesibility for sure.
@ApplePieGiraffe
Posted
@brasspetals
Haha, me too! 😏
