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
  • Screenshot
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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

What I learned

I learnt quite a few things actually, the most important one being how to fetch data from an API (well the process is same as of fetching a local json file) and then changing the DOM based on that data.

This function below is what i'm the most proud of:-

function updateDOMwithData(json, timeframe) {
  const container = document.querySelector("#grid-container");

  // getting the profile element
  const profile = document.querySelector(".profile");
  // then clearing all stuff
  container.innerHTML = "";
  // inserting the profile element
  container.insertAdjacentElement("afterbegin", profile);

  // inserting all the cards according to the data given
  json.forEach((element) => {
    container.insertAdjacentHTML(
      "beforeend",
      `
    <div class="card ${element.title.replace(" ", "-").toLowerCase()}">
      <div class="card-content">
        <div class="card-top-bar">
          <div class="card-title">${element.title}</div>
          <img class="ellipsis" src="./images/icon-ellipsis.svg" alt="ellipsis">
        </div>
        <h1 class="card-time">${element.timeframes[timeframe].current}hrs</h1>
        <p class="subtle">Last ${
          timeframe === "daily"
            ? "day"
            : timeframe === "weekly"
            ? "week"
            : timeframe === "monthly"
            ? "month"
            : "error"
        } - ${element.timeframes[timeframe].previous}hrs</p>
      </div>
    </div>
    `
    );
  });
}

Continued development

Working with APIs will be a must to stay in this field... so yeah i'll probably keep focusing on that in my future projects.

Author

• Website - !MAD!
• Frontend Mentor - @iMADi-ARCH
• Twitter - @iMADi69235681
• LinkedIn - Aditya Nandan

Acknowledgments

Ty to Vatsal for helping me :) Go follow em.