﻿ BIT 116

# BIT116: GPA Calculator

### You ARE allowed to work in pairs on this project.

You can do this homework individually or in a pair (2 people) ONLY.
If you work with a partner make sure that you put BOTH of your names on the assignment and then have ONE person hand in the assignment via StudentTracker.

### Overview:

For this assignment, you will create a web page that will help a student calculate their overall (term-long) GPA for a single course.  There will be a couple of other parts, too, but this is the most important part of it.

This page will take a percentage, and translate that into a decimal number between 0.0 and 4.0, in accordance with the grading scale set out in the course syllabus.  For example, if one got 98% of the possible points available in this class, one would get a 4.0 for the term.  If one got 61% of the possible points, one would have earned a 0.0 for the term.  If one got 84% of the possible points, then one would have earned a 2.9.  It's important to note that this can easily be modeled using a piecewise linear function - .  In other words, if one gets less than 65%, one gets a 0.0.  If one gets a 95% or higher, one get a 4.0.  Otherwise, one gets a 1.0 for getting 65%, and gets an extra 0.1 for each percentage point above 65%.  I.e. 66% gets a 1.1, 67% get a 1.2, etc, etc.  Here's a graph of how this looks:

### User-greeting functionality:

When the page has finished loading, you should prompt the user for their name.  If they input a name (i.e., they click on "ok", rather than "cancel"), then you should immediately pop up an alert that welcomes them to the page, and includes their name in the greeting.  For example, if they typed in "Bob" for their name, then clicked "ok", you might greet them with "Welcome to TellMeMyGrade, Bob!".  If the do NOT enter any input (i.e., if they click 'cancel', instead), then you should NOT display the greeting

In the body of the page, you need to create an HTML form that provides a text input element for the user to enter their percentage into, as well as a button for the user to click when they want to see their GPA.  The text input must be clearly labeled, so that the user knows exactly what they're supposed to type into the box.  The button needs to be labeled "Click Here To See Your GPA!".

When the user clicks on the button, the page should display the output on the page.  The actual JavaScript that implements this functionality must be in a separate file, and that function must be called by the appropriate event handler for the button.  Display the output using a different page element (such as a P or DIV element) (you should NOT display it using an alert).
The message should look similar to: "Your GPA is 3.5"  (as opposed to being just "3.5").  If the text input element is blank, then the function must instead produce a message telling the user that the text input field cannot be left blank.  If the text input element does not contain a number, then the function must instead produce a message telling the user that the text input field must contain a number.  If the the text input element contains a number that is less than 1, then the function must instead produce a message telling the user that the expected input is a percentage such as "86" instead of ".86"

### Technical Requirements

For full marks your page must meet all of the following requirements:

• For this assignment, you will use the provided "starter" page, TellMeMyGrade.html You must place the the full names of all the people that worked on this project in the jumbotron at the top of the starter page.
• You must put all your JavaScript code into a separate .js file.
• The page must use CSS generally and Boostrap specifically.
• Use the text-danger class to format any messages telling the user that they have NOT satisfied a given requirement
• Use the text-success class to format any messages telling the user that they have satisfied a given requirement
• You can load Bootstrap from either a local copy or from a CDN.  Unlike jQuery there is no requirement (nor expectation) that you will use a local backup for a CDN.
• The page must use jQuery
• Using 'raw' JavaScript to access form elements and to handle events will be penalized steeply.
• You should make sure that your page will try to use a CDN to get jQuery, but will then use a local backup copy if the CDN doesn't work.
• You must include the local backup copy of jQuery in your submitted work.
• The instructor often grades on the bus (where there's no WiFi) and will most likely notice immediately if your local backup doesn't work so make sure to test this!

### Personal Requirements

For full marks you must meet all of the following requirements:

• You should be able to successfully complete this project even if we haven't covered all the details of the starter file.  For example, the <table> element or any new CSS attributes.  One of the goals for the first few lectures was to develop your ability to either independently learn (or else productively ignore) details that hadn't been covered; you're expected to be able to succeed in spite of several new, not-yet-covered details.
• That said, if you're stuck on something please talk to the instructor or visit the Open Lab and ask for help from the tutor.

### Other Requirements

Your page should be portable in the sense that when one opens the .HTML file, the page should properly open and display all elements on the page.  At this point this mostly means that you should not use absolute file names for extra files (like image files).