Interactive rating component (HTML, CSS, JS, DOM, FLEXBOX)
Design comparison
Solution retrospective
Hi All,
This is my interactive rating project.
Please contant me if you found error(s).
Thanks,
Csaba
Community feedback
- @Mr-jawPosted over 1 year ago
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
orrem
for margin, padding, width, and height. most preferablyrem
for font size. avoid usingpx
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 thealt
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
Marked as helpful0 -
- @CsaboooPosted over 1 year ago
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
0
Please log in to post a comment
Log in with GitHubJoin 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