Strength: 0
Speed: 0
Challening parts
The algorithm to write this slider system was the boggest challenge. Making sure the two slider values, total points value and points left value are all in sync. Initially, my points left value and sum of the slider values were async by 1, because of how I was changing the state. The state was lagging behind.
Things I learned here
I wanted to change the color of the sliders. I found that property 'accent' is responsible for changing the color of the handle, the thing we drag/slide. I set the handle color to red and blue, respectively. Then I noticed that now my two sliders have a different track color, the thing we slide the handle through. Turns out, the OS/Browser automatically choose the track color based on the color of the handle. So, the red slider here has a white, light tracker because the os/browser considers my red handle dark, so the track must be the opposite. Blue is considered light, so the track is dark gray.