Responsive results component with dynamycly added data (html,css,js)

Community feedback

• 

  Umair Shah•210

  @nicefellow1234Posted 11 months ago

  You have simply not made any work in there. Please complete the challenge and then submit the solution.

  0

  ---

  

  Eugenia Antonova•400

  @EugeniaAntonovaPosted 11 months ago

  @nicefellow1234 i have had problem with paths, so the website did not work correctly, which i didnt see at first. there was quite a work done =)

  i would appreciate you to check once again.

  i have also tried to work, using rems and ems, defining deafult font size for html so that component would have resize on their oun just when i change this font size

  1

  

  Umair Shah•210

  @nicefellow1234Posted 11 months ago

  @EugeniaAntonova Thank you for fixing it. It's showing up now. Good job! Keep submitting more and more solutions! Welcome to Frontend Mentor! :)

  0

  

  Eugenia Antonova•400

  @EugeniaAntonovaPosted 11 months ago

  @nicefellow1234 thank you for your feedback! I would really appreciate if you could look up my code and give any advise =)

  0

  

  Umair Shah•210

  @nicefellow1234Posted 11 months ago

  @EugeniaAntonova Sure, the following things come to mind when I looked at it.

  In terms of design:

  • The section on the left side with blue background is actually a gradient from top to bottom with two different colors in the design
  • I don't think that the font family matches with the design I can see you have imported the font family and also applied but I didn't see the fonts getting loaded because the paths for the font family seems to be broken, I would suggest to use third party google fonts provided import link for more easiness if you are finding it hard to work with paths.

  In terms of coding:

  • You should explore Tailwind CSS and start using that for further easiness, it is a very good tool to make use of in frontend designs because it ultimately gives you control over designing each and everything.
  • I also saw that you used JS in the solution when there was no need for it because simply what you did in JS could be simply done in CSS so there is no need for it. Make sure to avoid using JS too much where it can be avoided because ultimately browsers don't like too much JS and it also makes your website heavy for light devices where it can be quite slow in interactivity due to compiling all of the JS.

  I hope these will help you.

  Thanks

  Marked as helpful

  0

  

  Eugenia Antonova•400

  @EugeniaAntonovaPosted 11 months ago

  @nicefellow1234 Thank you for the feedback! I would only argue that getting data from json file and counting result is hardly possible with css. Also i used js to give users opportunity to use my "button" with "Enter", otherwise, as it is actually a link, user would not have that option

  0

  

  Umair Shah•210

  @nicefellow1234Posted 11 months ago

  @EugeniaAntonova I see you have stored the the summary section scores in a json file so that's why you had to do all of these things to render the data but what I was referring to is the hover effects which can simply be done in CSS.

  Also if your intention was to create it as a proper app then surely you can use React.js to do it especially you should create it as a proper Next.js app.

  Although it is good to do it this way but the challenge did not have any requirement for using JS in there. You should put good use of JS skills in challenges where JS is required.

  0