Homework 2 Solution

Requirements




Rework the static website you built in Homework 1 as follows:




index.html




Revise your index page based on the feedback you received in the peer reviews.




If you did not submit Homework 1, build a simple index page provides access to the todo.html and todoForm.html pages.




todo.html




Add the following features to your todo list items:




Posted: date when the item was first posted; set this date automatically



Last Updated: date when the item was last updated; set this date automatically



Edit: a button that makes the item editable in place (without leaving the page); pre-populate the edit form with the current data;



prevent the user from modifying the Posted or Last Updated date; be sure to update the “database” (see below).




Delete: a button that deletes the item from the todo list



Add the following features to your todo list:




Sort: the user can sort the list by either Posted Date, Last Updated date, or Due Date.



Allow the user to sort in ascending (older items first) or descending order (newer items first).




Filter: filter the list to show only completed or incomplete tasks



(your page already has this capability; you may change how this feature is implemented)




Dynamically built list: Instead of putting the HTML code for the initial list items, build the list items dynamically using JavaScript. Store the data for the initial items in a JavaScript object (the “database”). You may want to store the selections for sorting and filtering as well. When the todo.html is loaded, call a Javascript function to construct the list items from the data.



todoForm.html




Add the following features to your todo form:




Check that the due date does not precede the posted date.



Submit: Submit button; when clicked, the new item is added to the “database” and the todo.html page is displayed.



Header




Make the header read “cmps183: Homework 2”.







File organization




Folder structure:




Put the html files in folder called cmps183hw2.
Put your css files in a subfolder called css.
Put your javascript files in subfolder called scripts.
Put your pictures in a folder called images.



Keep this folder structure in mind when you define hyperlinks in your html files.




Submission instructions




Create a zip file for folder cmps183hw2.



If you registered for Homework 1 then you are already registered for Homework 2. Otherwise, self-register for the assignment at Crowdgrader.org with this sign-up link.



(https://www.crowdgrader.org/crowdgrader/venues/join/3653/wapeti_pacyde_tuzagi_zywape ) Important: Please, use your UCSC email address to register.

Then go to this CrowdGrader assignment.




(https://www.crowdgrader.org/crowdgrader/venues/view_venue/3653 ) Note: You will need to log in with the email address that you signed up with.




Click on the Submit link at the top left.
Attach the zip file you created in step 1.



Add any comments, if you wish, by clicking on Edit Content. Be sure to specify any information that a user should be aware of.



That's it.



If you cannot log in, most likely you signed up with a different email account.




Review Instructions




Part of the assignment (20%) is to review 4 submissions of your peers. A grading rubric is available on Crowdgrader.




The primary purpose of the review is to learn from each other and to give honest feedback.




To do the reviews go to the assignment URL.




Collaboration



There is no issue with discussing the homework and possible solutions within your project team or other group. However, for the homework assignments each student needs to write his or her own code. This is the only way you will actually learn how to do it yourself. If you cheat, you primarily cheat yourself.