Frontend Challenge #12, Time Tracking Dashboard
Tags: devjournal, webdev, codepen, challenge
Published: 2022-01-15 02:54:46

This is my #12 frontend project from [Frontend Mentors](https://www.frontendmentor.io/home) and my first junior level project. It was a fun challenge relearning CSS Grid, the JavaScript Fetch API, and vanilla JavaScript to update the page.

The goal was to build this:

![Design preview from Frontend Mentors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvefn1ozb8ojjw6ecx4k.jpg)

## Step 1: Setup
![Preview of layout setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xk8lic6r90xf3hh3ftir.gif)

**My Takeaway**
The great thing about building lots of projects is you have a treasure trove of material to pull from when confused. I reached back to the “Stats Preview Card Component” project to get tips setting up CSS Grid.

**Teachable Moment**
Build habits as you code. My habit of starting every project by setting up CSS Variables, designing the general layout of the UI, and basic responsiveness allowed me to quickly complete the setup phase.

As you program small units of work, remember to commit that code to your repository. You want a trail of good code and clearly defined WIP moments when you stop coding.

## Step 2: Add content and UI elements

![Project with content but no styling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvo5p916yxi2zblziyrn.PNG)

**Takeaway**
I’m still confused on when to use the HTML section vs div. The past advice given to me has been to use a div if I’m only styling something and the semantics’ section tag if it means this is different from the rest. If you have any advice I would love to read it.

**Teachable Moment**
As you add UI elements, consider class names that reflect the content, functionality, or structure organization in an easy to understand manner.

## Step 3: Style the Profile Section

![Mash up of code and screen shot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0yf3z6asm0u2pv8r9kbs.png)
**Takeaway** 
The challenge for me was manipulating the unordered lists and its list items with CSS flex box and similar styles.

## Step 4: Style the Dashboards for mobile responsiveness

![Screen shot of the project's mobile responsiveness](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fgtdbg6cqkn0yixhad7.PNG)

## Step 5: Desktop design responsiveness and background images

![Screen shot of the project's desktop responsiveness](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysxxcpsc2u1vjqibdut4.PNG)

## Step 6: Functionality for Active state

![GIF of active state being use in the project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3479xzk9d5psnc59tf4.gif)
**Takeaway**
This was my first time using the CSS filter: brightness style to quickly highlight something. In this project, when a user hover over a dashboard the background color changes. 

## Step 7: Use JavaScript to update data in the dashboards based on the user clicking a time format

![Screen shot of functionality planning](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7yndcne9cbcywv0a2ip8.PNG)

**Takeaway** 
This was an opportunity to relearn the fetch API to retrieve data and practice massaging the data from a JSON object.

**Teachable Moment**
If you are manipulating data, take a moment to write out the inputs/output and how you plan on solving the problem. This can be followed by breaking parts of your plan into smaller functions (blocks). This process allows you to build, test, and integrate each function as you write it into the codebase.

## Step 8: Original Final Product

![GIF of project in use](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fs07blrohla9y7zxkcg.gif)

## Step 9: Accessibility

![Accessibility report screen shot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gu45c7zntpbaw6pm537a.png)
**Takeaway**
I’m a firm believer in learning in public. A few recommendations I received was to run an accessibility report to fix a few issues like color contrast ratios and to update to proper past tense of text in the dashboards.

**Teachable moment**
🧾 Before you start a project, plan for accessibility. 👓 Most importantly, after you have mock out the UI, test for accessibility issues. 🎓 A must do and final aspect of developing is to run your UI through a 3rd party accessibility tool. 

**Resources**
I used the free, informative, and super simple online tools:  
1. [WAVE](https://wave.webaim.org/)
2. [Chrome Lighthouse](https://developers.google.com/web/tools/lighthouse/#devtools)

## Step 10: New final product after public feedback

![Updated final screen shot of projec](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9yet6wofm4c6em0sxb1.png)

First, thank you to everyone who gave me feedback and to everyone who plans on giving me feedback in the future. I live by this proverb, "If you want to go fast, go alone; If you want to go far, go together". 

[Click here to play with the demo](https://jcsmileyjr.github.io/Time-Tracking-Dashboard/)
[Click here to view the GitHub repository](https://github.com/jcsmileyjr/Time-Tracking-Dashboard)

## Thank you for reading, let's connect:
Obviously, this isn’t a perfect solution. If you have any advice or criticism please leave a comment or send it privately via a DM.

Thank you for reading my learning journey and if you have tips, please DM me on [Twitter](https://twitter.com/JCSmiley4) or [LinkedIn](https://www.linkedin.com/in/jcsmileyjr/).