Responsive Time Tracking Dashboard

Frontend Mentor - Time tracking dashboard solution

Hi everybody! 👋

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

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

Links 🔗

• Solution Repository: Github Repository
• Solution Page: Github Page

My process ⚙️

Built with 🛠️

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Javascript
• Api/Json Files

What I learned 📚

In this challenge i had the oportunity to learn another form to set a font in css.

@font-face {
    font-family: 'Rubik';
    src: url(./font/Rubik-VariableFont_wght.ttf);
}

Also, exercise the use of the for each function to create the activity cards on the page

function drawElements(array){
    secondSection.innerHTML = '';
    array.forEach((element, index) => {
        let title = data[index].title;
        let titleLowerCase = title.toLocaleLowerCase();
        if(titleLowerCase == 'self care'){
            titleLowerCase = 'self-care'
        }
        secondSection.innerHTML += `
        <div class="card">
            <div class="card__background" style="background-color: ${bgColors[index]};">
                <img class="card__image" src="./assets/images/icon-${titleLowerCase}.svg" alt="">
            </div>
            <div class="card__details">
                <div class="card__activity">
                    <p class="card__title">${title}</p>
                    <img src="./assets/images/icon-ellipsis.svg" alt="ellipsis-icon">
                </div>
                <div class="card__time">
                    <p class="card__hour">${element.current}Hrs</p>
                    <p class="previous">Last week - ${element.previous}hrs</p>
                </div>
            </div>
        </div>`
    });
}

Author 🙋🏻‍♂️

• Twitter/X - @agus_firpo
• Frontend Mentor - @Arfirpo
• Linkedin - Agustín Rodrigo Firpo