Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 3 years ago

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

jquery
P
Jeff Guleserian•500
@jguleserian
A solution to the Results summary component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

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

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Jeff Guleserian's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License