time-tracker with vanilla js , HTML AND CSS

Solution retrospective
well , got to learn more about asynchronous way of writing just the articles way really help, what i will do different is make my code shorter , is kinda long for the few functions in the project
What specific areas of your project would you like help with?the reviewer can help me check of way i could have made the code shorter and probably more understandable
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Abdulgafar-Riro
What’s Good:
- Modular structure: Reports are grouped logically into
dailyReport
,weeklyReport
, andmonthlyReport
functions. - Reusable fetch function:
fetchData
accepts multiple callbacks, making it flexible. - Clear DOM handling: Each function targets specific elements with informative error logs.
What Needs Improvement:
-
Redundant code:
- The inner functions (
work
,play
, etc.) are repeated across daily, weekly, and monthly reports with only timeframe differences. ➤Suggestion: Create one reusable function likeupdateActivity(dataArray, timeframe)
and pass'daily'
,'weekly'
, or'monthly'
as needed.
- The inner functions (
-
Typo in error messages:
- Repeated "onew or more elements..." instead of "one or more elements..."
-
Wrong error label:
- Several times
"play data not found"
is logged even for other activities likestudy
,exercise
, etc. ➤ Suggestion: Log the correct activity title that wasn't found.
- Several times
-
Naming improvement:
Function names like
work
,play
,study
, etc., are generic and repeated. Consider dynamic iteration over activities instead.
Overall Suggestion:
Refactor all
dailyReport
,weeklyReport
, andmonthlyReport
into a single report function that loops through an array of activities and updates the DOM based on a given timeframe.Like this: const activities = ['Work', 'Play', 'Study', 'Exercise', 'Social', 'Self Care'];
const updateReport = (data, timeframe) => { data.forEach(activity => { const { title, timeframes } = activity; const activityName = title.toLowerCase().replace(' ', '-'); const current = timeframes[timeframe].current; const previous = timeframes[timeframe].previous;
const currentElement = document.querySelector(`.${activityName}-current`); const previousElement = document.querySelector(`.${activityName}-previous`); if (!currentElement || !previousElement) { console.error(`One or more elements for "${title}" not found`); return; } currentElement.innerHTML = `${current}hrs`; previousElement.innerHTML = `Last ${timeframe.charAt(0).toUpperCase() + timeframe.slice(1)} - ${previous}hrs`;
}); };
const fetchData = async (callback) => { try { const response = await fetch('data.json'); const data = await response.json(); callback(data); } catch (error) { console.error('Error fetching data:', error); } };
// Handlers for each timeframe const dailyReport = () => fetchData(data => updateReport(data, 'daily')); const weeklyReport = () => fetchData(data => updateReport(data, 'weekly')); const monthlyReport = () => fetchData(data => updateReport(data, 'monthly'));
- Modular structure: Reports are grouped logically into
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