Assignment 05: Seasonal To-Do List

Note that this is an assignment that we will work on over the next two class periods. During the first week we will focus on the basic features of the daily log system, and next week you will be adding additional features. Please try and get the basic system done or nearly done before our second class meeting so you can attempt the more advanced features with the rest of the class.

For this assignment you will be creating an online system that lets users keep track of seasonal activities. Here is a video example of how the this program should work (including the 'advanced' features described below). Note that you may redesign your system to use your own content, colors and layout, but the overall logic should be the same.

Phase 1

For full credit for phase 1 you should ensure that your program should do the following. Note that you can download all of the graphics used in this project here.

  • Layout
    • Some kind of header to introduce your page
    • Four tabs that allow the user to select from four different seasons. The first tab / link should be visually distinguished in some way to show that it is currently selected.
    • A content window associated with each tab. The two tabs that are not currently activated should have their content windows hidden when the page loads. Each tab should contain a description of the activity type, a text box and a button.
    • A "corkboard" that will contain all of the activities that have been added to the log.
    • A drop-down menu that will allow the user to "filter" by season.
  • Tabbing Logic
    • Clicking on a tab should change its design in order to show it's 'active' status.
    • Clicking on a tab should display the corresponding content window below the tab. The other content windows should hide themselves.
  • Entry Logic
    • A user should be able to type into a seasonal text box and click the 'Add Note' button. When this happens a new "Sticky Note" should appear in the activity panel. Each note should be visually distinguishable (i.e. 'winter' entries will have a different background color than 'summer' entries). Hint: use classes to do this!
    • If the user does not type a value into the text box and clicks the button the system will detect this and prevent an empty entry from being added to the list.
    • Entries should be added to the activity panel in chronological order, with the latest entries showing up on the right side of the panel.
    • When you hover over a note a button should appear at the top right side of the entry. This button can be used to delete that particular entry (hint: use the 'onmouseover' and 'onmouseout' events and the 'event' object to determine which entry is being interacted with)
    • The 'Filter' drop down menu should let the user view all entries of a particular type, or view all entries regardless of type. Hint #1: you will need to detect when the drop down menu has changed and respond with a function - the 'onchange' event could be useful here. Hint #2: use classes or dataset properties to keep track of different entry types.

Phase 2

Select two of the following four features to add to your program. You can complete 3 or 4 features for some extra credit.

  • Completed Event: add an additional button to each note to indicate that an event is 'complete' - i.e. if this was a 'to-do' list clicking on this button would cause the item to be 'checked off' as complete. Completed events should have some kind of visual indicator attached to them (a checkbox?). Also allow completed events to switch back to being 'un-completed'. The filtering system should also be updated to filter completed / un-completed items.
  • Edit events: add an additional button to each note that allows the user to edit any event. The edit button should display some interface that lets the user change the text of the event as well as the category of the event. This can be a pop-up interface (modal box) or an in-line editing interface as is showin in the video - your choice.
  • Reorder events: add two additional buttons to your notes which will allow them to move left and right in the list. Clicking on the 'left' indicator will move the element left by one position, and clicking on the 'right' indicator will move the element right by one position. If an element is already at the beginning of the list it should not be given an 'left' indicator, and likewise an entry at the end of the list should not be given a 'right' indicator (hint: hide the indicator if it is moved into the first / last position).
  • Delete Multiple Events (not shown in the video): delete multiple notes at the same time based on the current filter choice. For example, if the user is filtering to show only 'summer' then all summer notes will be deleted. If the filter is showing all entries then every entry should be deleted.

Thoroughly test your work and make sure that it meets the requirements set forth above. When you are finished with both Phase 1 and Phase 2, post your project to the i6 server and link it from your main menu page. We should be able to visit your 'webdev' folder and click on the link to the fourth assignment and visit your page. Also create a ZIP archive of your work and submit it to NYU classes under the 'Assignment 05' category.