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
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 #5: Making the Web Page Come Alive75 points

Due Thursday, February 28 @ 11:55pm


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 pa5.
  2. Correct any errors and address any comments made on the previous assignment.
  3. HTML — Create a new file at the same level as your index.html document called costestimator.html. It should be structured as follows:
    1. Set the title element for the page to "Insider's Guide to YOURCITYNAME: Trip Cost Estimator"
    2. Add a link element to "style.css"
    3. Copy and paste the exact same header and footer from the body of your index page to your new page's body. Add an id attribute to your header with the value "bodyheader".
    4. Add a section with the id of "calcintro" following your body's header that has its own header and second-level headline of "Trip Cost Calculator". After the header, add a brief paragraph that explains to the user what this page is for. (Read ahead in the assignment first so that you also understand what it does.)
    5. Add three separate section blocks below the "calcintro" section. Inside each section, add a header with a third-level heading. The text of the three headings should read "Budget Accommodations", "Luxury Accommodations", and "Dinner", respectively.
    6. Below each section's header, add one set of paragraph tags. The paragraphs should have the id attributes "budget", "luxury", and "dinner", respectively. The paragraphs should be empty (i.e., they will NOT have any content between <p> and </p>).
    7. Below the body's footer, add a script block as follows: <script src="script.js"></script>.
  4. CSS — Add the following new selectors and styles to your existing style.css file:
    1. Select ALL of the sibling sections of the "calcintro" section, and add:
      1. a border in a color complementary to your site's color scheme
      2. padding that is 1/2 of the base font on the top/bottom and 1 times the base font on the left/right.
      3. rounded corners
    2. Select all H3 elements and make them italic then change them to the opposite type of font as the body text (serif vs. sans-serif or vice versa). Use specific font names rather than "serif" and "sans-serif".
    3. Make text with the class of "cost" to be bold. (Things with this class will be added later.)
  5. JavaScript — Edit the JavaScript file called script.js in your repository to add the following content:
    1. A comment that reads "Space for calcintro" followed by this code, which will guarantee that your first section always is below your header no matter how wide your screen is:

      document.body.onload = function () {
        document.getElementById("calcintro").style.marginTop = document.getElementById("bodyheader").offsetHeight + 25 + 'px';
    2. A comment that reads "Setting Variables" followed by:
      1. Declare two variables (with names that follow the conventions we discussed) then set them to user-inputted values for the number of nights they are visiting and the number of hotel rooms they will need, respectively.
      2. Declare three additional, well-named variables and set them to (a) the price per night for a budget hotel room, (b) the price per night of a luxury hotel room, and (c) a 12% tax for hotel stays.
    3. A comment that reads "Part 1: Budget Lodging" followed by:
      1. Declare a well-named variable that will store the calculation for this user's lodging for their specified number of nights and rooms at a budget hotel. Be sure to factor in the hotel tax.

        Use the variables created above. Don't retype the numbers.
      2. Declare a variable that will hold a string representing a message you'll display to the user expressing the total cost for budget lodging. Use concatenation to join all of the variables together into a sentence that clearly communicates the calculated total cost for their specified values. The total cost (including a dollar sign) should be in an HTML span element that has the class "cost".

        Use the JavaScript method .toFixed(2) after the total cost variable to round to two places for cents: i.e., totalCost.toFixed(2)
      3. Add the following line, replacing the indicated variable with your variable name:

        document.getElementById("budget").innerHTML = your_variable_name_for_the_concatenated_string;
    4. A comment that reads "Part 2: Luxury Lodging" followed by:
      1. Define a function called calcLuxuryCost that accepts four parameters named cost, nts, rms, and tax.
      2. From the function, return the calculated cost of the user's lodging for their specified number of nights and rooms at a luxury hotel. Be sure to factor in the hotel tax.

        Use the function parameters created in the step above. Don't retype the numbers or use the previously created variables.
      3. Outside of the function definition, call your function, passing the appropriate variables as parameters in the correct order, then assign its returned value to a newly-declared variable.
      4. Similar to Part 1, declare a variable that will hold a string representing a message expressing the total cost for luxury lodging, using concatenation to create it. The total cost (including a dollar sign) should be in an HTML span element that has the class "cost".
      5. Make the new message appear in the paragraph with the id of "luxury".
    5. A comment that reads "Part 3: Dinner Bill" followed by:
      1. Build an object called dinner with the following properties and values:
        1. entreeCost set to $18.99
        2. starterCost set to $10.99
        3. dessertCost set to $6.99
        4. childMealCost set to $8.99
        5. mealTax set to 10%
        6. tip set to 20%
        7. numAdults set to 0
        8. numChildren set to 0
      2. Add a method called setNumAdults that asks the user for the number of adults and teens (13 or older) on the trip. Store this value in the numAdults, then return the value.

        Remember when referring to properties from INSIDE an object definition that you must prepend this. to the property name, i.e. this.numAdults.
      3. Add a method called setNumChildren that asks the user for the number of children (12 or younger) on the trip. Store this value in the numChildren property, then return the value.
      4. Add a method called calcMealCost that calculates the total cost of dinner (with tax and post-tax tip) for the user. Make the following assumptions:
        1. One starter (appetizer) is shared among the entire group
        2. Everyone has dessert, and each costs the same for adults and children
        3. Everyone is drinking water (no cost)
      5. Following the object definition, declare a variable that will hold a string representing a message expressing the total cost of a meal for everyone. Use concatenation to create it, calling the method and referring to the object's properties to make the message clear about what has been calculated. The total cost (including a dollar sign) should be in an HTML span element that has the class "cost".
      6. Make this message appear in the paragraph with the id of "dinner".
  6. Reload your page in the browser. If all goes well, your page should look much like the image below. Test your page several times with different user-entered values to ensure the calculations are consistently correct.
  7. Check your math! Remember that an algorithm is only sound if it produces correct answers!
  8. Use the Live Server tool in VS Code to preview your results.
  9. Commit and sync your code to GitHub. On the GitHub site, create a pull request to merge your pa5 branch into the master branch. Please DO NOT delete the pa5 branch when finished.


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.

The new portions of your page should look similar to this:

Sample image for how the results of PA 5 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

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