CIS 371

Practice Coding Final

Winter 2020

Below are several practice problems for the coding portion of the final exam. They are not due for credit.

GitHub Classroom link: classroom.github.com/a/LmV8uD1m

For the real exam, you will be expected to use GitHub Classroom to retrieve and submit the problems.

Make sure your code works on several different files. For the real exam, I will test your code on HTML files that you don't have access to.

Problem 1: Decorate

Add JavaScript to getteysburg.html so that when the "Decorate" button is pushed

The sections of the text with the all-caps class become ALL CAPS, and
Each word in sections with the upcase class Begin With A Capital Letter.

Problem 2: Max/Min

Add JavaScript to maxMin.html compute and display the maximum, minimum, and average of a list of test values. When the page loads, it should display 10 input fields for 10 test scores. There should also be a "Submit" button and a "More" button.

The "Calculate" button should
1. Display the maximum, minimum, and average of the test scores, and
2. highlight the maximum and minimum values.
3. Ignore empty fields
The "More" button should add 10 more input fields.

Bonus: Add a "Remove" button that, when clicked, will display a small, clickable "x" next to each input field. Clicking an "x" will remove the corresponding input field.

Problem 3: Collapsible List

Write a JavaScript function (or class) that will let you show and hide the contents of a list. Specifically, look for a container with a class of hideableList. That container will have another container with a class of hl-header. Clicking on the header should toggle whether the list below is visible. You can use hideableLists.html for testing.

<div class='hideableList'> <p class='hl-header'>A list of states</p> <ul> <li>Alabama</li> <li>Alaska</li> <li>Arkansas</li> <li>Michigan</li> <li>Missouri</li> <li>Mississippi</li> <li>...</li> <li>Wyoming</li> </ul> </div>

Hints:

Look at this as two problems: (1) Toggling the list itself, and (2) adding/showing/hiding the triangles. Get the list toggling working first.
Write a function that adds a click handler to the hideableList. You can use a local variable in that function to keep track of whether the list is visible or hidden.
You will also want to remember the original display property of the list (block, inline-block, etc.)
Put the triangles at the head of the hl-header container.
The right-facing triangle is this character: '\u25BC'.
The left-facing triangle is this character: '\u25B6'.
Here is one way to append an element as the first child: element1.insertBefore(element2,element1.childNodes[0]);

Problem 4: AJAX

Write a web page using only HTML, CSS, and JavaScript that displays a receipt for an online order.

Initally display an input box that asks for an order number.

When the order number is submitted, fetch the order using AJAX, then display it.

The orders are available at https://www.cis.gvsu.edu/~kurmasz/Orders/:id (where :id is the order number).

Include the total in the display

Add CSS to format the page nicely. (Note: On the exam, I will look for more stying than is present in the samples below.)

Make sure that you can look up more than one order without having to refresh the page.

Problem 5: React

Repeat Problem 4. This time, use React

Updated Monday, 6 April 2020, 2:00 PM