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 👍.
