Homework 4

Due Date: Aug 8 before midnight; No Late Submissions
Max Points: 100

Important Reminder: As per the course Academic Honesty Statement, cheating of any kind will minimally result in your letter grade for the entire course being reduced by one level.

To be turned in via the submission link on brightspace.

Please remember to justify all answers.

You are encouraged to use the web or the library but are required to cite any external sources used in your answers.

It may be the case that some questions cannot be answered as requested.

  1. If you followed the hints for Project 4 or Project 5, validating user entry into a spreadsheet cell entails a web service call. This is not particularly efficient. Discuss changes to the implementation to remove this inefficiency. Your approach should allow reuse of the validation code developed in earlier projects. 5-points

  2. Discuss the choice of HTML form widgets for each of the following situations: 15-points

    1. Selecting one-or-more US states.

    2. Specifying a color.

    3. Specifying the speed of an animation.

    4. Specifying a person's age in years.

    5. Selecting one-or-more planets from our solar system.

  3. Discuss the tradeoffs between choosing the DOMContentLoaded browser event versus the load browser event. Give examples of situations where you would prefer one over the other. 10-points

  4. A shopping cart is displayed using HTML structured as follows: 

         <div class="cart" id="cart123">
       <ul class="cart-items">
  	 <li>
	   <span class="item-descr" data-product-id="2347">
	     Beefsteak tomatoes
	   </span>
	   <span class="item-quantity" data-unit="pound">
	     2.34 pounds
	   </span>
	   <span class="item-price">$ 5.63</span>
	 </li>
	 <!-- more <li> items with similar structure -->
	 ...
       </ul>
     </div>

    Using only the DOM API, provide JavaScript code for each of the following:

    1. Show code for a function cartItems(cardId) which returns a list containing all the items in the cart having id cartId. For example, given the above data, the returned list for cartItems('cart123') should start out as [ 'Beefsteak tomatoes', ... ].

    2. Show code for a function itemPrice(cartId, itemIndex) which returns a number giving the price of the item at index itemIndex in the cart with id cartId. For example, given the above data, itemPrice('cart123', 0) should return 5.63.

    3. Show code for a function itemUnit(cartId, itemIndex) which returns the data-unit attribute of the item at index itemIndex. For example, itemUnit('cart123', 0) should return 'pound'.

    4. Show code for a function cartPrice(cartId) which returns the total price of the cart (each item contributes unit-price * item-quantity to the total price of the cart).

    5. Using the function from the previous part, show code which appends the total price of the cart between the closing </ul> and the closing </div> using any reasonable HTML formatting.

    If any of the above order-items do not exist, then the above functions should return null. 15-points

  5. The management of a large multi-national corporation is aware of the need to keep its programmers well caffeinatated. Being a woke, environmentally conscious corporation, the management prefers to not use single-brew solutions like K-cups but uses old fashioned coffee pots instead. In the absence of widespread adoption of RFC 2324, the company decides to use HTTP web services with the following services:

    GET /coffee

    Returns a JSON list of all the company locations having coffee pots which are hooked into the web services.

    Example output: [ "Boston", "Johannesburg", "London", "Mumbai", "San Diego", "Sao Paulo" ]

    GET /coffee/LOC

    Returns a JSON list of office areas at LOC having coffee pots.

    For example, GET /coffee/San%20Diego returns [ "Kitchen 1", "Kitchen 2", "Lobby" ].

    GET /coffee/LOC/AREA

    Returns the status of the coffee pot in area AREA at location LOC. Specifically, it returns a JSON pair [ FULL_PERCENT, BREW_MINUTES ] where FULL_PERCENT is a percentage between 0 and 100 specifying how full the coffee pot is and BREW_MINUTES specifies how many minutes ago the coffee was freshly brewed.

    For example, GET /coffee/San%20Diego/Kitchen%202 may return [ 67, 18 ].

    Ignoring errors, these web services can be accessed in a browser using the following wrapper API: 

        async function getLocations() : string[];

    async function getLocationAreas(loc: string) : string[];

    async function getAreaCoffeePotStatus(loc: string, area: string)
      : [ number, number ];

    with a simulated implementation.

    Discuss how you would use the DOM API to implement a single page app (SPA) which allows any employee of the corporation to check the status of coffee pots. Specifically, the UI should allow the employee to specify a location. Then at one second intervals, the page should continuously cycle through all the areas at that location, displaying the coffee pot status for that area. A typical UI is shown in this brief video.

    Your discussion should minimally include the following:

    • The events which would be caught along with a brief description of the operation of the corresponding event handler.

    • The initial setup of the SPA.

    [If you decide to actually write code and submit a .html file, then please be aware of the fact that brightspace silently replaces all <script> sections of HTML with its own content. A workaround for this totally unacceptable behavior is to add a .text extension to the file so that it is submitted as .html.text] 20-points

  6. Repeat the previous question, but use React hooks instead of the DOM API. Specify the hooks you would use; for useEffect() be sure to specify the dependancy array and cleanup function (if needed). 20-points

  7. Explain precisely why the JavaScript expression '2' * 3 + 4 + '5' + 6 results in '1056'. 5-points

  8. Two programmers Bill and Mary are working at a company bigcorp. Mary has a cool web service running on her workstation such that a GET to the URL http://mary.bigcorp.com/company-photos returns a random png image corresponding to a photo taken at a company event. Bill would like to use this web service to display a random company event photo whenever his home page at http://bill.bigcorp.com is accessed. He inserts a call to access Mary's web service in the JavaScript contained on his homepage but it does not work. Give possible reasons for this problem. 10-points