Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js

Molly Sunray http://a2-mdsunray34.glitch.me

To Do App

My application is a to do list. The user enters the task, category (e.g., school, work, personal), and priority. When the user clicks the "Add" button, the information they inputted in the form is added as a row in the table. "Deadline" is a derived field that is based on the priority of the task. Each item in the table is also given a "Remove" button which removes the row when the user clicks on it. I used a CSS flexbox to position the form. Using this positioning technique, I centered the content of the form and also changed the direction of the form content for smaller screens.

Technical Achievements

• Tech Achievement 1: I created a single-page app that displays both a form for users to submit data and the current state of the server-side data. When the user submits data in the form, a table with the data inserted is displayed under the form on the same page.

Design/Evaluation Achievements

• Design Achievement 1:
  • Study 1
    1. The student's last name is McShan.
    2. One problem that the user had with my design was that the table is not a fixed size. This means that when longer inputs are submitted through the form and the data that is currently in the table is shorter, the table resizes.
    3. It surprised me that the user thought the "Category" input field was unclear because I thought it was common for to do list applications to have an option to categorize tasks.
    4. Based on the student feedback, I would change the table to a fixed size so that new rows don't cause the table to resize. I would also make the "Category" input field a dropdown menu so that users have options for how to categorize the task.
  • Study 2
    1. The student's last name is Lin.
    2. One problem that the user had with my design was that there is no character limit on the input fields. Another problem the user communicated was that there is no ability to sort by category.
    3. I was surprised that the user suggested adding a checkbox to each row in the table because I assumed users would remove items once they were completed.
    4. Based on the student feedback, I would set a character limit for the input fields so that users can't type long inputs that affect the sizing of the table. I would also allow users to sort by category or assign colors to different categories, and I would add a checkbox to each row so that users have the ability to view completed tasks.