Interactive rating component (HTML, CSS, JS, DOM, FLEXBOX)

Hello there 👋

Congratulations on completing the challenge

HTML 📄

• It is not good practice to have more than one <main> tag in a document. You could wrap the entire content inside the body section with a <main> and replace the places that you have used <main> with <section> or just the <div> tag.

• Also It is not allowed to use <h1> more than one time in a document. Since it is used to indicate a top-level heading. You could use <h2> instead which can be manipulated many times in a document.

CSS 🎨

• Use relative units such as em or rem for margin, padding, width, and height. most preferably rem for font size. avoid using px since it is an absolute unit. I see that you have followed this convention in places, but it would be more responsive if you used it for all of it.

• Always provide the <img> tag with meaningful and understandable descriptive text about what the image is about in the alt attribute. to improve accessibility.(describe what the image is)

You have done a great job using CSS custom variables

Javascript ⚙️

• The user shouldn't be able to submit a rating without selecting any. But, if you notice in your implementation when you click the submit button. A default value you have set in HTML is displayed. But we don't want that to happen. Users shouldn't be able to submit without selecting a rating.

Follow this quick fix to overcome the issue 👇

• In the HTML in <span id="rating" style="display: inline-block; margin: 0 0.3rem">1</span> remove the default value 1 and keep it empty, like this; <span id="rating" style="display: inline-block; margin: 0 0.3rem"></span>

• Now in app.js in line 18 we have the event listener on submit button

replace

submitButton.addEventListener("click", () => {
     mainContainer.style.display = "none";
    thanksContainer.classList.remove("hidden");

})

with this

submitButton.addEventListener("click", () => {
    if (actualRating.innerText === '') {
        
    } else {
        mainContainer.style.display = "none";
        thanksContainer.classList.remove("hidden");
    }
     

})

We are basically telling if the actual rating is empty then do nothing, if it has a value selected display the thank you page.

Now it should have fixed the issue 🔥👍

I hope this was useful 😊

HAPPY CODING

Hi Muhammadh,

Thank you for your suggestions. It was really helpful to me.

I'm really glad you checked out my code. :)

I have uploaded a verison 2.0 with you suggestions.

I don't say everything is fixed now. :)

Br,

Csaba