CSCI 3300: Introduction to Web Development
CSCI 3300 Assignment 5
When you see “Richard Ricardo” in the example screen captures, change it to <your name>.
If you do not put <your name> / <your first name> in the above mentioned fields, you will get 0 points for the question(s).
No two students should submit webpages with exactly the same code, or same content, or same layout, or same color combination. If found, both students will get 0 points.
Create a folder on your hard disk, name the folder lastname_firstname_assignment5. Save all the files from this assignment in this folder.
Create the following subfolders (in the folder lastname_firstname_assignment4): q1, q2, q3, q4.
As a result, you should have the following folder (directory) structure for this assignment:
lastname_firstname_assignment5\q1\
lastname_firstname_assignment5\q2\
lastname_firstname_assignment5\q3\
lastname_firstname_assignment5\q4\
Use http://www.javascriptlint.com/online_lint.php website to help debugging JavaScript. It will make your debugging process easier. All html (JavaScript) files must pass JavaScript validation at this website without any error, without any warning (-2 points for each error, each warning).
Total estimated time for this assignment: 10 hours
Question 1 – JavaScript Chapter 4 (25 points) Estimated time: 2 hours
Save question 1 files in subfolder “lastname_firstname_assignment5\q1\”.
Create a web page that displays the default information (example shown).
The initial page and related outputs should look like the examples shown below.
Create your page using “<your name>’s Kung Fu Panda Po Count Down / Count Up” as the page title.
Save the page as index.htm. Remember to document the html file with html comments.
Allow the user to click on one of the four buttons.
o Use for loop to achieve button 1’s effects
o Use while loop to achieve button 2’s effects
o Use for loop to achieve button 3’s effects
o Use while loop to achieve button 4’s effects
Create a css file named style.css
to format index.htm by creating your own layout (no two students should
have the same layout). Use css comments to document the css program. You can use the same (or similar)
css file(s) to format all questions.
2 CSCI 3300
Question 2 – JavaScript Chapter 4 (25 points) Estimated time: 3 hours
Save question 2 files in subfolder “lastname_firstname_assignment5\q2\”.
Create a web page that displays the default information (example shown).
The initial page and related outputs should look like the examples shown below.
Create your page using “<your name>’s Kung Fu Panda Po Secret Scroll” as the page title. Save the page as index.htm. Remember to document the html file with html comments.
Write a program that asks the user for Po’s secret word.
o The secret word must have exactly nine characters and may not include spaces.
o All other keyboard characters are allowed.
o A loop (while or do…while) should prompt the user to re-enter another secret word until both
these conditions are met.
Create a css file named style.css to format index.htm by creating your own layout (no two students should have the same layout). Use css comments to document the css program.
Example: Initial Page
4 CSCI 3300
Example: Input q2a
Example: Output q2a
Example: Input q2b
5 CSCI 3300
Example: Output q2b
Example: Input q2c
Example: Output q2c and Input q2d
6 CSCI 3300
Example: Output q2d
Question 3 – JavaScript Chapter 4 & 5 (25 points) Estimated time: 2 hours
Save question 3 files in subfolder “lastname_firstname_assignment5\q3\”.
Create a web page that displays the default information (example shown).
The initial page and related outputs should look like the examples shown below.
Create your page using “<your name>’s Kung Fu Panda Po Training Log” as the page title. Save the page
as index.htm. Remember to document the html file with html comments.
Write a program that allows the user to enter Po’s training hours for each month.
o The user should be allowed to enter as many data set as desired (You must use do...while loop).
o The output should look like the example output shown.
o The program should also calculate Po’s total training hours.
Create a css file named style.css to format index.htm by creating your own layout (no two students should
have the same layout). Use css comments to document the css program.
Example: Initial Page
7 CSCI 3300
Example: Input q3
Example: Output q3
Question 4 – JavaScript Chapter 4 & 5 (25 points) Estimated time: 3 hours
Save question 4 files in subfolder “lastname_firstname_assignment5\q4\”.
Create a web page that displays the default information (example shown).
The initial page and related outputs should look like the examples shown below.
Create your page using “<your name>’s Kung Fu Panda Po Sequence” as the page title. Save the page as index.htm. Remember to document the html file with html comments.
Allow the user to click on one of the four buttons.
o You can (must) choose to use for loop, while loop or do..while loop.
o The sequences generated and the output should look like the example output shown.
Create a css file named style.css to format index.htm by creating your own layout (no two students should have the same layout). Use css comments to document the css program. You can use the same (or similar) css file(s) to format all questions.
Example: Initial Page
9 CSCI 3300
Example: Output
When button 1 is clicked When button 2 is clicked
When button 3 is clicked
When button 4 is clicked
Important:
1. If you do not put <your name> / <your first name> in the above mentioned fields (as shown in the examples), you will get 0 points for the question(s).
2. No two students should submit webpages with exactly the same code, or same content, or same layout, or same color combination. If found, both students will get 0 points.
3. All html files must pass html validation at http://validator.w3.org/ without any error (and with only 1
warning). Use the validator’s “File Upload” tab to check each file.
4. All css files must pass css validation at http://jigsaw.w3.org/css-validator/ without any error.
5. All html(JavaScript) files must pass JavaScript validation at http://www.javascriptlint.com/online_lint.php
without any error, without any warning.
6. If your html file contains any css component, your html file must pass both html validation (3 above), and css validation (4 above) without any error.
10 CSCI 3300
7. If your files do not pass the validations, 2 points will be deducted for each error (and each JavaScript
warning) found.
8. Document (comment) your html files (<!-- -->), css files (/* */), and JavaScript files (/* */).
