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..f25aa84 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: Steven Thompson & Dylan Brune + Date: April 10, 2019 Filename: mpl_links.html --> @@ -17,6 +17,7 @@ + diff --git a/case1/mpl_links.js b/case1/mpl_links.js new file mode 100644 index 0000000..d620240 --- /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: Steven Thompson & Dylan Brune + Date: April 10, 2019 + + 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 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 91% rename from case2/dl_expense_txt.html rename to case2/dl_expense.html index 48fadef..d1e83fe 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: Steven Thompson & Dylan Brune + Date: April 10, 2019 Filename: dl_expense.html --> @@ -17,6 +17,7 @@ + @@ -70,20 +71,20 @@

Expense Report

First Name* M.I. Account* - + Department* - + Social Security Number* - + Project* - + diff --git a/case2/dl_expense.js b/case2/dl_expense.js new file mode 100644 index 0000000..0d34c51 --- /dev/null +++ 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: Steven Thompson & Dylan Brune + Date: April 10, 2019 + + 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 index bc32b41..e6498a9 100644 --- a/case2/dl_expense_txt.js +++ b/case2/dl_expense_txt.js @@ -5,8 +5,8 @@ Tutorial 13 Case Problem 2 - Author: - Date: + Author: Steven Thompson & Dylan Brune + Date: April 10, 2019 Filename: dl_expenses.js @@ -35,9 +35,6 @@ - - - function formatNumber(val, decimals) { return val.toLocaleString(undefined, {minimumFractionDigits: decimals, maximumFractionDigits: decimals}); @@ -45,4 +42,4 @@ function formatNumber(val, decimals) { function formatUSCurrency(val) { return val.toLocaleString('en-US', {style: "currency", currency: "USD"} ); -} \ No newline at end of file +} diff --git a/case3/mas_reg2_txt.html b/case3/mas_reg2.html similarity index 94% rename from case3/mas_reg2_txt.html rename to case3/mas_reg2.html index 63ca91a..606dfc4 100644 --- a/case3/mas_reg2_txt.html +++ b/case3/mas_reg2.html @@ -7,9 +7,9 @@ Case Problem 3 Media Arts Society Registration Form #2 - Author: - Date: - + Author: Steven Thompson & Dylan Brune + Date: April 10 2019 + Filename: mas_reg2.html --> @@ -19,7 +19,8 @@ MAS Registration Payment Form -> + + @@ -139,4 +140,4 @@

MAS22 Payment Form

- \ No newline at end of file + diff --git a/case3/mas_reg2.js b/case3/mas_reg2.js new file mode 100644 index 0000000..f5e6ae6 --- /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: Steven Thompson & Dylan Brune + Date: April 10 2019 + + + 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_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..3805db8 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: Steven Thompson & Dylan Brune + Date: April 10 2019 Filename: mas_register.html @@ -19,6 +19,7 @@ MAS Registration Form + @@ -140,4 +141,4 @@

MAS22 Registration Form

- \ No newline at end of file + diff --git a/case3/mas_register.js b/case3/mas_register.js new file mode 100644 index 0000000..f229def --- /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: Steven Thompson & Dylan Brune + Date: April 10 2019 + + 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/case4/ws_cloud.js b/case4/ws_cloud.js new file mode 100644 index 0000000..174fdc1 --- /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: Steven Thompson & Dylan Brune + Date: April 10 2019 + + 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_lincoln_txt.html b/case4/ws_lincoln.html similarity index 97% rename from case4/ws_lincoln_txt.html rename to case4/ws_lincoln.html index a4e9e95..381193a 100644 --- a/case4/ws_lincoln_txt.html +++ b/case4/ws_lincoln.html @@ -7,8 +7,8 @@ Case Problem 4 Word Cloud of Lincoln's 1st Inaugural - Author: - Date: + Author: Steven Thompson & Dylan Brune + Date: April 10 2019 Filename: ws_lincoln.html @@ -18,7 +18,10 @@ Rhetoric in the United States Word Cloud - + + + + @@ -289,4 +292,4 @@

Explore Other Speeches

Rhetoric in the United States © 2018 English (US) - \ No newline at end of file + diff --git a/index.html b/index.html index 3a65fb4..a624466 100644 --- a/index.html +++ b/index.html @@ -23,12 +23,12 @@

Tutorial 5 links

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..0e96c85 100644 --- a/review/co_cart_txt.html +++ b/review/co_cart.html @@ -7,8 +7,8 @@ Review Assignment Coctura Cart Page - Author: - Date: + Author: Steven Thompson & Dylan Brune + Date: April 10, 2019 Filename: co_cart.html --> @@ -17,6 +17,7 @@ + @@ -66,8 +67,7 @@

Customer Rating (903 votes): 4 stars

-
- + diff --git a/review/co_cart.js b/review/co_cart.js new file mode 100644 index 0000000..bdd8553 --- /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: Steven Thompson & Dylan Brune + Date: April 10, 2019 + + 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..3e51b72 100644 --- a/review/co_credit_txt.html +++ b/review/co_credit.html @@ -7,8 +7,8 @@ Review Assignment Coctura Credit Page - Author: - Date: + Author: Steven Thompson & Dylan Brune + Date: April 10, 2019 Filename: co_credit.html --> @@ -17,7 +17,7 @@ - + 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..c5376d9 100644 --- a/review/co_credit_txt.js +++ b/review/co_credit.js @@ -7,8 +7,8 @@ Credit Card Form Script - Author: - Date: + Author: Steven Thompson & Dylan Brune + Date: April 10, 2019 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(""); + } +}
Shopping Cart