Rating component

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here is some feedback to further improve your code:

  • The section element is being used incorrectly ⚠️ and not needed for this challenge.

  • The “icons/illustrations” in this component are purely decorative. ⚠️ Their alt tag should be left blank to hide them from assistive technology.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • The HTML for the ratings needs to be rewritten as it was done incorrectly ❌:

  To ensure that the "rating buttons" are fully accessible 💯, they need to be built using a form ⚠️.

  1. Everything will be wrapped inside a fieldset which will have a legend that is visually hidden using CSS.
  2. Inside, there should be five input radios and each input should have a label attached to it to make the “ratings” accessible.
  3. The last thing you will want to include will be a button so users can submit their choice.

  More Info: 📚

  MDN: Form Element

  MDN: <input type="radio">

  MDN: Field Set Element

  If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

  Happy Coding! 🤖

  Marked as helpful

  1

  ---

  

  Mirjax2000•680

  @Mirjax2000Posted almost 2 years ago

  @vcarames your solutions is breath taking.

  where can i evaluate HTML rating?

  1

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @Mirjax2000

  Do you mean how to get the rating value?

  0

  

  Mirjax2000•680

  @Mirjax2000Posted almost 2 years ago

  @vcarames yes

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @Mirjax2000

  Give each input the name="rating" and for your JS use const rating = form.rating.value;

  Marked as helpful

  0

  

  Mirjax2000•680

  @Mirjax2000Posted almost 2 years ago

  @vcarames idont understand this css code for .visually-hidden { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; overflow: hidden !important; margin: -1px !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; } why not use display: none or opacity:0, or visibility:none

  and this code is briliant and i will steal it from you. body { display: grid; place-content: center; background: var(--Main-Background); background: linear-gradient( -45deg, hsl(0, 50%, 1%, 1) 0%, hsl(336, 58%, 14%, 1) 100% ); background-size: 300% 300%; animation: gradient 15s ease infinite; padding: 10px; }

  @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @Mirjax2000

  1. The code is for content that is meant to visually hidden but still accessible to screen readers and currently all those properties are currently the standard. Using display: none removes the content entirely. While opacity: 0 will hide it visually but you will have to take into consideration the space it takes up and position every single item that is hidden.
  2. Thank you 😄

  Marked as helpful

  0

  

  Mirjax2000•680

  @Mirjax2000Posted almost 2 years ago

  @vcarames i call it "black hole" technique. you took it sqeeze it to 1px send it out of universe and acces it in different reality.

  I rework my first attempt into new version over here, now its much more cleaner and js is simple.

  https://www.frontendmentor.io/solutions/interactive-rating-kuZsHOxqjo

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @Mirjax2000

  😂

  0