Frontend Mentor - Time tracking dashboard solution

Table of contents

• Overview
  • The challenge
  • Screenshot
• My process
  • Built with
  • What I learned
  • Continued development

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

My process

Built with

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

What I learned

I learned about using media queries along with the property grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)) to ensure that the articles cover the entire container on screens larger than 550px. Additionally, I used the pseudo-selector :not() to apply styles while excluding a specific element.

  @media (min-width: 550px ) {
      main{
          grid-template-columns: repeat(auto-fit ,minmax(13em,1fr));
          max-width: 90%;
          width: 62em;}
      article:not(.articleUser){
              height: 13em;
              .timeframesDiv{
                  grid-template-columns: 1fr 0.3fr;
                  padding-bottom: 1em;
                  small{
                      grid-row: 3;
                      justify-self: self-start;
                  }
              }
          }
  }

To retrieve JSON data, I used the fetch API. To streamline the code and enhance maintainability, I implemented several helper functions. These functions were designed to handle repetitive tasks and improve overall code efficiency.

fetch('data.json')
    .then(response => response.json())
    .then(data => showContent(data[0]));

function changeColor(target, options){
    target.style.color = "white";
    options.forEach(option =>{
        option.style.color = "hsl(236, 100%, 87%)";
    })
}

Continued development

- JavaScript Best Practices: Improving JavaScript code readability and performance by refactoring and leveraging ES6 features like template literals and destructuring.

- Integrating APIs: Fetching and displaying data from external APIs to create more dynamic and interactive web applications.

These areas will help me build more sophisticated, user-friendly, and performant web applications.