Interactive rating card with Flexbox

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • This LINK is a heading ⚠️ so it needs to wrapped in a heading element.

  • 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/

  • Unfortunately, the HTML for the ratings needs to be rewritten as it was done incorrect ❌:

  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.

  Here is how it looks like fully implemented: EXAMPLE

  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

  ---

  

  Derek Harnett•130

  @harnettdPosted almost 2 years ago

  @vcarames

  Thanks for the detailed feedback. Now that you mention it, it seems that I did indeed use javascript to re-invent the wheel and make radio buttons. I'll re-do that portion of the html and use radio buttons within a form instead.

  0
• 

  Sandro•1,150

  @sandro21-glitchPosted almost 2 years ago

  Hi Derek👋

  Yes, you can add a circular border to an element with an irregular shape by using the "clipping" technique.

  To do this, you would create a parent element with a circular shape and set its overflow property to "hidden".

  Then, you would place the element with the irregular shape inside the parent element, so that only the part of the element within the circular boundary is visible.

  Here's an example:

  .parent { width: 200px; height: 200px; border-radius: 50%; overflow: hidden; }

  .child { width: 300px; height: 100px; }

  <div class="parent">

  `<div class="child">`This element has a circular border!`</div>`
  

  </div>

  In this example, the parent element creates a circular shape, and the child element is clipped so that only the part of it within the circular boundary is visible.

  Good Luck

  Marked as helpful

  1

  ---

  

  Bernardus•1,095

  @BernardusPHPosted almost 2 years ago

  @sandro21-glitch If you add a

    display: flex;
     justify-content: center;
     align-items: center;
  

  on both the parent and child then whatever is in the child, like your example, would be centered in the circle.

  Or is there a better way to center it?

  Marked as helpful

  1

  

  Sandro•1,150

  @sandro21-glitchPosted almost 2 years ago

  @BernardusPH

  Yes, using display: flex with justify-content: center and align-items: center is a common way to center elements both horizontally and vertically within a parent container.

  However, there are alternative methods to achieve the same result, such as using display: grid or using CSS margins in combination with absolute positioning. The best approach depends on the specific requirements and context of your design

  2

  

  Derek Harnett•130

  @harnettdPosted almost 2 years ago

  @sandro21-glitch

  Thanks for the suggestion of using overflow: hidden to put a circle around an element that's not necessarily square. I'll use this technique in my revisions.

  0

  

  Derek Harnett•130

  @harnettdPosted almost 2 years ago

  @BernardusPH

  Yes, this sounds right. I'll incorporate this into my revisions as well. Thanks.

  0