By
@princekumar
TaskForge is a simple study planner that I made while learning web development. I wanted to make something useful for studying intead of making only small practice projects. With TaskForge, I can add my study tasks, use a timer, check my progress, and keep my subjects organized.
To test TaskForge, open the website and use the navigation buttons to visit Tasks, Timer, and Subjects. In Tasks, add a few study tasks, try completing and deleting them, and refresh the page to check that they are saved. You can also try the different timer modes and check how the dashboard changes when tasks are completed.
52m 24s logged
Today I finished the README.md file for my TaskForge project.
I added information about what TaskForge is, the main features, the project folder structure, the technologies I used, and how the project works. I also wrote about what I learned while making it and some problems I faced during development.
I wanted the README to be simple and easy to understand instead of making it look too professional.
While writing the README, I learned that documentation is useful because it helps other people understand a project without looking through every file.
I also learned how Markdown headings, lists, code formatting, and sections can be used to organize a project README.
I checked the README on GitHub to make sure the headings, lists, and code formatting looked correct.
Project progress
This completes the final planned file of TaskForge.
TaskForge: 9/9 files completed 🎉
I now have a complete study planner with task management, a study timer, dashboard statistics, saved tasks using localStorage, and a subjects data file.
Made while learning web development 💻
28m 14s logged
Today I worked on the ‘data/subjects.json’ file of my TaskForge study planner.
I wanted to keep my subject information separate from my HTML and JavaScript code, so I created a JSON file for storing the subject data.
This was my first time making a separate JSON data file for this project.
I learned how JSON can be used to store information in a clean way.
I also practiced using:
I checked the file carefully to make sure the JSON syntax was correct.
I checked the quotation marks, commas, brackets, and all the subject information.
The “subjects.json” file is now completed. ✅
Now my project has a separate place for storing subject information.
1h 8m 27s logged
Today I worked on the js/storage.js file of my TaskForge study planner.
Before this, my tasks were stored only while the webpage was open. If I refreshed the page, my tasks disappeared. I wanted to fix this.
localStorage for TaskForge.This was my first time using localStorage in this project.
I learned how to use:
localStorage.setItem()localStorage.getItem()localStorage.removeItem()JSON.stringify()JSON.parse()I also learned how two JavaScript files can work together. The storage file handles saving and loading, while tasks.js manages the actual tasks.
I added a few study tasks and refreshed the page to check if they were still there.
I also tested completing a task and refreshing the page. I checked deleting a task too.
While connecting storage.js with tasks.js, I had to make a few changes so the saved task data was loaded correctly.
Now my TaskForge tasks can stay saved even after refreshing the website.
1h 43m 8s logged
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.
tasks.js.While making this file, I learned how to calculate information from an array of objects.
I practiced using:
filter()lengthMath.round()setInterval()I also learned how different JavaScript files can work together in one project.
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.
1h 33m 23s logged
Today I worked on the js/timer.js file of my TaskForge study planner.
I wanted to add a simple timer that I could actually use while studying.
While making this file, I learned how JavaScript timers work.
I practiced using:
setInterval()clearInterval()if statementsI also learned how to stop and restart a JavaScript timer without refreshing the webpage.
I tested the Start, Pause, and Reset buttons.
I also tested all three timer modes. To make testing faster, I temporarily used a shorter countdown instead of waiting for the full 25 minutes.
I checked the browser console and fixed small problems while testing.
Now TaskForge has a working study timer that can be used for focused study sessions and breaks.
3h 4m 6s logged
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.
While making this file, I learned more about JavaScript arrays and objects.
I also learned how to use:
addEventListener()filter()find()createElement()classListdatasetDateI also practiced connecting JavaScript with the HTML elements I created earlier.
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.
1h 34m 20s logged
Today I worked on the js/script.js file of my TaskForge study planner.
I added the main JavaScript functionality that connects the different parts of my website.
While working on this file, I learned how to use JavaScript event listeners, query elements from HTML, change CSS classes, work with data attributes, and use the JavaScript Date object.
I tested the navigation buttons and checked that the current date appears correctly. I also checked the browser console to make sure the script loads without errors.file 3 - script.js completed!
3h 17m 56s logged
Today I worked on style.css and started designing the interface of TaskForge. I added a simple color theme, cards, buttons, navigation styling and a dashboard layout.
I also added responsive CSS so the project can adjust to smaller screens. I wanted the website to look attractive but still keep it simple and realistic for a student project.
I tested the page in the browser and checked the main sections, task area, timer and subject cards. The JavaScript functionality will be added in the next steps.
File completed: style.css ✅
2h 0m logged
Today I started working on my TaskForge project. I created the index.html file and made the basic structure of my study planner. I added a header, navigation buttons, a home section, task section, study timer section, and subjects section.
I also added places for showing total tasks, completed tasks, pending tasks, and progress. For the task section, I added a form where a user can enter a task name, choose a subject, and select a date. I also added the basic timer buttons and subject cards.
The page is not fully functional yet because I still need to add CSS and JavaScript. My main goal in this step was to create a good HTML structure that I can build on in the next files.
File completed: index.html ✅
