Perform the following steps:
1. Download the template files Week6Project_template.zip and unzip it.
2. In the unzipped project folder, replace Week6Project_template.html and Week6Project_template.css with your own final Week 4 Project solution files (you will need to adjust the references to .css files, as they will now be located in the CSS folder).
3. Be sure that your Week6Project_template page looks exactly like the final solution in the Week 4 assignment:
1. Open the functions.js file in the editor and start adding the validation functions for the webpage controls. At a minimum, you will create validation functions for title description, city, rate textboxes, making sure that they do not stay empty. Country and continent drop-down menus must have a valid selection of items. At least one check box in cc[] (Creative Common Types) check boxes array must be checked as well as accept check box. The color should not be empty—some color has to be set up. The time and date should have the specific input to be set up rather than stay with the formatting placeholders.
2. When a submit button is clicked in the Week6Project.html, each control validation function created in the functions.js should be called. It is your choice if you insert the validation calls in the .html page itself, or (preferable), create a separate .js file with the proper JavaScript codes and then reference that .js file in the HTML page.
3. Test your completed Week 6 Project page in the browser to ensure that it works as expected.
4. Add all files created in the Week 6 Project to your final website.
5. Add the hyperlink to your index.html page pointing to the Week6ProjectFinal.hml. Check that the hyperlink is functioning and points a user to the Week6ProjectFinal page. Similarly, add the hyperlink to the Week6ProjectFinal page to allow a user to navigate back to the index.html home page of your website. Test the code thoroughly before publishing it.
6. Review and test thoroughly your final version of the course project. Be sure that none of the navigation links is broken and a user can easily see every page in your final project, which includes all assignments completed in Weeks 2–6 of the course.
7. Think how you can make your website more accessible (in the view of accessibility readings of the Week 6). Implement a few accessibility features and explain them in the final MS Word document deliverable.
8. Publish your work by uploading the final version of your project to the web host (to the Week 6 bucket on the AWS S3 server) Test the site again, verifying the access to and proper functioning of all webpages. Copy the URL of your website on the server to the MS Word deliverable document.
9. Take the screenshots of each page of your final project previewed in a browser demonstrating the successful functioning of the codes in the page (HTML, CSS, and JavaScript if any). Paste all screenshots into an MS Word document; comment on functionalities you have implemented and the tools you have used. Reflect on your level of success with the Course Project and your thoughts on what you might have done differently to create such a website anew.
10. Finally, include the valid URL to the location of your website index.html home page on the web hosting server.
11. Compile all your website files into a single .zip file, including the MS Word document, and submit the .zip file as your deliverable. Name the .zip file WK6Assgn+last name+first initial.zip.
12. Submit the WK6Assgn+last name+first initial.zip for grading no later than the due date for this deliverable.
Note: JavaScript codes are usually difficult to debug with a trial-and-error approach. You might find a series of IDEs that might help (e.g., NetBeans at netbeans.org), but leaning how to use those effectively might be a problem by itself. If desired, you might try using simple online debuggers, such as Java Lint tool. With this tool, you can copy and paste JavaScript code into its webpage and click Lint button (see SourceForge, 2012, JavaScript Lint, available at http://www.javascriptlint.com).
0 comments