Your challenge is to build out this time tracking dashboard and get it looking as close to the design as possible.
You can start by recreating the design in Figma (optional but recommended as it can help with finding correct dimensions and colors quicker when coding)
Use the following tools:
- Grid to place the 7 large containers in desktop view.
- Higher order methods for looping.
- Media Queries to change between desktop and mobile view.
We have provided an object array with all of the data required in the app.js file.
Your 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
- The text for the previous period's time should change based on the active timeframe. For Daily, it should read "Yesterday" e.g "Yesterday - 2hrs". For Weekly, it should read "Last Week" e.g. "Last Week - 32hrs". For monthly, it should read "Last Month" e.g. "Last Month - 19hrs
Your task is to build out the project to the designs inside the /design folder. You will find both a mobile and a desktop version of the design.
You will find all the required assets in the /images folder. The assets are already optimized.
You may use the provided image of Jeremy or replace it with one of yourself 😎
There is also a style-guide.md file containing the information you'll need, such as color palette and fonts.
- Link to your GitHub repo
- Link to the Github pages
- Link to Figma file (optional)