Assignment #2CMSC122
Due Fri Mar 11 6:00 pmSpring 2011

Objectives

• To practice CSS.
• Practice JavaScript conditionals, and iteration statements.

Overview

For this project you will write HTML,CSS, and JavaScript that supports a web site providing different kinds of calculators. Two main calculators are supported: a grades calculator and an interest calculator. A video and snapshot of the web site you are expected to implement can be found in the Web Site Snapshot/Video section.

For this project, you will also create a simple web page on a free web hosting site. Additional information at the end.

Warning: this project requires a significant amount of time. Please start working on the project early.

Grading

• (40 pts) Web Page Structure/Style
  • (20 pts) HTML
    • (2 pts) Header Section
    • (2 pts) Links Section
    • (2 pts) Contents
    • (2 pts) List of Calculators
    • (2 pts) Footer
    • (3 pts) Validation
    • (7 pts) Other
  • (20 pts) CSS
    • (2 pts) Header Section
    • (2 pts) Links Section
    • (2 pts) Contents
    • (2 pts) List of Calculators
    • (2 pts) Footer
    • (3 pts) Validation
    • (7 pts) Other
• (50 pts) JavaScript Code
  • (16 pts) Grades Calculator
  • (34 pts) Interest Calculator
• (10 pts) Free web hosting site

Notice that you don't have to submit a complete web site in order to receive credit for this project. We will look at each one of the above items individually.

Specifications

Before you start implementing the web page, download the following zip file: p2.zip. This file has a folder named p2 which contains files you will need for the project. The files you need to complete for this project are:

• index.html → represents the web site's main page.
• mainstylesheet.css → represents the css file used by all the html files in the site.
• grades.html → represents the JavaScript program computing letter grades.
• interest.html → represents the JavaScript program computing interests.

JavaScript Programs

• The grades.html file represents a JavaScript program that computes the letter grade associated with a numeric grade provided by the user. The program will generate a message (see Web Site Snapshots/Video below) with the appropriate letter grade based on the following cutoffs:

                                  A → numeric grade >= 90
                                  B → numeric grade >= 80
                                  C → numeric grade >= 70
                                  NP → otherwise
                                  

• The interest.html file represents a program that calculates simple interest and compound interest for a particular amount (principal), at a particular rate for a period of years. The program will display a table with the total amount (including principal) per year. The formula to compute simple interest is "interest = principal * (rate/100) * years". Just add the principal to the interest to generate the amount to display. The formula to compute compound interest is "FinalAmount = principal * (1 + rate/100)^Years". Notice that you do not need to add the principal in this case. Your program must read the principal amount, rate (%), and the maximum number of years (see Web Site Snapshots/Video below). Use the following messages to read the appropriate values:
  
  
  1. "Enter principal"
  2. "Enter rate (percentage value)"
  3. "Enter number of years"
  
  Notice that at the top of the table you will see the message "Table for " followed by the principal amount and the rate.
  
  You can use the Math.pow function to compute the power of a number.

Requirements

• You must use good indentation.
• Your html files must be implemented using XHTML 1.0 (Strict) and must validate according to the http://validator.w3.org/#validate-by-upload validator.
• Your css must validate according to the http://jigsaw.w3.org/css-validator/ validator.
• You may not use any authoring tool (e.g., frontpage, dreamweaver, etc.) which generates the HTML code for you.
• You must implement this project by yourself.
• To the head section of each html file add <meta> tags that identify the author, copyright, keywords, description. Feel free to use any values for each of them (for an example, see the html source for this document).
• Do not post your project in a web site (people will see your code).
• Make sure you view your code using Firefox(that is the environment we will use to grade your project).
• You cannot use &nbsp; in your html files.
• Your css file must define and use at least one id selector.
• Your css file must define and use at least one class selector.
• You do not need to provide any pseudocode.
• You must use good variable names and good indentation in your JavaScript code
• Make sure the order of link properties in the css file is: a:link, a:visited, a:hover, a:active.
• The background color we use is #FFBEAD.

Web Site Snapshot/Video

A video showing the functionality of your system can be found at Video. A snapshot of the web site's main page is provided below.

Free Web Hosting

The main component of this project is the HTML/CSS/JavaScript that was described above. The free web hosting part is a small exercise, for you to explore putting some HTML on a free web hosting site. NOTICE YOU DO NOT NEED TO PAY/BUY ANYTHING TO COMPLETE THIS PART. Here is what you need to do:

• Visit the web site http://www.000webhost.com/order.php and enter a subdomain name below the section "or I will choose your free subdomain".
• Complete the rest of the information required in the above form. This will allow you to create an account.
• Once you have created an account log on to it by accessing the site: http://members.000webhost.com/login.php
• Once you have logged on, select "Go to CPanel".
• Select "File Manager" under ">> Files".
• Select "public_html"
• Select "Edit" for the default.php file and then remove the contents of that file. Replace the contents with a link to your terpconnect account.
• Update your index.html file in your terpconnect account with a link to your free web page. Name the link "My Free Site".

Here is an example of what we need you to complete: http://cmscex.web44.net/

Verifying Terpconnect

Make sure you use the following link to verify your page has been set correctly:

http://www.cs.umd.edu/class/spring2010/cmsc122/resources/checkTerpConnectPage.html

and it is similar to what you see in our example: http://cmscex.web44.net/

Submission

To submit your project, follow these steps:

1. Create a zip file that includes the p2 folder.
2. Upload the zip file you created in the previous step using the submit server available at: https://submit.cs.umd.edu:8443/. Make sure you select the submit server entry (Assign #2) that corresponds to this project.
3. After submitting your project make sure you download the submitted file and verify that what you have submitted is correct. Please do not e-mail your project.

Academic Integrity

Please make sure you read the academic integrity section of the syllabus so you understand what is permissible in our programming projects. We want to remind you that we check your project against other students' projects and any case of academic dishonesty will be referred to the University's Office of Student Conduct