due at midnight on +125
For this milestone, we want to create a component that corresponds to one item on the task list. Let’s call that component
TaskItem. It should look something like this:
The main elements here are:
A checkbox indicating the task’s
done state. Tapping it can mark or unmark it as done.
description (in blue in this sample).
priority (in red). Clicking the priority should cycle through the avaible priority levels,
1 (low) through
5 (high). Or you can use a drop-down if you can figure that out.
deadline (in green), which is an optional piece of data. Here it is presented in a human-friendly relative form (
2 days from now), rather than as a precise timestamp (
2018-02-28T16:00:00Z). You can investigate the human-date library for doing that conversion.
tags (in magenta). There can be zero or more tags.
You don’t need to take the colors in this mock-up literally – use whatever colors or design elements you think make the component usable and attractive.
In addition, you should have a way to distinguish different priority levels, apart from just the number. Maybe each one gets a distinct color, in a range from blue (low) to red (high). Or maybe you use small icons to distinguish higher from lower priorities.
Of these fields I have mentioned, you should treat
tags as properties because they are (so far) immutable. You should treat
priority as states. (They can be initialized based on properties, but they also can be modified.)
TaskItem.js in my
cs164pub/demo folder on gitlab.