chapter thirteen

13 Project: Task Manager

 

This chapter covers

  • Creating the necessary scaffolding for a task manager
  • Implementing a simple list of tasks
  • Adding advanced features to the task manager

Welcome to the third and final project for this first half of the book. You will now have to wield all the magic and spells that you have learned this far as well as some extra knowledge about JavaScript and HTML that you have hopefully picked up elsewhere - however that's only required for the very advanced homework at the end of this chapter.

In this project, we're building a task manager. By that term, we mean a slightly more complex variant of a todo-list. The task manager at first consists of a simple todo-list implemented as cards that can be started and completed. We then add in sub-steps to each task, so the user can add some finer details to their tasks at hand. We're then adding in the option of changing the order of the steps in each task, first only using buttons, but secondly also using drag and drop. It is that last bit, the drag 'n drop part, that's going to be quite tricky to complete. You can see this development in figure 13.1, where we are going to use advanced events to get to the final step 5.

Figure 13.1 As you implement the task manager, you will go through these five steps in order to add more and more functionality and complexity to the application.

13.1  Scaffolding for the task manager

13.1.1                  Component hierarchy

13.1.2                  Project structure

13.1.3                  Source code

13.1.4                  Running the application

13.2  A simple list of tasks

13.2.1                  The goal of this exercise

13.2.2                  Component hierarchy

13.2.3                  Updated project structure

13.2.4                  Source code

13.2.5                  In the browser

13.3  Homework: Task steps and progress

13.4  Homework: Prioritization of steps

13.5  Homework: Drag and drop

13.6  Conclusion

13.7  Summary