Responsive time tracking dashboard using HTML, CSS and JavaScript

Hi Olumide,

Congratulations 🎉 for completing this challenge, your Time tracking dashboard looks great and is functional. Also, it is great that you used the right semantic for your code. It is great that you were able to do this from scratch without a tutorial. I have some suggestions I want to address:

It is best practice to wrap the footer within the footer tag e.g. <footer class="attribution"></footer>

JS: Regarding your JS, you could use the querySelectorAll() attribute by giving all of the hours, the same class and all of the last week hours, the same class, where you could insert the class into this attribute e.g.

const numbers = document.querySelectorAll(".numbers");
const hours = document.querySelectorAll(".hours");

From there, you can use a for loop that will go through each box and insert the data in the right order e.g.

const dailyBtn = = document.getElementById("daily");

dailyBtn.addEventListener("click", () => {
        for(let i = 0; i < numbers.length; i++) {
            numbers[i].innerHTML = data[i].timeframes.daily.current + "hrs";
            hours[i].innerHTML = data[i].timeframes.daily.previous + "hrs";
        };
    });

If you do not know what a for loop is, I can give a brief explanation. A for loop contains 3 things, the initial value, the end value and the steps from the beginning to the end. Initially, the value of i is set to 0 and the final value of i will be less than the length of our .numbers which is 6 in our case as there is only 6 boxes. For reference, incrementing numbers is when numbers go up by one and it keeps adding its previous number e.g. 0 + 1 = 1, 1 + 1 = 2, 2 + 1 = 3. In this case, i starts with 0 and will keep adding 1 to its previous self until it reaches the length of .numbers which is 6. We include i into our numbrs, hours and data so that the JSON data loops through the hours and last week hours, in our HTML and CSS.

Sorry, if this sounds confusing and long however once you get the gist of it, it will be easier to consume. Also, it will be easier when dealing with large data and forms since you can just loop through the inputs.

Overall, great work and wish you the best for your future projects so keep coding 👍.

Hi Olumide, I think this is a great attempt in solving this challenge, and well done in doing everything yourself without tutorials!

I think the main feedback I have is to try to use flexbox and grid to position the component instead of using position: absolute, which would make the component hard to be resized, and when the browser is made smaller at around the 1050px breaktpoint, the cards start to look really squished and the text is spilling out of the container. Using absolute positioning is also the reason the footer is placed at the top because the main component got taken out of its relative context and then took on absolute positioning; for the other children at that same level (such as the footer), they would then position themselves as if the other element is not there at all.

You can see whether my solution here can give you some ideas on how to position the element: https://www.frontendmentor.io/solutions/responsive-dashboard-using-scss-and-vanilla-javascipt-with-json--HVkNhdtJT

Once again, great work overall in doing this on your own!