Introduction

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:

Submission: Due Tuesday, April 23

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!

HW 4 - Homework 4 Submission

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4cc9011e-aa8d-446e-b221-320c8c5f1429/part2.gif

How does Pomodoist Work?

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.

Setup

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.

Files

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.

1. Initializing State for our TodoList

📄 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.

2. Add Items