Interactive Rating Component: HTML, CSS, JQuery, JavaScript

Dear Community:

While the structure and design of this project was fairly straightforward, I knew I wanted to do it to see if I could make rating system on my own. It turned out that it was easier than I thought - and a lot of fun. The jQuery sure make the solution quick and easy as well.

As I structured my HTML, it occurred to me that my choices here would have a strong bearing on how I would code the interactivity in the JS. For example, would I treat this as a form with a formal "submission" at the end or as just a series of independent objects that held a value (eg. <button> or <li> or <input>, etc.). In the end I elected for a bit of each so I could practice both techniques.

Additionally, because the project was fairly small, I elected to increase the feedback to the user beyond what was asked for (see the README.md file). In all, I created:

• hover state for rating elements (required)
• hover state for submit button (required)
• active state for rating elements (required)
• keeping the active state active until the user pressed the submit button (personal challenge)
• clearing the button choice if the user changed their mind (personal challenge)
• preventing submission of a rating until a rating button was clicked (personal challenge)

Please take a look at my solution if you have a few minutes. I always love feedback on organization, clarity, succinctness, professionalism and best practices, accessibility, etc. If you know jQuery, you can also let me know what you thought of my solution. If you don't know jQuery, you'll still recognize the code since it shorthand JS.

Thank you taking your time to help me improve. Any constructive criticism is welcome and appreciated.

My best to all of you!

Jeff