Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Results Summary Component: JS/jQuery + Interactive Animation/Content

P

@jguleserian

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Friends:

In addition to the Frentend Mentor challenges, I also wanted to practice some additional, advanced skills.

  • Use JavaScript to generate new scores randomly on the fly (but not to go below a score of 50)
  • Use jQuery to replace the old scores with new ones, including the average of those scores
  • Use jQuery to replace the feedback text to the user
  • Use jQuery and CSS to create an animation effect to simulate a "calculating" of new scores
  • Research and practice a new method of organizing my CSS stylesheet. In this case, i chose GPS (Global, Page, Section)

I originally chose this project because it looked interesting, was new, and had some potential for practicing JS. The challenge met my expectations, and I enjoyed working on getting the timing, spacing, etc. down. Primary areas of learning for me were:

  • incorporating custom animations with my other JS code
  • practicing converting and working with .json files in JavaScript
  • CSS: using conical gradients and using them for animations
  • Researching and trying out a new organizational method for my CSS stylesheet (still in the early stages)

If you get a chance to take a look at the project, let me know if you:

  • like my random test score generator
  • my animation effects
  • notice anything helpful with respect to best practices, professionalism, etc. (don't judge my structure just yet :) I actually went back and restructured it after I finished the project)

Thank you all! Best wishes!

Jeff

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord