Web Programming for Non-Programmers

DCI 110

Winter 2019

Credits: 4

Requirements Met: SC, DCI Minor Core Elective

GitHub Site: https://github.com/dci110w19

Class Meeting Metadata
Meets: M
T
W (lab)
2:45 - 4:15pm
3:15 - 4:45pm
2:45 - 4:15pm
Classroom: CGL 212
Instructor's Metadata
Instructor: Jason T. Mickel, Ph.D.
E-Mail: mickelj@wlu.edu How to Email a Professor
Phone: (540) 458-8653
Office: Leyburn M33
Office Hours: M 11:00 - 12:00
T 11:00 - 12:00
W 1:00 - 2:00
Or by appointment

Programming Assignment #6: Refactoring the Cost Estimator75 points

Due Tuesday, March 12 @ 11:55pm

Overview

For this programming assignment, you'll be performing a programming practice called "refactoring", which means to improve the underlying code while maintaining the same function of the original. You'll be refactoring the cost estimator to check for valid user input in form fields rather than from the prompt function.

As with the previous assignment, this lab has multiple steps that require attention to detail. Work through it step by step and check your work regularly.

Steps to Complete the Assignment

  1. In VS Code, be sure you are on the master branch of your Insider's Guide assignment. Perform a sync in the lower left corner by clicking the "two arrows in a circle" button. Sync your master branch Then add a new branch called pa6.
  2. Correct any errors and address any comments made on the previous assignment.
  3. HTML — Edit your costestimator.html file:
    1. Change the introductory statement to ask the user to enter values in the fields that follow.
    2. Remove the three sections that contain the paragraphs with the ids "budget", "luxury", and "dinner".
    3. Add a new section with the id "userinput" that includes the following form fields. You do NOT need the form element.
      1. An input of type "number" with a value of "1" and the id "nights". Label the input to indicate that it represents the number of nights staying.
      2. An input of type "number" with a value of "1" and the id "rooms". Label the input to indicate that it represents the number of rooms being booked.
      3. An input of type "number" with a value of "1" and the id "adults". Label the input to indicate that it represents the number of adults and teens (13+) traveling.
      4. An input of type "number" with a value of "0" and the id "children". Label the input to indicate that it represents the number of children (12-) traveling.
      5. A select element with the id "hotel" and containing two options: (a) one with value "b" and the text "Budget" and (b) one with value "l" and the text "Luxury". Label the select element to indicate that it represents the type of hotel being booked.
    4. Add a new section with the id "results". The section should be empty.
  4. CSS — Edit your stylesheet file:
    1. Set labels in the "userinput" section to be 60% wide with text aligned to the right.
    2. Set inputs in the "userinput" section to have 5 pixels of both padding and bottom margin.
    3. Set tables in the "results" section to have 2x base font of bottom margin and the full width of the browser.
    4. Set th elements in the "results" section to have right-aligned text.
    5. Set td elements in the "results" section to be 20% wide with right-aligned text.
    6. Set captions in the "results" section to be bold, 1.5x the base font, top and bottom padding to 1/2 the base font, and text aligned to the left.
  5. JavaScript — Edit your JavaScript file:
    1. Remove all code except for the "Space for calcintro" section and the dinner object.
    2. Create a new "hotel" object with the following properties and methods:
      1. Property "budgetAccom" with a value set by you to a price for a budget hotel room
      2. Property "luxuryAccom" with a value set by you to a price for a luxury hotel room
      3. Property "tax" with a value set by you to a value representing a hotel tax rate
      4. Property "nights" with a value to 1
      5. Property "rooms" with a value to 1
      6. Property "code" with a value to "b"
      7. Property "type" with a value to "Budget"
      8. Method "calcCost" that returns the total hotel cost (room cost X nights X rooms + applied tax) based on the user's choice of hotel code — "b" or "l".
    3. Change the default value for "numAdults" in your dinner object to 1.
    4. Write a function "updateHotel" that contains the following code:
      var hotelElem = document.getElementById("hotel");
      hotel.code = hotelElem.options[hotelElem.selectedIndex].value;
      hotel.type = hotelElem.options[hotelElem.selectedIndex].text;
      displayCosts();
      
    5. Write a function "updateNights" that:
      1. Extracts the value for the number of nights from the corresponding HTML input field. Be sure that the value is a number.
      2. If the number of nights is less than 1, display an alert that tells the user that the number must be 1 or more, then set the value for the above input field to the current value for nights in the hotel object.
      3. Otherwise, set the hotel's nights property to the user's value, then call the displayCosts() function.
    6. Write a function "updateRooms" that:
      1. Extracts the value for the number of rooms from the corresponding HTML input field. Be sure that the value is a number.
      2. If the number of rooms is less than 1, display an alert that tells the user that the number must be 1 or more, then set the value for the above input field to the current value for rooms in the hotel object.
      3. Otherwise, set the hotel's rooms property to the user's value, then call the displayCosts() function.
    7. Write a function "updateAdults" that:
      1. Extracts the value for the number of adults from the corresponding HTML input field. Be sure that the value is a number.
      2. If the number of adults is less than 1, display an alert that tells the user that the number must be 1 or more, then set the value for the above input field to the current value for adults in the dinner object.
      3. Otherwise, set the dinner's numAdults property to the user's value, then call the displayCosts() function.
    8. Write a function "updateChildren" that:
      1. Extracts the value for the number of children from the corresponding HTML input field. Be sure that the value is a number.
      2. If the number of children is less than 0, display an alert that tells the user that the number must be 0 or more, then set the value for the above input field to the current value for children in the dinner object.
      3. Otherwise, set the dinner's numChildren property to the user's value, then call the displayCosts() function.
    9. Write a function "displayCosts" that:
      1. Sets the total property of the hotel object to the calculated cost of the hotel. Use the .toFixed(2) method to format the value to reflect currency.
      2. Sets the total property of the dinner object to the calculated cost of a meal. Use the .toFixed(2) method to format the value to reflect currency.
      3. Declare a variable called "results" and assign it the initial value of "<table>".
      4. Continue building the table by concatenating a caption using the following code, which uses the += operator as a shortcut to building the "results" string:
        results += "Your " + hotel.type + " Hotel Stay:";
        
      5. The first row of the table should have two columns: (a) a table header cell "Cost per night" and (b) a table data cell with the nightly cost of a room based on the user's chosen hotel code.
      6. Create four more rows with labels and values for number of nights, number of rooms, hotel tax, and total cost.
      7. End the first table but start a new table still as part of the "results" variable.
      8. Set a caption to the second table that reads "Your Estimated Dinner Cost:"
      9. This table will have four columns: Item, Cost, Number, and a line-item Total.
      10. Add rows for appetizer (1 for the whole group), adult entrees, children's meals (only display this row if there are children), dessert for every person, tax rate, tip rate, and the grand total. The table should resemble the style of the one in the example below.
      11. End the HTML for the table in the "results" variable.
      12. Set the innerHTML for the "results" section from your HTML to the value of the "results" variable.
    10. Call the displayCosts function.
    11. Set up five different events that fire when the user changes the values of the fields on the page. For example, when the user changes the field with the id "nights", it should call the updateNights function.
  6. Use the Live Server tool in VS Code to preview your results.
  7. Commit and sync your code to GitHub. On the GitHub site, create a pull request to merge your pa6 branch into the master branch. Please DO NOT delete the pa6 branch when finished.

Expectations

HTML, CSS, and JavaScript should be properly formatted following their respective coding conventions discussed in class.

You can use the live preview extension in VSCode to test the page as you're building (click Preview Available in the lower left of the VSCode window), but when you're finished, be sure to check the live URL at https://dci110w19.github.io/insiders-YOURUSERNAME/costestimator.html (e.g. "https://dci110w19.github.io/insiders-mickelj/costestimator.html") to see that it is completely uploaded and working.

Your page should look similar to the following images depending on the user's choices:

Sample image for how the results of Lab 6 should look

Sample image for how the results of Lab 6 should look

Grading Specifications

You will be graded on:

  1. Accurately meeting all of the specifications above
  2. Following HTML, CSS, and JavaScript coding rules and conventions discussed in class and in the texts
  3. Working JavaScript that has no syntax errors and correct calculations and graphics
  4. Variables are used correctly
  5. Correcting errors from the previous lab

The lab will begin with a full score of 75 points and deductions will be made according to the amount and severity of errors.