Devlog 6 — Building the Dashboard

Today I worked on the js/dashboard.js file of my TaskForge study planner.

I wanted the Home page to show useful information about my study tasks instead of just being a normal landing page.

What I added

• Added a total task counter.
• Added a completed task counter.
• Added a pending task counter.
• Added automatic progress percentage calculation.
• Added a progress bar that changes according to completed tasks.
• Added a Today’s Tasks section.
• Added different messages when there are no tasks for today.
• Added completed and pending status for today’s tasks.
• Connected the dashboard with the task data from tasks.js.

What I learned

While making this file, I learned how to calculate information from an array of objects.

I practiced using:

• filter()
• length
• Math.round()
• setInterval()
• Functions
• Template literals
• Updating HTML elements with JavaScript

I also learned how different JavaScript files can work together in one project.

Testing

I added some tasks and checked whether the dashboard numbers changed correctly.

I tested completed and pending tasks and checked whether the progress percentage and progress bar updated.

I also tested tasks with today’s date to make sure they appeared in the Today’s Tasks section.

I had to check a few things while testing, especially the connection between tasks.js and dashboard.js.

Now the Home page gives me a quick view of my study progress.