Project 1 Milestone 4: Final Product

The app that I made, 16-diem, is a to-do list app with 16 user task inputs to complete. To implement it, there were three components that I had to have working. These three components were text fields, table views, and image views, and they made up the majority of the app's functionality.

Text Fields

The user can input tasks by typing them in a text field. The tutorial I found used this method, which I decided to use instead of requiring the user to input the tasks into each individual table cell. My reasoning for this is that since a table view has a built-in scroll feature, it may become tedious for the user to scroll through the table and tap to input the text for each row manually. The textfield input would simplify the process an improve the user's speed of inputting tasks. The input in the text field is read and saved into a string array of tasks that can be manipulated in the back end.

Table Views

The tasks that the user inputs are displayed back to them in two table views: one for tasks to do, and one for finished tasks. Storing the tasks in the table views was essential for helping the user visualize all the tasks in an organized format. In order for the user to complete the tasks, I implemented swipe buttons. Swiping right on a table row marks the task in that row as complete and redisplays that task in the finished-tasks table. Since swiping left to delete is a common action that exists in a user's mental model, I decided to keep the delete button as a swipe-left button and implemented the 'finish' functionality as a swipe-right button. In the back end, the relevant task in the tasks array is moved to another array for finished tasks. This array for finished tasks is used to display the finished tasks in the finished-tasks table view.

Image Views

Each time a task is complete, a meter on the left starts filling up and changing colors. This was to make it easier for the user to visually measure their progress as they finished tasks. In order to make this happen, I uploaded 17 different images that contain the meter colors for each of the 16 tasks as well as the initial empty state. To determine the current image to be displayed, I just needed to count the number of tasks in the array of finished tasks and modify the image in the image view with the corresponding meter state.

Implementing the table views was easier than I expected it to be thanks to some tutorials for storing data and implementing swipe buttons. Everything worked as I wanted it to, with just a few changes from the original plan, and I was able to complete the entire app within a span of about five hours over 3 days.

I originally wanted to just have one table view to store both the current tasks and finished tasks, for which finished tasks would be moved to the very bottom of the list with a strikethrough. I couldn't figure out how to apply two different text styles for the same table view without the new text style affecting the rest of the table view rows, so I instead created two table views: one to store the current tasks, and one to store the finished tasks. I didn't have any users I could test my app with, but I thought the two separate tables for current and finished tasks would make sense, perhaps even more sense than my original idea for organizing the two types of tasks.

Another minor change that I made was that instead of using a strikethrough text style for the finished tasks, I changed the text color to grey. This was because I couldn't figure out how to easily implement strikethrough text.

In the future, I would probably start making my app earlier since I should be able to finish coding my app within a relatively short period of time, for which it is better to finish early and have more time to do some user testing amongst family members or in office hours. Tutorials helped me this time, so I will make sure that I am able to find enough resources to get a good understanding of the methods I want to use.