https://github.com/sdkdeepa/time-tracking-dashboard
FE Mentor JavaScript challenge
https://github.com/sdkdeepa/time-tracking-dashboard
Last synced: 3 months ago
JSON representation
FE Mentor JavaScript challenge
- Host: GitHub
- URL: https://github.com/sdkdeepa/time-tracking-dashboard
- Owner: sdkdeepa
- Created: 2025-01-19T10:25:47.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-26T05:11:48.000Z (over 1 year ago)
- Last Synced: 2025-12-30T17:36:05.829Z (6 months ago)
- Language: HTML
- Size: 2.11 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-template.md
Awesome Lists containing this project
README
# Frontend Mentor - Time tracking dashboard solution
This is a solution to the [Time tracking dashboard challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/time-tracking-dashboard-UIQ7167Jw).
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Author](#author)
## 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
- Live Site URL: see the github deployment section.
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- [React](https://reactjs.org/) - JS library
- [Next.js](https://nextjs.org/) - React framework
- [Styled Components](https://styled-components.com/) - For styles
### What I learned
To see how you can add code snippets, see below:
```html
Some HTML code I'm proud of
```
```css
.proud-of-this-css {
color: papayawhip;
}
```
```js
const proudOfThisFunc = () => {
console.log('🎉')
}
```
### Continued development
Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect.
### Useful resources
- [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
- [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.
## Author
**Frontend Mentor - [@sdkdeepa](https://www.frontendmentor.io/profile/sdkdeepa)**