LewisAndClark-CSD · jallen19 · Apr 11, 2019
diff --git a/case1/mpl_links_txt.html → case1/mpl_links.html b/case1/mpl_links_txt.html → case1/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"></script>
 </head>
 
 <body>

diff --git a/case1/mpl_links.js b/case1/mpl_links.js
@@ -0,0 +1,26 @@
+"use strict";
+
+/*
+   New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
+   Tutorial 13
+   Case Problem 1
+
+   Author: 
+   Date:   
+
+   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;
+      }
+   }
+});
+
+
diff --git a/case1/mpl_links_txt.js b/case1/mpl_links_txt.js
diff --git a/case2/dl_expense_txt.html → case2/dl_expense.html b/case2/dl_expense_txt.html → case2/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_expese.js" async> </script>
 
 
 </head>
@@ -70,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" pattern="ACT\d{6}" required /></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" pattern="DEPT\d{4,6}" required placeholder="DEPTnnnnnn" /></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" pattern="\d{3}-\d{2}-\d{4}" required placeholder="nnn-nn-nnnn" /></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" pattern="PROJ-\D[a-z]-\d{4}"required placeholder="PROJ-xx-ddd" /></td>
          </tr>
       </table>
 

diff --git a/case2/dl_expense.js b/case2/dl_expense.js
@@ -0,0 +1,95 @@
+"use strict";
+
+/*
+   New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
+   Tutorial 13
+   Case Problem 2
+
+   Author: Kay Ramirez
+   Date:   2018-03-01
+
+   Filename: dl_expense.js
+
+   Function List
+   =============
+
+   validateSummary()
+      Validates the data entry in the summary field.
+
+   calcClass(sumClass)
+      Sums up all of the data values for elements of the sumClass class.
+
+   calcExp()
+      Calculates the travel expenses from all categories and dates.
+
+   formatNumber(val, decimals)
+      Formats the value, "val" to the number of decimals indicated 
+      by "decimals", adding thousands separators.
+
+   formatUSCurrency(val)
+      Formats the value, "val", as U.S. currency.
+
+*/
+
+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"));
+}
+
+
+
+
+
+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/case2/dl_expense_txt.js b/case2/dl_expense_txt.js
diff --git a/case3/mas_reg2_txt.html → case3/mas_reg2.html b/case3/mas_reg2_txt.html → case3/mas_reg2.html
@@ -19,7 +19,7 @@
    <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
@@ -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;
+}
diff --git a/case3/mas_reg2_txt.js b/case3/mas_reg2_txt.js
diff --git a/case3/mas_register_txt.html → case3/mas_register.html b/case3/mas_register_txt.html → case3/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>