Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive rating card using only vanilla html/css/js

#vite

@CoconutDev13

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (0)

Our reporter did not find any issues in this project! 🎉

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

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
Slack logo

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!