From bdf53b9bb14b1e7055b758cfaf6488c8f1be8ef3 Mon Sep 17 00:00:00 2001
From: RobBlocker <rblocker@stcharlessd.org>
Date: Wed, 10 Apr 2019 10:17:21 -0500
Subject: [PATCH 1/2] 1st

---
 case1/{mpl_links_txt.html => mpl_links.html}  |  7 +-
 case1/mpl_links.js                            | 24 ++++++
 case1/mpl_links_txt.js                        | 15 ----
 .../{dl_expense_txt.html => dl_expense.html}  |  5 +-
 case2/{dl_expense_txt.js => dl_expense.js}    |  0
 review/{co_cart_txt.html => co_cart.html}     |  7 +-
 review/co_cart.js                             | 85 +++++++++++++++++++
 review/co_cart_txt.js                         | 47 ----------
 review/{co_credit_txt.html => co_credit.html} |  5 +-
 review/{co_credit_txt.js => co_credit.js}     | 50 +++++++++--
 10 files changed, 168 insertions(+), 77 deletions(-)
 rename case1/{mpl_links_txt.html => mpl_links.html} (97%)
 create mode 100644 case1/mpl_links.js
 delete mode 100644 case1/mpl_links_txt.js
 rename case2/{dl_expense_txt.html => dl_expense.html} (96%)
 rename case2/{dl_expense_txt.js => dl_expense.js} (100%)
 rename review/{co_cart_txt.html => co_cart.html} (94%)
 create mode 100644 review/co_cart.js
 delete mode 100644 review/co_cart_txt.js
 rename review/{co_credit_txt.html => co_credit.html} (95%)
 rename review/{co_credit_txt.js => co_credit.js} (62%)
diff --git a/case1/mpl_links_txt.html b/case1/mpl_links.html
similarity index 97%
rename from case1/mpl_links_txt.html
rename to case1/mpl_links.html
index 956d056..3b1d0c6 100644
--- a/case1/mpl_links_txt.html
+++ b/case1/mpl_links.html
@@ -7,8 +7,8 @@
     Case Problem 1
     
     Monroe Public Library Government Links
-    Author: 
-    Date:   
+    Author: Rob Blocker
+    Date:   04/10/19
 
     Filename: mpl_links.html
    -->
@@ -17,6 +17,7 @@
    <meta charset="utf-8" />
    <link href="mpl_base.css" rel="stylesheet"  />
    <link href="mpl_layout.css" rel="stylesheet"  />
+   <script src="mpl_links.js" async></script>
 </head>
 
 <body>
@@ -74,7 +75,7 @@
       </nav>
       
       <article>
-         <form id="govLinks" name="govLinks">
+         <form id="govLinks" name="govLinks" >
          <h1>Government Sites on the Web</h1>
 
          <p>Select a site from one of the drop-down lists below.</p>
diff --git a/case1/mpl_links.js b/case1/mpl_links.js
new file mode 100644
index 0000000..da98a17
--- /dev/null
+++ b/case1/mpl_links.js
@@ -0,0 +1,24 @@
+"use strict";
+
+/*
+   New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
+   Tutorial 13
+   Case Problem 1
+
+   Author: Denise Kruschev
+   Date:   2018-03-01
+   
+   Filename: mpl_links.js
+
+*/
+
+
+window.addEventListener("load", function() {
+   var allSelect = document.querySelectorAll("form#govLinks select");
+
+   for (var i = 0; i < allSelect.length; i++) {
+      allSelect[i].onchange = function(e) {
+         location.href = e.target.value;
+      }
+   }
+});
\ No newline at end of file
diff --git a/case1/mpl_links_txt.js b/case1/mpl_links_txt.js
deleted file mode 100644
index fe21beb..0000000
--- a/case1/mpl_links_txt.js
+++ /dev/null
@@ -1,15 +0,0 @@
-"use strict";
-
-/*
-   New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
-   Tutorial 13
-   Case Problem 1
-
-   Author: 
-   Date:   
-   
-   Filename: mpl_links.js
-
-*/
-
-
diff --git a/case2/dl_expense_txt.html b/case2/dl_expense.html
similarity index 96%
rename from case2/dl_expense_txt.html
rename to case2/dl_expense.html
index 48fadef..a6617cb 100644
--- a/case2/dl_expense_txt.html
+++ b/case2/dl_expense.html
@@ -7,8 +7,8 @@
     Case Problem 2
     
     Travel Expense Report
-    Author: 
-    Date:   
+    Author: Rob and Connor
+    Date:   04/10/19
 
     Filename: dl_expense.html
    -->
@@ -17,6 +17,7 @@
    <meta charset="utf-8" />
    <link href="dl_base.css" rel="stylesheet"  />
    <link href="dl_layout.css" rel="stylesheet"  />
+   <script src="dl_expense.js" async></script>
 
 
 </head>
diff --git a/case2/dl_expense_txt.js b/case2/dl_expense.js
similarity index 100%
rename from case2/dl_expense_txt.js
rename to case2/dl_expense.js
diff --git a/review/co_cart_txt.html b/review/co_cart.html
similarity index 94%
rename from review/co_cart_txt.html
rename to review/co_cart.html
index f2fe302..3de1bde 100644
--- a/review/co_cart_txt.html
+++ b/review/co_cart.html
@@ -7,8 +7,8 @@
     Review Assignment
     
     Coctura Cart Page
-    Author: 
-    Date:   
+    Author: Rob and Connor
+    Date:   04/10/19
 
     Filename: co_cart.html
    -->
@@ -17,6 +17,7 @@
    <meta charset="utf-8" />
    <link href="co_base.css" rel="stylesheet"  />
    <link href="co_layout3.css" rel="stylesheet"  />     
+   <script src="co_cart.js" async></script>
 
 </head>
 
@@ -66,7 +67,7 @@ <h3>Customer Rating (903 votes): <img src="co_stars4.png" alt="4 stars" /></h3>
    </section>
    
    <section id="orderSection">
-      <form id="cart" name="cart">
+      <form id="cart" name="cart" method="get" action="co_credit.html">
         
         <table id="cartTable">
            <caption>Shopping Cart</caption>
diff --git a/review/co_cart.js b/review/co_cart.js
new file mode 100644
index 0000000..d56385f
--- /dev/null
+++ b/review/co_cart.js
@@ -0,0 +1,85 @@
+"use strict";
+
+/*
+   New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
+   Tutorial 13
+   Review Assigment
+
+   Shopping Cart Form Script
+   
+   Author: 
+   Date:   
+   
+   Filename: co_cart.js
+   
+   Function List
+   =============
+   
+   calcCart()
+      Calculates the cost of the customer order
+      
+   formatNumber(val, decimals)
+      Format a numeric value, val, using the local
+      numeric format to the number of decimal
+      places specified by decimals
+      
+   formatUSACurrency(val)
+      Formats val as U.S.A. currency
+   
+*/ 
+
+window.addEventListener("load", function() {
+	
+	//initial cost of the order
+	calcCart();
+	
+	//form event handlers
+	cartForm.elements.modelQty.onchange = calcCart;
+	
+	var shippingOptions = document.querySelectorAll('input[name="shipping"]');
+	for (var i = 0; i < shippingOptions.length; i++) {
+		shippingOptions[i].onclick = calcCart;
+	}
+});
+	
+function calcCart() {
+   var cartForm = document.forms.cart;
+   
+   // inital cost of the order
+   var mCost = cartForm.elements.modelCost.value;
+   var qIndex = cartForm.elements.modelQty.selectedIndex;
+   var quantity = cartForm.elements.modelQty[qIndex].value;
+   
+   // Initial cost = model cost x quantity 
+   var orderCost = mCost*quantity;
+   cartForm.elements.orderCost.value = formatUSCurrency(orderCost);
+
+   // cost of shipping
+   var shipCost = document.querySelector('input[name="shipping"]:checked').value*quantity;
+   cartForm.elements.shippingCost.value = formatNumber(shipCost, 2);
+   
+   // order subtotal
+   cartForm.elements.subTotal.value = formatNumber(orderCost + shipCost, 2);
+   
+   // sales tax
+   var salesTax = 0.05*(orderCost + shipCost);
+   cartForm.elements.salesTax.value = formatNumber(salesTax, 2);
+   
+   // total order
+   var cartTotal = orderCost + shipCost + salesTax;
+   cartForm.elements.cartTotal.value = formatUSCurrency(cartTotal);
+   
+   // store the order details
+   cartForm.elements.shippingType.value = 
+      document.querySelector('input[name="shipping"]:checked').nextSibling.nodeValue;
+}
+
+
+function formatNumber(val, decimals) {
+   return val.toLocaleString(undefined, {minimumFractionDigits: decimals, 
+                                         maximumFractionDigits: decimals});
+}
+
+function formatUSCurrency(val) {
+   return val.toLocaleString('en-US', {style: "currency", currency: "USD"} );
+}
diff --git a/review/co_cart_txt.js b/review/co_cart_txt.js
deleted file mode 100644
index 4a0ee57..0000000
--- a/review/co_cart_txt.js
+++ /dev/null
@@ -1,47 +0,0 @@
-"use strict";
-
-/*
-   New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
-   Tutorial 13
-   Review Assigment
-
-   Shopping Cart Form Script
-   
-   Author: 
-   Date:   
-   
-   Filename: co_cart.js
-   
-   Function List
-   =============
-   
-   calcCart()
-      Calculates the cost of the customer order
-      
-   formatNumber(val, decimals)
-      Format a numeric value, val, using the local
-      numeric format to the number of decimal
-      places specified by decimals
-      
-   formatUSACurrency(val)
-      Formats val as U.S.A. currency
-   
-*/ 
-
-
-
-
-
-
-
-
-
-
-function formatNumber(val, decimals) {
-   return val.toLocaleString(undefined, {minimumFractionDigits: decimals, 
-                                         maximumFractionDigits: decimals});
-}
-
-function formatUSCurrency(val) {
-   return val.toLocaleString('en-US', {style: "currency", currency: "USD"} );
-}
diff --git a/review/co_credit_txt.html b/review/co_credit.html
similarity index 95%
rename from review/co_credit_txt.html
rename to review/co_credit.html
index 0620047..49ef3b7 100644
--- a/review/co_credit_txt.html
+++ b/review/co_credit.html
@@ -7,8 +7,8 @@
     Review Assignment
     
     Coctura Credit Page
-    Author: 
-    Date:   
+    Author: Rob and Connor
+    Date:   04/10/19
 
     Filename: co_credit.html
    -->
@@ -17,6 +17,7 @@
    <meta charset="utf-8" />
    <link href="co_base.css" rel="stylesheet"  />
    <link href="co_layout4.css" rel="stylesheet"  />      
+   <script src="co_credit.js" async></script>
 
 </head>
 
diff --git a/review/co_credit_txt.js b/review/co_credit.js
similarity index 62%
rename from review/co_credit_txt.js
rename to review/co_credit.js
index 85bcbde..5eb4a3b 100644
--- a/review/co_credit_txt.js
+++ b/review/co_credit.js
@@ -7,8 +7,8 @@
 
    Credit Card Form Script
    
-   Author: 
-   Date:   
+   Author: Aisha Jahlan
+   Date:   2018-03-01
    
    Filename: co_credit.js
    
@@ -44,10 +44,50 @@
 
 */
 
+window.addEventListener("load", function(){   
+   // Retrieve the field/value pairs from the URL
+   var orderData = location.search.slice(1);
+   orderData = orderData.replace(/\+/g," ");
+   orderData = decodeURIComponent(orderData);
+   var orderFields = orderData.split(/[&=]/g);
+   
+   // Write the field values to the order form
+   document.forms.order.elements.modelName.value = orderFields[3];
+   document.forms.order.elements.modelQty.value = orderFields[5]; 
+   document.forms.order.elements.orderCost.value = orderFields[7];
+   document.forms.order.elements.shippingType.value = orderFields[9];   
+   document.forms.order.elements.shippingCost.value = orderFields[13];
+   document.forms.order.elements.subTotal.value = orderFields[15];
+   document.forms.order.elements.salesTax.value = orderFields[17];
+   document.forms.order.elements.cartTotal.value = orderFields[19];    
+} );
+
+window.addEventListener("load", function() {
+   document.getElementById("subButton").onclick = runSubmit;
+   document.getElementById("cardHolder").oninput = validateName;
+   document.getElementById("cardNumber").oninput = validateNumber;  
+   document.getElementById("expDate").oninput = validateDate;
+   document.getElementById("cvc").oninput = validateCVC;   
+});
+
+function runSubmit() {
+   validateName();
+   validateCredit();
+   validateNumber();
+   validateDate();
+   validateCVC();
+}
 
-
-
-
+function validateDate() {
+   var cardDate = document.getElementById("expDate");
+   if (cardDate.validity.valueMissing) {
+      cardDate.setCustomValidity("Enter the expiration date");
+   } else if (/^(0[1-9]|1[0-2])\/20[12]\d$/.test(cardDate.value) === false) {
+      cardDate.setCustomValidity("Enter a valid expiration date");      
+   } else {
+      cardDate.setCustomValidity("");
+   }   
+}
 
 
 

From f27b1e675afdbf148d4c52f27cefb4dbc17b3da3 Mon Sep 17 00:00:00 2001
From: RobBlocker <rblocker@stcharlessd.org>
Date: Thu, 11 Apr 2019 09:21:01 -0500
Subject: [PATCH 2/2] 2nd

---
 case2/dl_expense.html                         |   8 +-
 case2/dl_expense.js                           |  53 ++++++-
 case3/{mas_reg2_txt.html => mas_reg2.html}    |   7 +-
 case3/mas_reg2.js                             |  36 +++++
 case3/mas_reg2_txt.js                         |  23 ---
 ...as_register_txt.html => mas_register.html} |   5 +-
 case3/mas_register.js                         |  99 +++++++++++++
 case3/mas_register_txt.js                     |  30 ----
 case4/ws_cloud.js                             | 135 ++++++++++++++++++
 case4/ws_cloud_txt.js                         |  84 -----------
 .../{ws_lincoln_txt.html => ws_lincoln.html}  |   4 +-
 11 files changed, 334 insertions(+), 150 deletions(-)
 rename case3/{mas_reg2_txt.html => mas_reg2.html} (95%)
 create mode 100644 case3/mas_reg2.js
 delete mode 100644 case3/mas_reg2_txt.js
 rename case3/{mas_register_txt.html => mas_register.html} (95%)
 create mode 100644 case3/mas_register.js
 delete mode 100644 case3/mas_register_txt.js
 create mode 100644 case4/ws_cloud.js
 delete mode 100644 case4/ws_cloud_txt.js
 rename case4/{ws_lincoln_txt.html => ws_lincoln.html} (98%)

diff --git a/case2/dl_expense.html b/case2/dl_expense.html
index a6617cb..afe3fbb 100644
--- a/case2/dl_expense.html
+++ b/case2/dl_expense.html
@@ -71,20 +71,20 @@ <h1>Expense Report</h1>
             <th>First Name<span>*</span></th>
             <th>M.I.</th>
             <th>Account<span>*</span></th>
-            <td><input type="text" name="accID" id="accID" placeholder="ACTnnnnnn" required /></td>
+            <td><input type="text" name="accID" id="accID" placeholder="ACTnnnnnn" required  pattern="ACT\d{6}"/></td>
          </tr>
          <tr>
             <td><input type="text" name="lname" id="lname" required /></td>
             <td><input type="text" name="fname" id="fname" required /></td>
             <td><input type="text" name="init" id="init" required /></td>
             <th>Department<span>*</span></th>
-            <td><input type="text" name="deptID" id="deptID" required placeholder="DEPTnnnnnn" /></td>
+            <td><input type="text" name="deptID" id="deptID" required placeholder="DEPTnnnnnn"  pattern="DEPT\d{4-6}"/></td>
          </tr>
          <tr>
             <th>Social Security Number<span>*</span></th>
-            <td colspan="2"><input type="text" name="ssn" id="ssn" required placeholder="nnn-nn-nnnn" /></td>
+            <td colspan="2"><input type="text" name="ssn" id="ssn" required placeholder="nnn-nn-nnnn" pattern="d{3}-\d{2}-\d{4}"/></td>
             <th>Project<span>*</span></th>
-            <td><input type="text" name="projID" id="projID" required placeholder="PROJ-xx-ddd" /></td>
+            <td><input type="text" name="projID" id="projID" required placeholder="PROJ-xx-ddd" pattern="PROJ-\{a-z}-\d{3}" /></td>
          </tr>
       </table>
 
diff --git a/case2/dl_expense.js b/case2/dl_expense.js
index bc32b41..5d1bee8 100644
--- a/case2/dl_expense.js
+++ b/case2/dl_expense.js
@@ -5,10 +5,10 @@
    Tutorial 13
    Case Problem 2
 
-   Author: 
-   Date:   
+   Author: Kay Ramirez
+   Date:   2018-03-01
    
-   Filename: dl_expenses.js
+   Filename: dl_expense.js
    
    Function List
    =============
@@ -31,9 +31,56 @@
       
 */
 
+window.addEventListener("load", function() {
+   var changingCells = document.querySelectorAll("table#travelExp input.sum");
+   
+   for (var i = 0; i < changingCells.length; i++) {
+      changingCells[i].onchange = calcExp;
+   }
+   
+   document.getElementById("submitButton").onclick = function() {
+      validateSummary();
+   };
+});
+
+function validateSummary() {
+   var summary = document.getElementById("summary");
+   if (summary.validity.valueMissing) {
+      summary.setCustomValidity("You must include a summary of the trip in your report.");
+   } else {
+      summary.setCustomValidity("");
+   }
+}
 
+function calcClass(sumClass) {
+   var sumFields = document.getElementsByClassName(sumClass);
+   var sumTotal = 0;
+   
+   for (var i=0; i < sumFields.length; i++) {
+      var itemValue = parseFloat(sumFields[i].value);
+      if (!isNaN(itemValue)) {
+         sumTotal += itemValue;
+      }
+   }
+   return sumTotal;
+}
 
 
+function calcExp() {
+   
+   var expTable = document.querySelectorAll("table#travelExp tbody tr");
+   
+   for (var i = 0; i < expTable.length; i++) {
+      document.getElementById("subtotal"+i).value = formatNumber(calcClass("date"+i), 2);
+   }
+   
+   document.getElementById("transTotal").value = formatNumber(calcClass("trans"), 2);
+   document.getElementById("lodgeTotal").value = formatNumber(calcClass("lodge"), 2);
+   document.getElementById("mealTotal").value = formatNumber(calcClass("meal"), 2);
+   document.getElementById("otherTotal").value = formatNumber(calcClass("other"), 2);
+   document.getElementById("expTotal").value = formatUSCurrency(calcClass("sum"));
+}
+
 
 
 
diff --git a/case3/mas_reg2_txt.html b/case3/mas_reg2.html
similarity index 95%
rename from case3/mas_reg2_txt.html
rename to case3/mas_reg2.html
index 63ca91a..4ed6976 100644
--- a/case3/mas_reg2_txt.html
+++ b/case3/mas_reg2.html
@@ -7,8 +7,8 @@
       Case Problem 3
 
       Media Arts Society Registration Form #2
-      Author: 
-      Date:   
+      Author: Rob and Connor
+      Date:   4-11-2019
 
       Filename:  mas_reg2.html
 
@@ -19,7 +19,8 @@
    <title>MAS Registration Payment Form</title>
    <link href="mas_base.css" rel="stylesheet" />
    <link href="mas_styles.css" rel="stylesheet" />
->
+   <script src="mas_reg2.js"  async > </script>
+
 </head>
 
 <body>
diff --git a/case3/mas_reg2.js b/case3/mas_reg2.js
new file mode 100644
index 0000000..e62fd46
--- /dev/null
+++ b/case3/mas_reg2.js
@@ -0,0 +1,36 @@
+"use strict";
+/*
+   New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
+   Tutorial 13
+   Case Problem 3
+
+
+   Filename: mas_reg2.js
+
+   Author:  Gary Unwin
+   Date:    2018-03-01
+
+
+   Function List
+   =============
+      
+   writeSessionValues()
+      Writes data values from session storage in to the
+      registration summary form
+
+
+*/
+
+window.addEventListener("load", writeSessionValues);
+
+function writeSessionValues() {
+   
+   document.getElementById("regName").textContent = sessionStorage.confName;
+   document.getElementById("regGroup").textContent = sessionStorage.confGroup;   
+   document.getElementById("regEmail").textContent = sessionStorage.confMail;    
+   document.getElementById("regPhone").textContent = sessionStorage.confPhone; 
+   document.getElementById("regSession").textContent = sessionStorage.confSession; 
+   document.getElementById("regBanquet").textContent = sessionStorage.confBanquet;
+   document.getElementById("regPack").textContent = sessionStorage.confPack;
+   document.getElementById("regTotal").textContent = "$" + sessionStorage.confTotal;
+}
\ No newline at end of file
diff --git a/case3/mas_reg2_txt.js b/case3/mas_reg2_txt.js
deleted file mode 100644
index 629f18b..0000000
--- a/case3/mas_reg2_txt.js
+++ /dev/null
@@ -1,23 +0,0 @@
-"use strict";
-/*
-   New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
-   Tutorial 13
-   Case Problem 3
-
-
-   Filename: mas_reg2.js
-
-   Author:  
-   Date:    
-
-
-   Function List
-   =============
-      
-   writeSessionValues()
-      Writes data values from session storage in to the
-      registration summary form
-
-
-*/
-
diff --git a/case3/mas_register_txt.html b/case3/mas_register.html
similarity index 95%
rename from case3/mas_register_txt.html
rename to case3/mas_register.html
index 18e9a0c..6cdfcbb 100644
--- a/case3/mas_register_txt.html
+++ b/case3/mas_register.html
@@ -7,8 +7,8 @@
       Case Problem 3
 
       Media Arts Society Registration Form
-      Author: 
-      Date:   
+      Author: Rob and Connor
+      Date:   4-11-2019
 
       Filename:  mas_register.html
 
@@ -19,6 +19,7 @@
    <title>MAS Registration Form</title>
    <link href="mas_base.css" rel="stylesheet" />
    <link href="mas_styles.css" rel="stylesheet" />
+   <script src="mas_register.js"  async > </script>
 
 </head>
 
diff --git a/case3/mas_register.js b/case3/mas_register.js
new file mode 100644
index 0000000..4beadaf
--- /dev/null
+++ b/case3/mas_register.js
@@ -0,0 +1,99 @@
+"use strict";
+/*
+   New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
+   Tutorial 13
+   Case Problem 3
+
+
+   Filename: mas_register.js
+
+   Author:  Gary Unwin
+   Date:    2018-03-01
+   
+   Function List
+   =============
+   
+   formTest()
+      Performs a validation test on the selection of the conference
+      session package and the conference discount number
+   
+   calcCart()
+      Calculates the cost of the registration and saves data
+      in session storage
+      
+   writeSessionValues()
+      Writes data values from session storage in to the
+      registration summary form
+
+*/
+
+
+window.addEventListener("load", function() {
+   calcCart();
+   document.getElementById("regSubmit").onclick = sessionTest;   
+   document.getElementById("fnBox").onblur = calcCart;
+   document.getElementById("lnBox").onblur = calcCart; 
+   document.getElementById("groupBox").onblur = calcCart;   
+   document.getElementById("mailBox").onblur = calcCart;   
+   document.getElementById("phoneBox").onblur = calcCart;   
+   document.getElementById("sessionBox").onchange = calcCart;   
+   document.getElementById("banquetBox").onblur = calcCart; 
+   document.getElementById("mediaCB").onclick = calcCart;   
+});
+
+function sessionTest() {
+   var confSession = document.getElementById("sessionBox");
+   if (confSession.selectedIndex === -1) {
+      confSession.setCustomValidity("Select a Session Package");
+   } else {
+      confSession.setCustomValidity("");
+   }
+}
+
+
+function calcCart() {
+   sessionStorage.confName = document.forms.regForm.elements.firstName.value + " " + document.forms.regForm.elements.lastName.value;
+   sessionStorage.confGroup = document.forms.regForm.elements.group.value;
+   sessionStorage.confMail = document.forms.regForm.elements.email.value;
+   sessionStorage.confPhone = document.forms.regForm.elements.phoneNumber.value;
+   sessionStorage.confBanquet = document.forms.regForm.elements.banquetGuests.value;
+   
+   sessionStorage.confBanquetCost = document.forms.regForm.elements.banquetGuests.value*55;   
+   
+   var selectedSession = document.getElementById("sessionBox").selectedIndex;
+   if (selectedSession !== -1) {
+      sessionStorage.confSession = document.forms.regForm.elements.sessionBox[selectedSession].text;
+      sessionStorage.confSessionCost = document.forms.regForm.elements.sessionBox[selectedSession].value;
+   } else {
+      sessionStorage.confSession = "";
+      sessionStorage.confSessionCost = 0;
+   }
+   
+   if (document.forms.regForm.elements.mediaCB.checked) {
+      sessionStorage.confPack = "yes";
+      sessionStorage.confPackCost = 115;
+   } else {
+      sessionStorage.confPack = "no";
+      sessionStorage.confPackCost = 0;   
+   }
+   
+   
+   sessionStorage.confTotal = parseFloat(sessionStorage.confSessionCost) + 
+                              parseFloat(sessionStorage.confBanquetCost) + 
+                              parseFloat(sessionStorage.confPackCost);
+   
+   writeSessionValues(); 
+}
+
+function writeSessionValues() {
+   
+   document.getElementById("regName").textContent = sessionStorage.confName;
+   document.getElementById("regGroup").textContent = sessionStorage.confGroup;   
+   document.getElementById("regEmail").textContent = sessionStorage.confMail;    
+   document.getElementById("regPhone").textContent = sessionStorage.confPhone; 
+   document.getElementById("regSession").textContent = sessionStorage.confSession; 
+   document.getElementById("regBanquet").textContent = sessionStorage.confBanquet;
+   document.getElementById("regPack").textContent = sessionStorage.confPack;
+   document.getElementById("regTotal").textContent = "$" + sessionStorage.confTotal;
+}
+
diff --git a/case3/mas_register_txt.js b/case3/mas_register_txt.js
deleted file mode 100644
index cbad7cc..0000000
--- a/case3/mas_register_txt.js
+++ /dev/null
@@ -1,30 +0,0 @@
-"use strict";
-/*
-   New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
-   Tutorial 13
-   Case Problem 3
-
-
-   Filename: mas_register.js
-
-   Author:  
-   Date:    
-   
-   Function List
-   =============
-   
-   formTest()
-      Performs a validation test on the selection of the conference
-      session package and the conference discount number
-   
-   calcCart()
-      Calculates the cost of the registration and saves data
-      in session storage
-      
-   writeSessionValues()
-      Writes data values from session storage in to the
-      registration summary form
-
-
-*/
-
diff --git a/case4/ws_cloud.js b/case4/ws_cloud.js
new file mode 100644
index 0000000..52dc98d
--- /dev/null
+++ b/case4/ws_cloud.js
@@ -0,0 +1,135 @@
+"use strict";
+/*
+   New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
+   Tutorial 13
+   Case Problem 4
+
+
+   Filename: ws_cloud.js
+
+   Author:  Annie Cho
+   Date:    2018-03-01
+   
+   Function List
+   =============
+   
+   findUnique(arr)
+      Returns the unique values in the "arr" array in the form of
+      a two-dimension array
+      array[i][j]
+      where i is the ith unique entry, array[i][0] provides the
+      value of the entry and array[i][1] provides the number 
+      of repetitons of that value
+   
+   sortByCount(a,b)
+      Compare function used in a two-dimensional arrays to be sorted
+      in descending order of the values in the array's 2nd column
+      
+   sortByWord(a, b)
+      Compare function used in a two-dimensional array to be sorted
+      in ascending alphabetical order of the vlaues in the array's
+      first column
+   
+   randomValue(minVal, maxVal)
+      Returns a randome integer between minVal and maxVal
+
+*/
+
+
+window.addEventListener("load", function() {
+   // Retrieve only the text of the speech
+   var wordContent = document.getElementById("speech").textContent;
+   
+   // Change all characters to lowercase letters
+   wordContent = wordContent.toLowerCase();
+   
+   // Remove all punctuation marks from the text
+   wordContent = wordContent.replace(/[!\.,:;\?\'"\(\)\{\}\d\-]/g,"");
+   
+   // Remove all stop words from the text
+   for (var i = 0; i < stopWords.length; i++) {
+      var stopWordsRE = new RegExp("\\b"+stopWords[i]+"\\b", "g");
+      wordContent = wordContent.replace(stopWordsRE, "");
+   }
+   
+   // Remove all leading and trailing white space characters
+   wordContent = wordContent.trim();
+   
+   // Split the text at every occurence of 1 or more white space characters
+   var wordArray = wordContent.split(/\s+/g);
+   
+   // Generate a 2-D array of unique words and their counts
+   var uniqueWords = findUnique(wordArray);
+   
+   // Sort the array in descending order of count
+   uniqueWords.sort(sortByCount);   
+   
+   // Limit the array to the top 100 words
+   uniqueWords.length = 100;
+   
+   // Determine the count of the least-used word in the array
+   var minimumCount = uniqueWords[99][1];
+   
+   // Determine the count of the 3rd most-used word in the array
+   var top3Count = uniqueWords[2][1];
+   
+   // Sort the array in alphabetical order
+   uniqueWords.sort(sortByWord);
+   
+
+   // Loop through the unique words and format them according to their usage
+   for (var i = 0; i < uniqueWords.length; i++) {
+      var cloudWord = document.createElement("span");
+      cloudWord.textContent = uniqueWords[i][0];
+      var wordSize = Math.min(6, 0.45*uniqueWords[i][1]/minimumCount);
+      cloudWord.style.fontSize = wordSize + "em";
+      cloudWord.style.transform = "rotate(" + randomValue(-30, 30) + "deg)";
+      if (uniqueWords[i][1] >= top3Count) {
+         cloudWord.style.color = "rgb(251, 191, 191)";
+         cloudWord.style.textShadow = "2px 2px 5px rgb(51, 51, 51)";
+      }
+      document.getElementById("cloud").appendChild(cloudWord);
+   }
+});
+
+
+
+function findUnique(arr) {
+   var prevWord;
+   var unique = [];
+   var listNum = -1;
+    arr.sort();
+    for ( var i = 0; i < arr.length; i++ ) {
+        if ( arr[i] !== prevWord ) {
+           listNum++;           
+           unique[listNum] = [];
+           unique[listNum][0] = arr[i];
+           unique[listNum][1] = 1;
+        } else {
+            unique[listNum][1] = unique[listNum][1]+1;
+        }
+        prevWord = arr[i];
+    }
+
+    return unique;  
+}
+
+function sortByCount(a,b) {
+   return b[1]-a[1];
+}
+
+function sortByWord(a, b) {
+   if (a[0] < b[0]) {
+      return -1;
+   } else if (a[0] > b[0]) {
+      return 1;
+   } else {
+      return 0;
+   }
+}
+
+function randomValue(minVal, maxVal) {
+   var interval = maxVal - minVal;
+   return Math.floor(minVal + interval*Math.random());
+}
+
diff --git a/case4/ws_cloud_txt.js b/case4/ws_cloud_txt.js
deleted file mode 100644
index de4da75..0000000
--- a/case4/ws_cloud_txt.js
+++ /dev/null
@@ -1,84 +0,0 @@
-"use strict";
-/*
-   New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
-   Tutorial 13
-   Case Problem 4
-
-
-   Filename: ws_cloud.js
-
-   Author:  
-   Date:    
-   
-   Function List
-   =============
-   
-   findUnique(arr)
-      Returns the unique values in the "arr" array in the form of
-      a two-dimension array
-      array[i][j]
-      where i is the ith unique entry, array[i][0] provides the
-      value of the entry and array[i][1] provides the number 
-      of repetitons of that value
-   
-   sortByCount(a,b)
-      Compare function used in a two-dimensional arrays to be sorted
-      in descending order of the values in the array's 2nd column
-      
-   sortByWord(a, b)
-      Compare function used in a two-dimensional array to be sorted
-      in ascending alphabetical order of the vlaues in the array's
-      first column
-   
-   randomValue(minVal, maxVal)
-      Returns a randome integer between minVal and maxVal
-
-*/
-
-
-
-
-
-
-
-
-
-function findUnique(arr) {
-   var prevWord;
-   var unique = [];
-   var listNum = -1;
-    arr.sort();
-    for ( var i = 0; i < arr.length; i++ ) {
-        if ( arr[i] !== prevWord ) {
-           listNum++;           
-           unique[listNum] = [];
-           unique[listNum][0] = arr[i];
-           unique[listNum][1] = 1;
-        } else {
-            unique[listNum][1] = unique[listNum][1]+1;
-        }
-        prevWord = arr[i];
-    }
-
-    return unique;  
-}
-
-function sortByCount(a,b) {
-   return b[1]-a[1];
-}
-
-function sortByWord(a, b) {
-   if (a[0] < b[0]) {
-      return -1;
-   } else if (a[0] > b[0]) {
-      return 1;
-   } else {
-      return 0;
-   }
-}
-
-function randomValue(minVal, maxVal) {
-   var interval = maxVal - minVal;
-   return Math.floor(minVal + interval*Math.random());
-}
-
diff --git a/case4/ws_lincoln_txt.html b/case4/ws_lincoln.html
similarity index 98%
rename from case4/ws_lincoln_txt.html
rename to case4/ws_lincoln.html
index a4e9e95..7842a5d 100644
--- a/case4/ws_lincoln_txt.html
+++ b/case4/ws_lincoln.html
@@ -19,7 +19,9 @@
    <title>Rhetoric in the United States Word Cloud</title>
    <link href="ws_base.css" rel="stylesheet" />
    <link href="ws_styles.css" rel="stylesheet" />  
-   
+   <link href="ws_cloud.css" rel="stylesheet" />
+   <script src="ws_stopwords.js" async > </script>
+   <script src="ws_cloud.js" async > </script>
 </head>
 
 <body>

First Name*	M.I.	Account*
			Department*
Social Security Number*				Project*