Submitted 6 months ago

Responsive Time tracking dashboard with CSS grid

Levis Kim•1,200

@Orekihotarou-k

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 finally understood the basic concepts of working with async functions and also how JSON works.

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

I had issues with getting the output to display properly. The output kept on displaying 0, and when I told a friend about it, he helped me realize that there was an issue with the forEach index. timeData.forEach((e, i)

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

After deploying the site, the inputs no longer change when the buttons are clicked. It works just fine locally. I need help solving this issue

Community feedback

Achara Chisom Solomon•490

@AcharaChisomSolomonPosted 6 months ago

Hey @Orekihotarou-k, good job on the design.

I am currently going through your js code and I would suggest that you fill the time components DOM from your javascript file instead of via the index.html file.

You can check out mine

import data from './data.json' with { type: 'json' };

const main = document.getElementById('main');

let innerHtml = '';
for (const item of data) {
    innerHtml += `
        <section
            class="${item.title.toLowerCase()}"
        >
            <div class="box">
                <div class="box__top">
                    <h3>${item.title}</h3>
                    <svg width="21" height="5" xmlns="http://www.w3.org/2000/svg">
                        <path
                        d="M2.5 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z"
                        fill="#BBC0FF" fill-rule="evenodd" />
                    </svg>
                </div>
                <div class="box__bottom weekly">
                    <h2>${item.timeframes.weekly.current}hrs</h2>
                    <p>Last Week - ${item.timeframes.weekly.previous}hrs</p>
                </div>
                <div class="box__bottom daily">
                    <h2>${item.timeframes.daily.current}hrs</h2>
                    <p>Yesterday - ${item.timeframes.daily.previous}hrs</p>
                </div>
                <div class="box__bottom monthly">
                    <h2>${item.timeframes.monthly.current}hrs</h2>
                    <p>Last Month - ${item.timeframes.monthly.previous}hrs</p>
                </div>
            </div>
        </section>
    `;
}
main.innerHTML = innerHtml;

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