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
  • Links
• 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

Links

• Solution URL: solution
• Live Site URL: live site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Utilities Classes
• Flexbox
• CSS Grid
• Mobile-first workflow
• BEM
• Javascript modules

What I learned

Through the development of this challenge I learned:

• Import a json or get the json by performing a fetch in javascript

   import json from '.data/data.json' assert {type:'json'};

   async function fetchJson() {
    return fetch("src/data/data.json")
   .then((res) => res.json())
   .then((data) => data);
 }

• Use a tagged template to generate a string containing Html elements.

    function html(strings, ...keys) {
    return function () {
    const temp = strings.slice();
    keys.forEach((key, i) => {
      temp[i] += key;
    });
      return temp.join("");
      };
    }

• Import and call the tagged function in the index file like this.

      const template = html`
      <article class="card">
        ........
      </article>
    `(data);

• Convert a string template to a dom node to then add it as a child to the parent node.

    const node = new DOMParser().parseFromString(template, "text/html").body.firstElementChild;
    parentNode.appendChild(node)

Continued development

Note that the use of import assertions only works in browsers with support it and at the time this challenge was finished is not supported in firefox. So if you run this code in firefox the user experience will be bad instead I recommend using google chrome or Microsoft Edge in its latest updated version.

Taking into account the above I just updated this repository and changed the use of import assertion and only use fetch to get the data from the json file.

Useful resources

• import-export-javascript
• Import-assertions
• tagged-template
• Dom-parser
• fetch-with-Json

Author

• Linkedin - luismachaca
• Frontend Mentor - @luismacode
• Twitter - @luismacode

Acknowledgments

At some point while I was developing, I stopped moving forward and got stuck and I felt that I needed to learn another way to face this challenge I happily found this CodingTube youtube video that was of great help to advance and finish this challenge, as well as free resources on the internet to review concepts in javascript.