To Projects

IT 238 -- Project 1

Read these guidelines before submitting projects: Project Submission Guidelines

Project 1a. Test Calculation Function

• Write a function that performs a calculation. For example, here is a function that converts a length in inches into centimeters:
  

  function in2cm(inches) {
      var cm = inches * 2.54;
      return cm;
  }
  

• Test your function. Use a prompt box to interactively enter the input values.
• Show the output from your function with an alert box or using the document.writeln method.
• Here are some examples of calculations:
  
  1. Convert radians to degrees, minutes, and seconds.
  2. Convert light years to parsecs.
  3. Compute the roots of a quadratic equation.
  4. Compute the wind chill, using the temperature and wind speed as inputs.
  5. Convert a course score to a course grade.
  6. For football fans: compute a passer rating using the inputs number of passing attempts, number of completions, passing yards, touchdown passes, interceptions. Find the formula on Wikipedia.
• As in-class examples, we have (1) converting inches to centimeters, (2) converting meters to feet and inches, and (3) calculating the monthly payment for a loan given the inputs principal, interest rate, and the term of the loan. Don't choose any of these three calculations to implement for Projects 1a and 1b.
• Include a link back to the projects directory page.
• Grading Breakdown: Functionality: 60%; Creativity on Choice of Function: 15%;  Source Code Comments 10%; Software Headers: 5%; Zipfile Name: 5%; URL: 5%.

Project 1b. Perform Calculation on Webpage

• Include at least one image on your Project 1b HTML page.
• Create a JavaScript script named script.js that calls your function from Project 1a to perform a calculation.
• Use the MonthlyPayment Example as a model.
• Include an h1 header to let the user know the purpose of the page.
• In each of the HTML, CSS, and JavaScript files, include source code comments and headers with your name, project number, and submit date.
• You should define three functions in your JavaScript file:
  
  1. a calculation function that performs a calculation using a formula,
  2. an event handler function that executes when the button is clicked,
  3. an init function that attaches the event handler function to the button
• The calculation function should not access any HTML controls, it should accept its inputs as parameters, and return the result of the calculation, for example:
  

  function in2cm(inches) {
      var cm = inches * 2.54;
      return cm;
  }
  

• Enter the inputs to the function in textfields.
• Display the output in a textfield.
• Include labels and possibly instructions to make the use of your user interface clear to the user.
• Use an external CSS stylesheet to set the fonts and colors.
• All of your JavaScript code should be in an external script file with the extension .js. In particular, don't use inline JavaScript code like this:
  

  <button id="btn1" onclick="eventHandler( );">
  

  Instead, to add an event handler to a control, use
  

  var button1 = document.getElementById("btn1");
  button1.addEventHandler("click", eventHandler);
  

  or

  var button1 = document.getElementById("btn1");
  button1.onclick = eventHandler;
  

• Include this line at the bottom of your script:
  

  window.addEventListener("load", init);
  

• Include a link back to the projects page.
• Don't use the name attribute to access HTML controls, use the id attribute with getElementById. The name attribute is for server-side programming.
• Use an external stylesheet your your HTML page named styles.css. Don't use document-level of inline styles except in special cases. Also don't use deprecated HTML tags such as center, bold or font.
• Grading Breakdown: Functionality: 60%; Layout and Styles (CSS): 15%; Source Code Comments 10%; Source Code Headers: 5%; Submitted Zipfile: 5%; URL on D2L: 5%.