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: Github Repo
- Live Site URL: live site
- Semantic HTML5 markup
- CSS custom properties
- SASS
- Flexbox
- CSS Grid
- Mobile-first workflow
- ReactJS
this challenge was a good way to practice SASS and SCSS and also I learned about its limitations. still, by now, I prefer CSS and its custom properties more. also, it was good practice for my CSS grid knowledge, and watched a couple of videos about it.
I hope I can write a more concise and also shorter code for this kind of application, it's not that hard, and also it was tricky because I tried to DRY as much as I can but in the end, I could do what I wanted to. for example i don't know yet how to replace an addressed directory of an array with our state
const directory = data.timeframes.daily.current;for example, I wanted to change the directory when our state changes and just replace "daily" with our new state. but I wasn't able to do that yet. hopefully ill find another way around it.
- Website - @comendrun
- Frontend Mentor - @comendrun
- Twitter - @comendrun