Project #2 (JavaScript/CSS)

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.

Warning: this project requires a significant amount of time. Please start working on the project early. Office hours get busy the day before the project is due, and you may not get the help you need.

Grading

(50 pts) Web Page Structure/Style
- (25 pts) HTML
  - (3 pts) Header Section
  - (3 pts) Links Section
  - (3 pts) Contents
  - (3 pts) List of Calculators
  - (3 pts) Footer
  - (3 pts) Validation
  - (7 pts) Other
- (25 pts) CSS
  - (3 pts) Header Section
  - (3 pts) Links Section
  - (3 pts) Contents
  - (3 pts) List of Calculators
  - (3 pts) Footer
  - (3 pts) Validation
  - (7 pts) Other
(50 pts) JavaScript Code
- (16 pts) Grades Calculator
- (34 pts) Interest Calculator

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

Your html files must be implemented using HTML5 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., dreamweaver, etc.) which generates the HTML/CSS/JavaScript 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, keywords, and 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 Chrome(that is the environment we will use to grade your project).
You cannot use   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.
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.
Your code must follow the style guidelines provided at JavaScript Style Guidelines.
Make sure you use Komodo Edit as your editor, otherwise indentation may not look correctly during the grading process.
When referencing your images (e.g., <img src =) do not use absolute paths (e.g., C:\...). Just specify the name of the image.

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.

Snapshot main page