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.
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- Website - Umesh Sharma
- Frontend Mentor - @Omeshcoding
- Twitter - @Omesh_Sharma
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
-HTML
- I set up the Html sections of the project .
- CSS
- Now while coding CSS I had to build 7 components so I start with 1 main component and as other six componets are the same I created one of those. After competing one it was easier to make other 5 as they had the same styling.
- then I build desKtop first using grid , after completing it I switched the destop first to mobile, this approach helped me to write less code.
- I built the mobile reposniveness using Flex-box;
- javaScript
- I fetched the data from the json file using the fetch method inside async function.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- How to use grid area to make the layout of the dashboard.
- How to position an image at any position of the container using background-position.
- How to get data from a local JSON object, method like fetch and how to use async functions check for errors if any. To see how you can add code snippets, see below:
<div class="icon">
<h2 class="option-icon">Work</h2>
</div>
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-areas:
'a b c d'
'a e f g';
}
.icon .option-icon {
background-image: url(./images/icon-ellipsis.svg);
background-repeat: no-repeat;
color: none;
background-position: top 0.5rem right 10%;
}
async function getTime() {
const response = await fetch('./data.json');
const dataArray = await response.json();
return dataArray;
}
I would to focus on the css grid and it's properties as it has many in future more as it can make good layouts. I would focus on async function and dealing more with JSON objects using api's.
- Example resource 2 - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.
- Frontend Mentor - @4002-Nonye His javaScript code gave me an idea of how to fetch data from local Json object.