CSCI 3300 Assignment 4

When you see “Richard Ricardo” in the example screen captures, change it to .
When you see “Richard” in the example screen captures, change it to .
If you do not put / 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_assignment4. Save all the files from
this assignment in this folder.
Create the following subfolders (in the folder lastname_firstname_assignment4): q1, q2, q3, q4, q5.
As a result, you should have the following folder (directory) structure for this assignment:
 lastname_firstname_assignment4\q1\
 lastname_firstname_assignment4\q2\
 lastname_firstname_assignment4\q3\
 lastname_firstname_assignment4\q4\
 lastname_firstname_assignment4\q5\
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 1 (20 points) Estimated time: 2 hours
 Save question 1 files in subfolder “lastname_firstname_assignment4\q1\”.
 Create a web page that displays the default information (example shown) about your vehicle. If you do
not have a vehicle, display the information about the first vehicle you can afford to buy.
 The initial page should look like the one shown below.
 Prompt the user to enter the information of his/her dream vehicle, and use that to replace the defaults.
 Create your vehicle page using “’s vehicle page” as the page title. Save the page as
index.htm. Remember to document the html file with html comments.
 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
Question 2 – JavaScript Chapter 1 (20 points) Estimated time: 2 hours
 Save question 2 files in subfolder “lastname_firstname_assignment4\q2\”.
 Create a web page that contains two buttons (heading tags with border) as shown.
 When the first one is clicked, the user will be prompted to enter his/her favorite soccer team’s name.
 When the second one is clicked, the user will be prompted to enter his/her favorite football team’s
name.
 The page will then be updated as shown.
 Create your page using “’s Favorite Soccer & Football Team” as the page title. Save the
page as index.htm. Remember to document the html file with html comments.
 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.

Question 3 – JavaScript Chapter 2 (20 points) Estimated time: 2 hours
 Save question 3 files in subfolder “lastname_firstname_assignment4\q3\”.
 Create a web page that allows a user to create a soccer school name as shown.
 The use should be prompted to enter his or her first name, last name, and the school’s name.
 The program should create a soccer school name that consists of the user’s initials concatenated with the
school name, plus “School”, as shown.
 The page will then be updated as shown.
 Create your page using “’s Soccer School Name” as the page title. Save the page as
index.htm. Remember to document the html file with html comments.
 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.

Question 4 – JavaScript Chapter 2 (20 points) Estimated time: 2 hours
 Save question 4 files in subfolder “lastname_firstname_assignment4\q4\”.
 Create a web page that displays the cost of a soccer ticket as shown.
 The use should be prompted to enter his or her age.
 The output should be a message telling the user what the customer’s soccer ticket will cost, based on the
following criteria:
o Under age 5 (age < 5), cost is $2
o Between ages 5 and 15, cost is $6
o Older than 15 (age 15), cost is $8
 The page will then be updated as shown.
 Create your page using “’s Soccer Ticket Price” as the page title. Save the page as
index.htm. Remember to document the html file with html comments.
 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.

Question 5 – JavaScript Chapter 2 (20 points) Estimated time: 3 hours
 Save question 5 files in subfolder “lastname_firstname_assignment4\q5\”.
 Create a web page that contains two buttons (heading tags with border) as shown.
 The web page should check to see if the user enters an age within a given age range.
 The use should be prompted to enter his or her age.
 Write a program that uses two different functions/methods to test if an input is between 15 and 21
(including 15 and 21).
 One function/method must use the AND operator (&&).
 One function/method must use the OR operator (||).
 The web page should display the two equivalent expressions.
 The results will then be displayed as shown.
 Create your page using “’s Age Range Check” as the page title. Save the page as index.htm.
Remember to document the html file with html comments.
 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.