Plant Watering Tracker

Juliana Porto https://a2-julezporto.glitch.me/

Meet the Plant Watering Tracker! Input your plant's name, type, and the last day you watered it, and the Plant Watering Tracker will save that data as well as calculate the next date your plant will need to be watered. The Plant Watering Tracker does its next watering (derived field) calculation by taking into account the plant's type and the last date you watered it.

Here is the calculation logic:

1. "Succulent or Cactus" or "Air Plant": water every 2 weeks
2. "Tropical" or "Aquatic": water every 3 days
3. Everything else: water every week

To accomplish this:

• An HTML form was used with various components including a text field, a dropdown selector, and a date field.
• A <table> tag displays all data currently available on the server. This is the Archive section.

For CSS positioning, I used a mix of flex and grid:

• I used flex for various positioning such as fitting the footer to the very bottom of the webpage.
• I used grid to place items in relative positions to each other such as putting the plant image on the right of the form fields. Multiple CSS selectors were used for elements, ids, and classes as well as Google Fonts for all text used.

Technical Achievements

• Tech Achievement 1: I created a single-page app that both provides a form for users to submit data and always shows the current state of the server-side data. For example, when the user submits a new plant, the server responds by sending back the updated table of plants. This is also shown when a delete button is pressed as the data entry instantly disappears.

Design/Evaluation Achievements

• Design Achievement 1: Ran think-aloud study with 1 participant
  Think-aloud study:
  1. Avieira
  2. The user was confused as to which fields were required and which were not.
  3. The user commented on the default plant name value beng annoying to delete. It surprised me because I did not know there was such a thing as a placeholder instead of setting the text field to a default value.
  4. I would change the default value of that text field to a placeholder and I would add some styling to the required boxes so that they stand out to the user.