Interactive Rating Component (JS + Custom Design + Modal)

@vcarames Thank you! I'll apply these changes soon.

@correlucas 100% this advice above is essential for the challenge.

It's a html form and you should be listening for the submit event. Theres really no other corect way for this one.

You also need to remove the articles from this. You're misusing the element. It cannot be used to break up related content. Articles have a specific semantic meaning for encapsulating content that can be syndicated on other pages or sites. It is not a general element to group small bits of layout together.

Once you've fixed the html, you will need to change your js. You should be learning to work with the form data.

Another accessibility point. If you are going to change the design, that's fibe to do but you must not make it less accessible. I can't read the button or selected states on this because of the white on light green.

With modals there is now a dialog element for that purpose. They have specific accessibility challenges around focus management that I'm not going to go into in detail, but again it's important to only use them once you understand these requirements and how to address them. It's a nice idea but not correctly implemented at the moment.

My general advice is to keep things simple. Work through the challenges in their simplest way first, focusing on code quality. Then if you want to extend later you can do that once you know a solid foundations been laid.

Other advice is to consider semantics and accessibility at every stage. It's so important and you can't afford to leave learning it until later. Think about keyboard, screen magnification, vision impairment and screenreaders as a minimum. If you do, you'll become a truly excellent developer.

Good luck

@grace-snow Hey Grace, thank you for the feedback!

• About the article, in this case I wrap everything inside a main/div and that's fine?

• I've really few knowledge in JS, I am following a course and I wanted to try this challenge, but since I didn't knew yet how to work with forms I tried to make the challenge in the other way (I didn't knew the only to do it was using forms). I'll do the challenge again using the rating buttons and submit using a form/radial buttons instead of using a list of buttons.

• I'll pay more attention to these design/accessibility details. I wasn't aware of that.

Anyway, thank you a lot, next time a face an challenge like that I'll use a form instead of trying something else 😁

Thanks =)

@vcarames Hey bro I updated my code, here's the live site https://relaxed-phoenix-dd38fe.netlify.app/

@grace-snow I updated my JS code =)

@correlucas

Nice job implementing the radio inputs! Do not forget to add the legend inside the form (it should visually hidden and state something like, "Please select a rating…")

For the “thank you” content, you’ll need to announce the changes to your content when it appears to screen readers.

So you’ll need to wrap the entire “thank you” content in a an div and give it an aria-live="polite" (there should be nothing else on this div).

More Info: 📚

MDN aria-live

You were going on the right direction here in your JS;

// form.addEventListener("submit", (ev) => {
//   ev.preventDefault()
//   output.classList.remove('hidden');
//   input.classList.add('hidden');
// })

It should be something like this;

form. addEventListener ("submit", (e) => {
e.preventDefault ( );
const rating = document.querySelector ("input [type= 'radio': checked").value;
userselection.textContent = 'You selected ${rating} out of 5;

Remove/add classes/attributes 
});

Besides the modal (I haven’t studied them yet), your HTML should be good to go.

@vcarames Hey bro! Thank you again for the feedback, was really useful the info you gave me. May I ask you where did you learn this stuff about the html/accessibility and JS?

The JS part I had a hard time trying to understand it, so I'll study a little bit more my course to try it again soon.

Anyway, thank you a lot!

@correlucas

I’m glad I was able to help you out.

Honestly, I just read as much as I can on Google, https://developer.mozilla.org/en-US/ and https://dev.to/ (I made it a habit every morning after the gym) and then try implementing whatever it is I’m trying to build as best I can. If I’m stuck or have any hesitations (if I can’t find an "answer’ online) I will ask on the Slack channel’s #help, you’ll get more feedback there than on the FEM site.

For HTML, https://developer.mozilla.org/en-US/ is my go to for pretty much everything related to HTML (you’ll notice that it is the main source I give everyone in my comments); it is a gold mine! Not only does it show you the HTML code it also shows you how to use JS with the HTML code. That’s how I learned about the form element and the radio inputs.

For the accessibility, I began placing more emphasis on this when it comes to my web development. So when I Google something, I always include the text "accessible". This helps filter out anything that is non-accessible. And my go to site is https://www.w3.org/WAI/ it has everything regarding accessible web development.

Also by the end of the month Grace (she’s the queen of accessibility) will be releasing her own site regarding accessible web development https://fedmentor.dev/ so I recommend signing up for her newsletter.

For the JS, I know how you feel. It took me a while to understand how it worked. I ended up taking this Udemy course last year on August, https://www.udemy.com/course/the-complete-javascript-course/, unfortunately, I didn’t finish it 100%.

Once I understood the basics I stopped watching and began implementing my own JS code. But I try to keep it simple as possible (the less code the better). I use HTML and CSS as much as I can and only use JS when needed.

Hopefully that helps.

@MicroHub69 Thank you bro!

@wendyhamel Hey thank you for the tips, can you point me the proper way to apply the modal woth accessible html?

@correlucas That's not a short or easy anwser. It's a combination of html and javascript to get it to work nicely accessible. You have to add aria attributes to the different parts of the modal like aria-labelledby, aria-modal and the role='dialog' attribute. The aria-modal has to be true if the modal is opened and false if it is closed. You need to control this with javascript.

Read more on the MDN docs about aria-modal

But as @grace-snow mentioned the dialog element is a good one to use. A lot of what you need is baked into that.

more MDN information about the dialog

Some more information, if you're interested; The focus issue @grace-snow mentioned is also a problem if you make your own modal. It is a complicated bunch of javascript to keep the focus within the modal.

For example you don't want users to be able to tab out of a modal where you require an answer before the user can move on. With javascript you can write code to give other elements on the page aria-hidden='true' to prevent the user to be able to tab out of the modal. There can be scroll issues as well. Most of the time you don't want the page to scroll behind the modal.

It gets very complicated.

I hope you don't get a headache ;)

Happy coding

@chukwudobe-Micah I have no idea why I am having this error I redeploy in Netlify to see if it fixes. Here's the link of the Netlify site https://63b3ef8d238dde495e34abaa--relaxed-phoenix-dd38fe.netlify.app/

@correlucas I just checked it out and it worked.😌 Good work man, I'll be joining you on these projects soon. I followed you on twitter, I'm expecting a follow back. I want to be friends, work together and grow together since we're both chasing the same career. My display name here is the same the with the name of my twitter account name leaving out the "Chinedu", same profile picture too.

@chukwudobe-Micah Thank you bro! I didn't saw it sorry. Now I've followed you. I saw that you're doing amazing stuff with JS since you're already working with API and etc. This is amazing. I'm studying the basics yet, like DOM for now. I hope to try some other challenge soon.

Have a nice day ✌

@correlucas thank you brother, you're doing very good too. I hope we get to share knowledge and work together soon.

@ChamuMutezva thank you Chamu

@sidneyfrancois Boa continue no foco!

@FelipeFama Thank you Felipe!

@AdrianoEscarabote Thank you bro!