Submitted 20 days ago

Time tracking dashboard

#sass/scss

daniel•205

@danielashjari

Preview site View code

This is a solution for...Time tracking dashboard

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud of...

my js file, it was my first time working with promises and json files
my design got better and closer to the given task
using svg in more responsive way

Things I'd do differently...

use aria variables
use libraries and frameworks but i gotta get there first

What challenges did you encounter, and how did you overcome them?

how to show data from json file in my html -> use promise and async functions

async function populate() {
    const requestURL = "dist/js/data.json";
    const response = await fetch(requestURL);
    const data = await response.json();
    dailyBtn.addEventListener("click", () => {
        populateDaily(data);
    });
    ...}

function populateDaily(data) {
    data.forEach(item => {
        ...
        time.innerHTML = `${item.timeframes.daily.current}hrs`;
        lastTime.innerHTML = `Last Day - ${item.timeframes.daily.previous}hrs`;
    });
}

What specific areas of your project would you like help with?

in styles mostly and how to center vertically

Community feedback

py-code314•430
@py-code314Posted 18 days ago
Hello,

Congrats on finishing this project 🎉. I like that you added tablet design too for the project 👏🏼

I have a few suggestions hopefully can improve your project

FUNCTIONALITY

On page load cards are empty. Here you might want to populate the cards with daily stats on page load so that user can understand it better

At some screen size widths there’s no gap between dashboard and sides of the page. You can add some padding to body so that it looks better on every screen size

Add styles to the active button for visual clarity. They all look the same right now even user clicked a particular button

You might want to change the sentence from ‘Last Day’ to ‘Yesterday’ as that makes more sense

HTML

I see that you’re using <object> tag for image but as per MDN

“The <object> HTML element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.”

and I believe that the image isn’t from an external source here. You might want to do some more research and decide for yourself

It may be more appropriate to use <p> in place of <div> for .time and .last-time

CSS

I noticed that there are some CSS reset properties through out your code. It might be convenient to use a CSS Reset at the beginning of your CSS file such as Josh Comeau's or Andy Bell's

With selectors like article .wrapper .container .downer .time if you change class names in future that's gonna break the styles of your elements at multiple places

Instead of adding font-family at 2 or 3 places you can just add it to body and reduce the number of lines

JS

I like the simplicity of your JS functions, though I have a small suggestion - May be you can write just one function that can populate the data based on the button clicked? Then you can have only one function instead of three and you can avoid repeat code

Cheers and All the Best!!
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord