All solutions

I wanted to get my hands on Styled Components so I decided to do this project as it seemed like a good project to do it with.

I decided to also make loading skeleton for the page to use some more Styled Components. Therefore I made the page simulate loading with a random wait time from 1 - 3 seconds.

This is my first time using Styled Components and css grid(used for the whole dashboard and each activity panel) so if You see any way to improve it (or anything else), I will be grateful for Your feedback.

For this challange I decided to practice pure JavaScript since I havn't used it much lately as I've been using React for majority of my recent projects. For CSS I used LESS because I just wanted CSS but with some quality of life features.

The application actually doens't work nicely on mobile devices. It works just fine in my mobile Chrome browser but in other mobile browser(Safari, Samsung Internet) I tested it in, it had some issues. I will have to educate myself on debuging and testing web applications for different mobile browser so if someone got some nice resources or useful apps to recommend I would appreciate it!

Optional features:

• The score doesn't save to local storage since I don't want to save this piece of data to everyone opening this page.
• 5 variants version just seemed too similiar to 3 variant without any new features. I might implement this in the future if I ever feel like doing this challange with different approach.

As per usual; I will be grateful for any feedback!

One of the possible improvment I thought of is to load or display the later parts of the list when it's necessary (when scrolled to it) and I plan on doing some research on this and how it affects the performance. So if someone got some reading materials about that that he could provide to me I would be grateful.

Any feedback is welcome. I noticed that at some resolutions the moving part of the counter makes slight (like 1px) move to the right for the duration of the animation (Opera browser), which I assume is side product of rendering "transform: rotateX()", is that correct? If so, is there an easy way to control/fix how it renders?