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: See Solution;
• Live Site URL: See site;

My process

Built with

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

What I learned

I learnt a lot, of which most are listed below; I learnt:

• How to use custom data-* attributes.
• How to fetch data and the syntax for it.
• How to use and manage the data.
• How to populate the DOM with my data.
• How to handle JSON.
• How to breakdown complex functions into smaller functions.
• How to loop through data.

Here are some code snippets I'm proud of:

/*CSS I'm proud of*/
		.current {
			display: none;
			font-size: var(--FS-38);
			font-weight: 300;
			margin-top: 10px;
			
			@media (width >=calc(600 / 16 * 1rem)) {
				font-size: 48px;
			}
		}
		
		.current[data-active] {
		  display: inline-block;
		}
		
		.previous {
			display: none;
			color: var(--C-CONTENT-TEXT);
			margin-top: 10px;
			
			@media (width >=calc(600 / 16 * 1rem)) {
				font-size: 13px;
			}
		}
		
		.previous[data-active] {
	  display: inline-block;
	}

<!--JS I'm proud of:-->
  function titleToImageSrcValue(title) {
	return 'images/icon-' + stringToSelector(title) + '.svg'
}
const moreIcon = document.createElement('img')
 	moreIcon.setAttribute('src', 'images/icon-ellipsis.svg')
 	moreIcon.className = 'more-icon'
	
 	activityTop.append(moreIcon)
	
 	activitySection.append(activityTop)

Continued development

I'm going to continue developing my handling of the DOM and the breaking down of complex functions into tinier function

Author

• Github - Triple K
• Frontend Mentor - @triplekdev
• Twitter - @3plkk

Acknowledgments

I want to specially thank Surasek, his solution on this exact project gave me the idea of how to start my own JS and made me do a lot of research thereby, increasing my knowledge of JS.