This is a solution to the Time tracking dashboard challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Switch between viewing Daily, Weekly, and Monthly stats
- Solution URL: on Frontend Mentor
- Live Site URL: On GitHub pages
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Plain Javascipt
- Mobile-first workflow
I chose to use Radio buttons for the Daily/Weekly/Monthly selectors and style them accordingly which simplified the JS logic a lot. I had originally intended to use a styled list but think this is better.
I'm generally happy with the JS and think its quite clean and straight forward.
The time data is taken live from the JSON file, and I enjoyed parsing that and filtering the data depending on which period is selected.
Styling was quite fun too, and getting the cards correct was more difficult than it seemed at first glance. I styled mobile-first, and after that the desktop version was very easy.
- Stack Overflow - Colouring the ellipsis SVG on hover was a pain, SVG loaded by IMG tag cannot have its color set by normal means (inline SVG can, but I didn't want to add the SVG to each card manually). Solution 3 on this answer helped me to do it using CSS filters. Note that using a lot of filters like that could cause performance issues on large projects.
- Website - Grant Ramsay
- Frontend Mentor - @seapagan
- Twitter - @gnramsay_dev
Shout out to @ApplePieGiraffe for pointing out in comment to one of my previous challenge solutions that Radio buttons can simpify things when you only want one of many options active. Prevoiusly I'd have used a styled list and then needed extra JS to handle the states.