Pomodoro App Markup and Styling Refactoring

You will now improve the appearance and functionality of the app created in the last lesson.

Exercise:

Refactor the Pomodoro App from the previous exercise such that your tasks will be placed on cards, not table rows. Use the block-element-modifier syntax in your CSS and emphasize separation of concerns. Take care of the styling of the application as well as the functionality.

You have a free choice in your design decisions.

Source code:

Use the PomodoroTracker1 folder as a starting point. The end result is in PomodoroTracker2.

Imagination, life is your creation

This time, you are the freelancer, and you are supposed to drive all design decisions. If you don’t know what you are doing, check out tools that have solved the same problem. To save your time, I suggest searching for screenshots of Trello and KanbanFlow boards. Don’t worry; you don’t have to implement a full board yet. We are just focusing on one column.

Let’s start with creating the markup for our column:

Level up your interview prep. Join Educative to access 80+ hands-on prep courses.