Welcome! Today we'll be continuing off our Pomodoro timer project. We'll be integrating a todo list system to our app. This lab is titled Pomodoist, a play-on-words of the popular todo list app Todoist.
To the right is what you'll be building this lab:
This lab will be our final homework assignment. It's a great combination of everything we've learned in this class, and we think it's important to see it to it's end!
With Pomodoist you can add items to your todo list by typing in the "Add Task..." input form (TodoInput.jsx
). The app will display a list of todo items (TodoItem.jsx
), and you can start a new Pomodoro timer by clicking on the "clock" button. Every time you finish a session for a todo item, an indicator under the item will increase (the number of sessions completed).
You can also check which tasks you've completed so far and clear them by clicking the clear button (clearButton.jsx
), the clearButton only shows up if an item is currently checked.
As you did in the last lab, you'll be doing this exercise locally to give you some more practice on developing on your own environment. The starter code for this lab adds a few things to the final product for last week's lab. So don't worry if you didn't finish last week's lab, the solution is provided as part of the skeleton code.
Note: If you want to save your finished project in your own personal repository, you'll have to create it and set the remote just like we did in Project 1.
For this lab, most of your work will be inside App.jsx
, TodoItem.jsx
and TodoInput.jsx
. Timer.jsx
is already implemented and you only need to use the component. If you didn't finish last week's lab, feel free to take a look at the solution. Either way, all of Timer
's logic will be abstracted away from you in today's lab.
📄 You'll be working in App.jsx
here
We'll start by initializing state inside the App
constructor. We've already added code that binds all the methods that you'll be implementing in this lab so you don't need to worry about that.
The state will have 4 keys initially: items
, nextItemId
, sessionIsRunning
, and itemIdRunning
.
items
This is the list of items currently on our todo list. You'll be appending item objects onto this list on addItem
. Initialize this as an empty array.nextItemId
We'll be using this id to uniquely identify each item. Initialize this as 0
.sessionIsRunning
This is a Boolean value for whether or not a Timer should display. It should default to false, since we won't show a Timer by default.itemIdRunning
This is a Number value for the current item ID that the timer is counting down for. This can default to null
, since we don't have a current item ID in the beginning.