Results Summary using html/css/js

Community feedback

• 

  chill31•190

  @chill31Posted over 1 year ago

  Great work on loading the score from JSON, but looking at the project, there are a few style issues I found:

  • The 2 columns' sizes are too big compared to the challenge design, and it causes issues in the responsiveness
  • The circle in where it shows 76 of 100, the font weight and the of 100's colors don't match
  • The font weight of the individual scores are a little too much, and should be reduced to the ones given in the style-guide.md file.
  • The continue button does have a hover state, but the same state is not visible when focused, and only a default outline is shown, so consider adding a focus state also on the button.
  • the button's hover state has the wrong colors, as far as I remember, it was supposed to be a gradient, and your design only shows 1 color.

  These issues are very minor and do not cause any problems in desktop or mobile, but the main issue to fix is:

  • in mobiles, the design is not as good in desktop, and the columns are overflowing from the x axis.
  • the @media queries are not set up properly and in some tablet devices, the design is neither mobile's queries, nor desktop queries, so consider fixing this.

  The font weights I mentioned above do not make any difference so it's not really a issue, but consider fixing the styles on mobile and some tablets.

  Marked as helpful

  1