Devlog 4 — Building the TaskForge

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

This was a bigger part of the project because I wanted TaskForge to actually manage my study tasks instead of just displaying the website.

What I added

• Added a system for creating new study tasks.
• Added task name, subject, and due date.
• Added input checking so empty tasks cannot be added.
• Added a task list that updates when I add a task.
• Added Complete and Undo buttons.
• Added a Delete button with a confirmation message.
• Added All, Pending, and Completed filters.
• Added a task counter.
• Added better formatting for due dates.
• Added an automatic current date for new tasks.
• Added an empty-state message when there are no tasks.
• Added basic HTML escaping for task names.

What I learned

While making this file, I learned more about JavaScript arrays and objects.

I also learned how to use:

• addEventListener()
• filter()
• find()
• createElement()
• classList
• dataset
• Date
• Template literals

I also practiced connecting JavaScript with the HTML elements I created earlier.

Testing

I tested adding different tasks, completing and undoing tasks, deleting tasks, and switching between the three filters.

I also checked what happens when there are no tasks and tested empty form fields.

There were some small things I had to check and fix while testing, but now the task manager is working with the current TaskForge layout.

This was one of the most useful parts of the project so far because TaskForge is starting to feel like a real study planner.

Next, I will work on js/timer.js and build the study focus timer.