Pomodoro APP to Kanban Board
Explore how to convert a Pomodoro app into a functional Kanban board with fixed columns, applying ES6 concepts such as microtemplates and destructuring. Understand JavaScript event delegation, state updates, and local storage integration to build a modular, maintainable task management interface.
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:
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 function:
{ header } is the shorthand of { header: header } in ES6. This ...