Submitted 6 months ago

Responsive Time Tracking Dashboard with CSS Grid and Flexbox

NancyZonneveld•20

@NancyZonneveld

Preview site View code

This is a solution for...Time tracking dashboard

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I like the way it's very responsive. There is a mobile, tablet and desktop version. And for big screens the whole grid is centered (horizontal and vertical). The cards have a dynamic width.

There is also a subtle animation when you hover over a card.

The grid is also dynamic, so you can add more activity cards in the HTML, but it would only look good with an even amount of cards. It would be cool to make some code to change the layout based on the number of cards.

I'm not very comfortable with JS yet, so the data is not loaded from the JSON file. Would like to learn that in the future.

What challenges did you encounter, and how did you overcome them?

Challenge 1: For the desktop version I wanted to center the complete grid horizontal and vertical. I found this great solution: https://www.joshwcomeau.com/css/center-a-div/#centering-within-the-viewport-3

Challenge 2: For the medium screensize (>=690px) I wanted the profile card (first) to be same with as 2 other cards. Span column 1 and 2 wasn't enough because of the dynamic width of the cards. The first column of cards should be at the left and the second column of cards at the right. Someone helped me with this solution:

.card:nth-of-type(even) { justify-self: left; } .card:nth-of-type(odd) { justify-self: right; }

Challenge 3: Getting the icon behind the purple info container was also difficult. Just using Z-index wasn't enough. Position relative was needed.

What specific areas of your project would you like help with?

I would like to learn how to get data from a JSON file in the future, a link to a good tutorial would be helpful.

Community feedback

Nature Son•1,100

@NatureSon22Posted 6 months ago

To retrieve data from a JSON file, you typically use the fetch API in JavaScript. Here’s an example implementation using async-await, which is more readable compared to other methods you might encounter.

async function getData() {
  try {
    const response = await fetch('path/to/your/data.json');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

getData();

For more information, you can refer to MDN Web Docs

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord