Homework 1 Solution

Requirements




Build a website with three pages:




index.html



todo.html



todoForm.html



Each of the three pages consists of a header, footer, a content panel, and a sidebar. These four components should be visually separated using borders and/or background colors or images.




Directly below the header is a navigation bar with elements labeled “Home”, “To Do List”, and “To Do Form” linking to index.html, todo.html, and todoForm.html, respectively.




Header




The header shows the text “cmps183: Homework 1”. This text should be clearly legible on top of a header background image or background color.




The header is the same for all three pages.




Footer




The footer contains links labeled “About Us”, “Contact”, “Privacy”, and “Credits”. These are dummy links (set href=”#” in the anchor elements).




The footer is the same for all three pages.




index.html




The content section contains a fictitious profile of yourself. To preserve your anonymity for peer review, do not use your real name, personal data, or a picture of yourself.




The profile should include a picture, name, place and date of birth, contact information, and a few short biographical paragraphs.




Also, provide a (fictitious) list of courses (to be) taken this academic year, including department, course number, course title, and quarter.




todo.html




The content panel displays a todo list. Each item in this list has a task title, a notes section, due date, and a checkbox to indicate whether the task has been completed. Your todo list should contain at least four items. Provide a menu with operations “Show all”, “Show completed”, and “Show to do”. Selecting “Show all” will display all items in the todo list, “Show complete” shows the completed items only (checkbox checked); and “Show to do” shows yet to be done items only (checkbox unchecked).

CMPS183 HOMEWORK 1






todoForm.html




The content panel shows a form for entering the task title, notes, and due date of a new todo item.




Optional: Validate the due date by making sure it is not in the past.




Side Panel




The content of the side panel is different for the three pages. Use it for notes on your design (observations, challenges, etc.) and links to resources you consulted and/or found helpful in the construction of the respective page.




File organization




Folder structure:




Put the html files in folder called cmps183hw1.
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 cmps183hw1.
Self-register for the assignment at Crowdgrader.org with this sign-up link.



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




Then go to this CrowdGrader assignment.




(https://www.crowdgrader.org/crowdgrader/venues/view_venue/3637 ) 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.
CMPS183 HOMEWORK 1




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.