Skip to content

Latest commit

 

History

History
112 lines (86 loc) · 4.12 KB

README-template.md

File metadata and controls

112 lines (86 loc) · 4.12 KB

Frontend Mentor - Time tracking dashboard solution

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.

Table of contents

Overview

The challenge

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

Screenshot

Links

My process

Started out by design the HTML and the style into CSS. Realizing what would be better for it to be more like the design given, choose to use the Grid layout both outside of the cards(container) and inside each one, it was easier because of the responsive idea. It was design using a mobile first coding style, which was way easier after all to place everything. For the JavaScript part, I took a while to discover that was possible to access the data.json file with the fetch API, had to understand it a bit first to use it. Choose to separate the js files into the fetch one, that gets the data and all querySelectors, and the functions one, used the export/import to communicate one with the other. All the data that is into the data.json is placed into the HTML with javascript.

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow

What I learned

Learned about the Fetch API of JavaScript and could improve my understanding in CSS Grid.

.container {
  display: grid;
  align-content: stretch;
  justify-items: stretch;
  justify-content: stretch;
  align-items: stretch;
  column-gap: 5px;
  row-gap: 5px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas: "header main main main";
}
fetch("../data.json")
  .then((response) => response.json())
  .then((data) => {
    eventListers(
      data,
      nameTags,
      hoursCurrent,
      currentHrs,
      previousName,
      previousTime,
      previousHrs,
      daily,
      weekly,
      monthly
    );
    weeklyTagInitialValues(
      data,
      nameTags,
      hoursCurrent,
      currentHrs,
      previousName,
      previousTime,
      previousHrs
    );
  });

If you want more help with writing markdown, we'd recommend checking out The Markdown Guide to learn more.

Continued development

I do want to learn and use even more the Fetch API with outside data, besides improving even more in each individual CSS section.

Useful resources

  • CSS Tricks - This helped me use the grid style in different occasions, as well as align the items inside each grid created, awesome article.
  • MDN Docs - This helped me understand what a JSON file is and how to use it, unfortunately (in some way) they only teach how to use remote ones, which is awesome, but not for this project.
  • Youtube - This is an amazing video, which helped me use the local JSON file inside the project with the fetch API.
  • Youtube - This video helped me understand better the fetch API.

Author