
Responsive time tracking dashboard SASS and JavaScript
Design comparison
Solution retrospective
Overall, I’m quite satisfied with my solution, but there’s always room for improvement. Next time, I’ll focus on refining the layout and enhancing the script logic. The content within the activity boxes could be positioned more precisely to better align with the design. While it might be a bit of an overkill for a project like this, implementing an MVC pattern for data fetching and other JavaScript functionality could add more structure and flexibility.
What challenges did you encounter, and how did you overcome them?Managing click events on links was quite a challenge, but revisiting topics from JavaScript course — especially event propagation and delegation—proved to be incredibly helpful.
What specific areas of your project would you like help with?Event delegation.
Community feedback
- @danielashjariPosted 23 days ago
This is the summary of my script and i think it could be useful
you can check out mdn for more help
async function populate() { const requestURL = "dist/js/data.json"; const response = await fetch(requestURL); const data = await response.json(); ... dailyBtn.addEventListener("click", () => { populateDaily(data); }); function populateDaily(data) { data.forEach(item => { ... const time = container.querySelector(".time"); const lastTime = container.querySelector(".last-time"); time.innerHTML = `${item.timeframes.daily.current}hrs`; lastTime.innerHTML = `Last Day - ${item.timeframes.daily.previous}hrs`; }); }
0
Please log in to post a comment
Log in with GitHubJoin 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