Interactive Rating Component (HTML + CSS + JS)

Community feedback

• 

  Venus•1,640

  @VenusYPosted 9 months ago

  Very good work! The functionality works well and you almost nailed the layout and design of the site.

  There are a few minor changes that could be made though.

  I noticed that the font doesn't match the one in the design. You can download or link/import the font from this website, which is full of fonts provided by Google: Overpass - Google Fonts. The one I linked is the one that's used in the design mockups.

  I saw that you're using position: absolute; with top, bottom, and transform to center the card on the screen:

  .container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  

  While this method works on large screen sizes, on screensizes where the card is too large to fit on the screen all at once, parts of the card get cut off, which hinders the usability and user experience of your site.

  To fix this, you could add this to your code:

  body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 50px;
  }
  

  min-height: 100vh; sets the minimum height of the body element to 100vh, but allows it to expand if necessary.

  display: flex;, justify-content: center;, and align-items: center; places the card in the center of the viewport.

  position: relative; makes it so that the .attribution element, which has been given the property of position: absolute;, is positioned relative to the body element.

  Finally, I added some padding to the body element as whitespace is good for improving visual balance.

  Make sure to remove the position: absolute;, top: 50%, left: 50%, and transform: translate(-50%, -50%); properties from the .container element if you decide to use this method instead.

  Other than that, this solution is great!

  Hope this helped! :)

  Marked as helpful

  0

  ---

  

  andrewras58•50

  @andrewras58Posted 9 months ago

  @VenusY Thanks for the feedback! I looked back at my code after you pointed out the font that I had a mixup between the CSS and HTML files lol. I tried out your new version for the body positioning and it's really nice. I haven't been trying to squish my browser windows to check on how the page looks but I'll make sure to use your method and try it out on new projects.

  1

  

  Venus•1,640

  @VenusYPosted 9 months ago

  @andrewras58 No worries! I'm glad I could help.

  Also, good luck with your future projects! And yeah, it's always a good idea to get in the habit of checking for those weird edge cases where your project might not look the way you intended it. :)

  0
• 

  P

  markus•2,250

  @markuslewinPosted 9 months ago

  Hi! #id raises "specificity" in CSS, which'll make that rule more difficult to override when you need to. It's better to use classes for styles when possible, and use IDs to link elements together, for example:

  <label for="the-id"></label>
  <input id="the-id" type="radio" />
  

  If you specify the width and height of the SVG inside the viewBox attribute, you can change the size with CSS:

  <!-- Remove `width` and `height` -->
  <svg viewBox="0 0 17 16"></svg>
  

  The design uses a radial-gradient() for the background instead of a linear gradient. I think that's why it looks slightly different.

  Good work!

  Marked as helpful

  0

  ---

  

  andrewras58•50

  @andrewras58Posted 9 months ago

  @markuslewin Thanks for the feedback! I finally realized that first point when I started to write my JS file and had to go back and change classes into ids. I haven't seen that label tag before though so maybe I'll see what I can do with it in a future project. Also I remember experimenting a bit with the other gradient types for the design but couldn't figure out how to get the darker shade to spread outward from the top of the screen.

  1

  

  P

  markus•2,250

  @markuslewinPosted 9 months ago

  @andrewras58 Yeah, it can be convenient to use IDs as hooks for the JS, but it's good to take a different approach for the styling.

  The radial gradient can take a position as a parameter, so radial-gradient(circle at center top, black, white); will position the circle at the top!

  0