Our reporter did not find any issues in this project! 🎉
Submitted
Interactive rating card using only vanilla html/css/js
#vite
CoconutDev13• 50
@CoconutDev13
Design comparison
Reports
Accessibility report (0)
CoconutDev13’s questions for the community
Hey there!
That is my attempt to make an interactive rating card which I think I did it!
I'm pretty happy with the result.
Although I feel a little bit unsure about the state management I did in javascript and the approach of hiding and revealing sections using Element#attributeToggle method.
Also I modified a little bit the user experience so I did the button disabled and chose that gray color so it might look a little bit different in first look. I think it's a little bit better that the button gets enabled after user pick any number. Also I swapped hover and selected colors because to my mind it makes more sense when selected item has the primary color and hover just a little bit offset-ed color than original
Feel free to criticize my work and suggest to me some small or huge changes in order to make my code better. Thank you in advance!
Community feedback
Gem• 120
@ladyprogrammer
Posted
I like your code, it's clean! You had that all working in just a few lines of code! This makes it easier to maintain and follow the code.
Yeah I think hiding and showing the sections via hidden attribute is what I also think the cleanest and most elegant solution when just trying to do the two simpler pages with plain HTML - but this is just a personal opinion. We probably would want to use a framework or library like React or Angular to actually help us on more complex approaches to really divide the page into smaller components for multi-page websites. Other approaches I have seen before is to use document.open and document.write (or similar to that) and another is the use of ajax requests to read and insert snippets of HTML pages. Not really that simple as that with just hiding and showing the sections.
There are also some issues with the validation report - but I will leave you up to it to resolve and figure that out unless you need guidance. I have a feeling you can do these on your own. :D
In real-time projects, just keep in mind that a dev should strictly follow the agreed behavior and appearance which is defined usually by the UI/UX team/site owner/product owner/other similar persons who is in charge - unless you are given that creative freedom to do so. If you think a behavior or appearance is better (which is usually subjective), it's better feel to talk with the person-in-charge of the design and behavior.
In my understanding as part of the challenge stated in the Brief section: Your challenge is to build out this interactive rating component and get it looking as close to the design as possible.
Any assumptions - if you should do one - should not impact the originally approved design and behavior.
Nice work! I have a feeling you have been coding for a while.
Marked as helpful
1
CoconutDev13• 50
@CoconutDev13
Posted
@ladyprogrammer hi! Thank you for review, I appreciate it. Glad to hear such nice words about my work 😃
Probably I'll use some tools and libraries in future but now my goal is to learn in depth HTML and CSS and I try to focus only on that.
Yeah I feel I'm able to fix validation report. I'm using the value attribute to keep an eye on rating that user chose so I can display it in thank-you page. The problem is that html has value argument as well on other elements and it considered that it's mistake placing it on div? I think renaming the attribute will make the error go. If I misunderstood something please correct me.
Yeah you are right. In real projects I think I'll have less freedom to experience and play but I would have contact with designers hopefully so we could discuss that UX. To me it's really unclear when the button is so catchy with primary color but you cannot click it because you haven't picked a rating number.
And you are right. I've been coding for a while but frontend was just an annoying part of it so I can have some gui for my projects. My code in frontend is inspired by Kevin Powell on youtube. I've watched 2 videos of him solving some more advanced challenges and I feel I learnt a lot from him.
0
Gem• 120
@ladyprogrammer
Posted
@CoconutDev13
Creative freedom happened in only one of my projects and I thought it was great but it wasn't! It's actually harder not to have another team do all the thinking for the UI/UX just because the client doesn't exactly know what they really want... yet. :-p
The <div> attribute doesn't allow value attribute, that's why it's spitting all the errors in the validation report. I think the better approach that you can explore is data-* instead of value attribute. I haven't tried that myself with just plain HTML but in theory that should work.
Check this out:
Try it and let me know how it goes.
Marked as helpful
1
Gem• 120
@ladyprogrammer
Posted
@CoconutDev13
Forgot about the button. I could think of a couple of approaches that can be assumed safely without needing to change the UI:
- animation and/or tooltip feedback
- change cursor on hover (IIRC I think this was what I used)
0
Please log in to post a comment
Log in with GitHub
Join our Slack community
Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!