
Solution retrospective
The grid layout. I used for the first time the mobile first method. it was easier to change the layouts for different screen sizes.
What challenges did you encounter, and how did you overcome them?It was quite hard to understand JSON and to implement the text to Javascript with fetch method. I used AI to help me.
What specific areas of your project would you like help with?Can i simplify the javascript code when using fetch method? It was complicated.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@josephajibodu
You did a great job. Well done!
However, it would help if you worked on achieving a pixel-perfect interface. The font choice and probably sizes didn't match. I believe you can easily improve on that.
Your javascript code is readable and well structured but not reusable.
To answer your Javascript question related to fetch
For this project, you didn't need to use fetch at all, all you just needed was to import the JSON into your
index.js
file.From this:
buttons.forEach((button) => { button.addEventListener("click", () => { const period = button.textContent.toLowerCase(); updateHours(period, data); }); });
I could see you are extracting the period from the button text, that is not a best practice, next time keep the period in a data attribute. Like this:
buttons.forEach(button => { button.addEventListener("click", () => { const period = button.dataset.period; // Changed from textContent updateHours(period, timeTrackingData); }); });
The HTML will look like this:
<button data-period="daily">Daily</button> <button data-period="weekly">Weekly</button> <button data-period="monthly">Monthly</button>
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