xvferdy / fem-time-tracking-dashboard

Time tracking dashboard || Frontend Mentor 🥈 JUNIOR...

Time tracking dashboard

🔖 This is a solution to the Time tracking dashboard challenge on Frontend Mentor.

🌈 ✨ 🎉 Have Fun Building! 🚀 🎊 🎈

🖥️ Welcome
Thanks for checking out this front-end coding challenge. Frontend Mentor challenges help you improve your coding skills by building realistic projects. To do this challenge, you need a basic understanding of HTML, CSS and JavaScript. Press Enter 🚀 to start the game!!

📍Table of Contents

• Brief
• The challenge
• Links
• My process
• Built with
• What I learned
• Difficult Things
• Author

Brief

A perfect opportunity to practice your CSS Grid skills. For anyone wanting to take it up a notch, we provide a JSON data file to practice working with data.

This challenge is perfect if you're looking to test your CSS Grid chops. Even without Grid, this project will be a fun one to help you practice your layout skills! Your challenge is to build out this dashboard and get it looking as close to the design as possible. You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go 👍.

If you would like to practice working with JSON data, we provide a local data.json file for the activities. This means you'll be able to pull the data from there instead of using the content in the .html file.

Preview 👓

The challenge

Users should be able to:

Challenge	Newbie	Junior	Intermediate	Advanced
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		⭕

Links

• Solution URL: Here
• Live Site URL: Here

My process

⌛ I challenge my self to finish this for ~3 days
▐
🧑‍💻 Day 1. Folder structure & basic Sass boilerplate ~2 hours
▐
🧑‍💻 Day 2. HTML skeleton ~2.5 hours
▐ _{Plus starting making a very basic layout using grid}
▐
😭 Day 3. Javascript day
▐ _{Working with JSON file ~4 hours}
▐
🌐 Day 3. Submit to Frontend Mentor 🚩
▐ _{Add some CSS for coloring ~3 hours}
▐
🗓️ Day 4-5. Continuing incomplete design
▐ _{Try to fix buggy style ~6.5 hours}
▐ _{Responsive design ~3 hours}
▐ _{Tried to figuring out how to add animation ~1 day}
▐
🗓️

Built with

• React

What I learned 🥳

Learn how to change background opacity without affecting text. 👉 rgba($color: #000000, $alpha: 1.0)

src/stylesheets/components/_card.scss

&__content {
  margin-top: 21px;
  background: rgba($dark-blue, 1);
  height: 80%;
  width: 100%;
  position: absolute;
  bottom: 0;
  &:hover {
    background: rgba($dark-blue, 0.5);
  }
}

Difficult Things 😵‍💫

Things were difficult for me and I finally gave up 🤙

• grid
• Mobile view

Author

Berlianto

To Top ✪