Pomodoro APP to Kanban Board
Using Kanban to categorize the tasks in our app according to days of the week.
Exercise:
Make a Kanban board from the Pomodoro App with the following fixed columns:
- Done,
- Monday,
- Tuesday,
- Wednesday,
- Thursday,
- Friday,
- Later.
Source code:
Use the PomodoroTracker3 folder as a starting point. The end result is in PomodoroTracker4.
Solution:
Our app is becoming more and more useful after each exercise. These exercises symbolize what kinds of tasks you may get in an interview, but you also get the convenience of building on top of your existing code. If you go through all exercises at once, you may get the experience of solving a homework exercise.
First, let’s add a div for the kanban board:
<div class="kanban-board js-kanban-board"></div>
This div will contain our columns.
Microtemplates
The column template needs to be reusable. We could copy-paste it in the html markup 6 times, but we prefer a DRY (Don’t Repeat Yourself) solution.
Therefore, we will move the column markup to the JavaScript code in the form of a microtemplate ...