All solutions

Input range has it's limitations for styling. Decided to investigate how I could work around this with event listeners. I managed to make an agnostic range slider. This was the most difficult.

I'm a little confused about conditionals. It seems I'm not covering all cases. It's not too worrisome, since it works properly.

Curious as to how I can use my agnostic slider as a class component.

Organization was very difficult.

There are many things I would do differently:

• remove classes and rely more on selectors and attributes
• use background-image more (images are usually static, like CSS)
• rely on a ui.js and only use index.html for the main item/page
• use data-attributes to manipulate dynamic div's (numbering classes does not work well)
• maybe use IndexedDB next time, but it wasn't necessary here

The general organization seems chaotic. Some variables could be made global but I had issues passing them into sub-functions and using them in there.

Is there a better/simpler way of destructuring or manipulating NodeList's?

Not too difficult. Good practice regardless. I'd like to be able to validate entries on keydown but the input field kept locking.

Well rounded activity with many quirks to iron out. Things that need work are the color structure, especially for theme change. Next time I will use embedded SVG instead of pointing to img/url for color changes, since filter property is not consistent enough. Next time will use attributes on html as this can simplifies JS.

Any comments or clarification welcomed.

JS structuring was difficult. I realized that getting fetch data outside of the fetch function scope is not so straight forward. Its possible to simplify the JS code more.

Not so difficult. Getting the sizes the same as the mock up perhaps. Margin spilt over somehow, I think it's from line height. Didn't standardize padding or typography, lacked planning. I think I can improve image sizing when changing window sizes.

Problems changing the color on SVG for the hover effect. Will use background-image next time. Liked using clip-path effect.

Difficult to rely only by responsive means. Using grid gets complicated when you revisit it. Fixing images with absolute was also tedious, as well as the typography.

I feel the code could have been simplified if I had strategized for responsiveness. Padding was a little inconsistent.

Couldn't get that first curve to stay fixed relative to the phrase. I'm not sure how to do that.

Happy to be able to use calc and browser dev tools to center text perfectly. Remembering JS was a challenge.

What are good conventions for naming JS variable vs JS functions? It would be nice to differentiate them by name rather than by brackets or code color.