Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 11 months ago

Responsive Dashboard with CSS Grid, Flexbox, and JavaScript

P
Austin•430
@astnio
A solution to the Time tracking dashboard challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


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

I decided to change things up in a few different ways for this project.

The first thing I did differently was that I did not use the images completely as they were. I noticed that the images given all had preset colors, based on the background color of its category. I didn't think this was very flexible if the user wanted a new background color or a different image, so I configured images to use a combination of CSS filters so that they instead dark the area of the background they are on. This allows them to be a tint of the background, like their original color, while allowing it to be flexible enough to use any image on any background while keeping it looking good.

The second thing I did was add more properties to the JSON data. This was mostly so that I could utilize this information for how I setup my JavaScript.

For my JavaScript, I wanted to create a system that was expandable. I also tried to keep my code concise by splitting it into 5 main files:

  • fetchData.js is just to get data from my .json file
  • categoryCard.js is a class that helps me model my categoryCard objects
  • categoryCardsManager.js reads the data from fetchData.js and instantiates a the categoryCards, and puts them into an object that is exported
  • elementMaker.js is just used to create an HTML element to append to the main document, however it is used as a property for each categoryCard
  • main.js is where I setup the buttons and begin appending the card elements to the main page

I think the way this is setup is nice, because each categoryCard contains the information for its own element, which is appended to the main page. This makes it easy to change the info on everything at once, as my function for updating info is based on the categoryCard class, which also has its own info from the JSON file it was made from.

This means that in my main file, I can just loop over my primary list of time cards, and call their functions to update. This was easy to do as there are only 3 buttons (daily, weekly, monthly) which just changes the hours and labels to match the information already given in the JSON file.

The design works well too. Since I am using grid, having more than 6 items actually doesn't look too bad, as they simply wrap down to the next row, leaving everything else perfectly fine. Mobile works fine too as it just makes the column longer.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • yahappylemon•170
    @yahappylemon
    Posted 11 months ago

    Your work is impressive, it's flexible and expandable. Also, I like the way you manage your js code by using the concept of components.

    Maybe you could add a loading message to inform the user in advance, since it will take some time for the browser to fetch data and render the DOM!

  • Temesgen Adane•510
    @temesgen-982
    Posted 11 months ago

    I didn't knew you were supposed to make the actual card elements using Javascript. I had them already on my HTML and I only uploaded the values. Anyways I think you made a good solution.

    [Edited]

    I was having a look at your code and I downloaded the .zip file from the repository and when I run it on vs code live server it doesn't work and it only shows the <header>

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub