Interactive rating card using only vanilla html/css/js

Community feedback

• 

  P

  Gem•120

  @ladyprogrammerPosted over 1 year ago

  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

  @CoconutDev13Posted over 1 year ago

  @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

  

  P

  Gem•120

  @ladyprogrammerPosted over 1 year ago

  @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:

  • A Complete Guide to Data Attributes
  • MDN - Using Data Attributes

  Try it and let me know how it goes.

  Marked as helpful

  1

  

  P

  Gem•120

  @ladyprogrammerPosted over 1 year ago

  @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