From 0c788546f15bc6c19524c00f9c573e6bb99487c8 Mon Sep 17 00:00:00 2001 From: Brett Fyfe Date: Thu, 11 Apr 2019 12:16:06 -0500 Subject: [PATCH] Finished --- case1/{mpl_links_txt.html => mpl_links.html} | 6 +- case1/mpl_links.js | 23 +++ case1/mpl_links_txt.js | 15 -- .../{dl_expense_txt.html => dl_expense.html} | 10 +- case2/dl_expense.js | 98 ++++++++++ case2/dl_expense_txt.js | 48 ----- case3/{mas_reg2_txt.html => mas_reg2.html} | 6 +- case3/mas_reg2.js | 36 ++++ case3/mas_reg2_txt.js | 23 --- ...as_register_txt.html => mas_register.html} | 7 +- case3/mas_register.js | 98 ++++++++++ case3/mas_register_txt.js | 30 ---- case4/ws_cloud.js | 137 ++++++++++++++ case4/ws_cloud_txt.js | 84 --------- .../{ws_lincoln_txt.html => ws_lincoln.html} | 12 +- review/{co_cart_txt.html => co_cart.html} | 7 +- review/co_cart.js | 89 +++++++++ review/co_cart_txt.js | 47 ----- review/{co_credit_txt.html => co_credit.html} | 7 +- review/co_credit_txt.js | 130 -------------- tutorial/co_order.html | 170 ++++++++++++++++++ tutorial/co_order.js | 34 ++++ 22 files changed, 717 insertions(+), 400 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} (95%) create mode 100644 case2/dl_expense.js delete mode 100644 case2/dl_expense_txt.js rename case3/{mas_reg2_txt.html => mas_reg2.html} (96%) 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} (97%) rename review/{co_cart_txt.html => co_cart.html} (95%) 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%) delete mode 100644 review/co_credit_txt.js create mode 100644 tutorial/co_order.html create mode 100644 tutorial/co_order.js 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..4e2cf02 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: brett f + Date: 4-11-2019 Filename: mpl_links.html --> @@ -17,6 +17,8 @@ + + diff --git a/case1/mpl_links.js b/case1/mpl_links.js new file mode 100644 index 0000000..47be58e --- /dev/null +++ b/case1/mpl_links.js @@ -0,0 +1,23 @@ +"use strict"; + +/* + New Perspectives on HTML5, CSS3, and JavaScript 6th Edition + Tutorial 13 + Case Problem 1 + + Author: brett f. + Date: 4-11-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 95% rename from case2/dl_expense_txt.html rename to case2/dl_expense.html index 48fadef..c1caa98 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: brett f. + Date: 4-11-2019 Filename: dl_expense.html --> @@ -70,20 +70,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..2ccb4ba --- /dev/null +++ b/case2/dl_expense.js @@ -0,0 +1,98 @@ +"use strict"; + +/* + New Perspectives on HTML5, CSS3, and JavaScript 6th Edition + Tutorial 13 + Case Problem 2 + + Author: brett f. + Date: 4-11-2019 + + Filename: dl_expenses.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 deleted file mode 100644 index bc32b41..0000000 --- a/case2/dl_expense_txt.js +++ /dev/null @@ -1,48 +0,0 @@ -"use strict"; - -/* - New Perspectives on HTML5, CSS3, and JavaScript 6th Edition - Tutorial 13 - Case Problem 2 - - Author: - Date: - - Filename: dl_expenses.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. - -*/ - - - - - - - - -function formatNumber(val, decimals) { - return val.toLocaleString(undefined, {minimumFractionDigits: decimals, - maximumFractionDigits: 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 96% rename from case3/mas_reg2_txt.html rename to case3/mas_reg2.html index 63ca91a..59a8352 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: brett f. + Date: 4-11-2019 Filename: mas_reg2.html @@ -139,4 +139,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..7c71266 --- /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: brett f. + Date: 4-11-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_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..cf37a06 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: brett f. + Date: 4-11-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..43fc912 --- /dev/null +++ b/case3/mas_register.js @@ -0,0 +1,98 @@ +"use strict"; +/* + New Perspectives on HTML5, CSS3, and JavaScript 6th Edition + Tutorial 13 + Case Problem 3 + + + Filename: mas_register.js + + Author: brett f. + Date: 4-11-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/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..918d62b --- /dev/null +++ b/case4/ws_cloud.js @@ -0,0 +1,137 @@ +"use strict"; +/* + New Perspectives on HTML5, CSS3, and JavaScript 6th Edition + Tutorial 13 + Case Problem 4 + + + Filename: ws_cloud.js + + Author: brett f. + Date: 4-11-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_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 97% rename from case4/ws_lincoln_txt.html rename to case4/ws_lincoln.html index a4e9e95..4fe942a 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: brett f + Date: 4-11-2019 Filename: ws_lincoln.html @@ -18,7 +18,11 @@ Rhetoric in the United States Word Cloud - + + + + + @@ -289,4 +293,4 @@

Explore Other Speeches

Rhetoric in the United States © 2018 English (US) - \ No newline at end of file + diff --git a/review/co_cart_txt.html b/review/co_cart.html similarity index 95% rename from review/co_cart_txt.html rename to review/co_cart.html index f2fe302..5dc7ee0 100644 --- a/review/co_cart_txt.html +++ b/review/co_cart.html @@ -7,14 +7,15 @@ Review Assignment Coctura Cart Page - Author: - Date: + Author: send help pls + Date: 4-10-2019 Filename: co_cart.html --> Coctura Shopping Chart + @@ -66,7 +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..d37e09e --- /dev/null +++ b/review/co_cart.js @@ -0,0 +1,89 @@ +"use strict"; + +/* + New Perspectives on HTML5, CSS3, and JavaScript 6th Edition + Tutorial 13 + Review Assigment + + Shopping Cart Form Script + + Author: aaaaaaaaaaaaa + Date: 4-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() { + var cartForm = document.forms.cart; + + // Calculate the cost of the order + calcCart(); + + // Event handlers for the web form + 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; + + // Calculate the 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); + + // Retrieve the cost of shipping + var shipCost = document.querySelector('input[name="shipping"]:checked').value*quantity; + cartForm.elements.shippingCost.value = formatNumber(shipCost, 2); + + // Calculate the order subtotal + cartForm.elements.subTotal.value = formatNumber(orderCost + shipCost, 2); + + // Calculate the sales tax + var salesTax = 0.05*(orderCost + shipCost); + cartForm.elements.salesTax.value = formatNumber(salesTax, 2); + + // Calculate the cost of the 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..4d52888 100644 --- a/review/co_credit_txt.html +++ b/review/co_credit.html @@ -7,8 +7,8 @@ Review Assignment Coctura Credit Page - Author: - Date: + Author: brett fyfe + Date: 4-10-2019 Filename: co_credit.html --> @@ -16,7 +16,8 @@ Coctura Payment Form - + + diff --git a/review/co_credit_txt.js b/review/co_credit_txt.js deleted file mode 100644 index 85bcbde..0000000 --- a/review/co_credit_txt.js +++ /dev/null @@ -1,130 +0,0 @@ -"use strict"; - -/* - New Perspectives on HTML5, CSS3, and JavaScript 6th Edition - Tutorial 13 - Review Assignment - - Credit Card Form Script - - Author: - Date: - - Filename: co_credit.js - - Function List - ============= - - runSubmit() - Runs validation tests when the submit button is clicked - - validateCVC() - Validates the credit card CVC number - - validateDate() - Validates that the user has entered a valid expiration date for the credit card - - validateYear() - Validates that the user has selected the expiration year of the credit card - - validateNumber() - Validates that the user has entered a valid and legitimate card number - - validateCredit() - Validates that the user has selected a credit card type - - validateName() - Validates that the user has specified the name on the credit card - - sumDigits(numStr) - Sums the digits characters in a text string - - luhn(idNum) - Returns true of idNum satisfies the Luhn Algorithm - -*/ - - - - - - - - - - - - -/* Functions already provided in the file */ - -function validateName() { - var cardName = document.getElementById("cardHolder"); - if (cardName.validity.valueMissing) { - cardName.setCustomValidity("Enter the card holder"); - } else { - cardName.setCustomValidity(""); - } -} - - -function validateCredit() { - var creditCard = document.forms.credit.elements.company[0]; - if (creditCard.validity.valueMissing) { - creditCard.setCustomValidity("Select your credit card"); - } else { - creditCard.setCustomValidity(""); - } -} - -function validateNumber() { - var cardNumber = document.getElementById("cardNumber"); - if (cardNumber.validity.valueMissing) { - cardNumber.setCustomValidity("Enter your card number"); - } else if (cardNumber.validity.patternMismatch) { - cardNumber.setCustomValidity("Enter a valid card number"); - } else if (luhn(cardNumber.value) === false) { - cardNumber.setCustomValidity("Enter a legitimate card number"); - } else { - cardNumber.setCustomValidity(""); - } -} - -function validateCVC() { - var cardCVC = document.getElementById("cvc"); - var creditCard = document.querySelector('input[name="company"]:checked').value; - - if (cardCVC.validity.valueMissing) { - cardCVC.setCustomValidity("Enter your code CVC number"); - } else if ((creditCard === "amex") && (/^\d{4}$/.test(cardCVC.value) === false)) { - cardCVC.setCustomValidity("Enter a 4-digit CVC number"); - } else if ((creditCard !== "amex") && (/^\d{3}$/.test(cardCVC.value) === false)) { - cardCVC.setCustomValidity("Enter a 3-digit CVC number"); - } else { - cardCVC.setCustomValidity(""); - } -} - -function sumDigits(numStr) { - var digitTotal = 0; - for (var i = 0; i < numStr.length; i++) { - digitTotal += parseInt(numStr.charAt(i)); - } - return digitTotal; -} - -function luhn(idNum) { - var string1 = ""; - var string2 = ""; - - // Retrieve the odd-numbered digits - for (var i = idNum.length - 1; i >= 0; i-= 2) { - string1 += idNum.charAt(i); - } - // Retrieve the even-numbered digits and double them - for (var i = idNum.length - 2; i >= 0; i-= 2) { - string2 += 2*idNum.charAt(i); - } - - // Return whether the sum of the digits is divisible by 10 - return sumDigits(string1 + string2) % 10 === 0; -} diff --git a/tutorial/co_order.html b/tutorial/co_order.html new file mode 100644 index 0000000..22f058c --- /dev/null +++ b/tutorial/co_order.html @@ -0,0 +1,170 @@ + + + + + + Coctura Orders + + + + + + + +
+
+ + + + + + +
+ + Coctura + +
+
+

DigiPot® Multi-Functional Pressure Cooker

+

by Smart Chef

+

Customer Rating (1,028 votes): 4.5 stars

+ +

DigiPot is a smart and safe electric pressure cooker, speeding up + cooking times while still using up to 70% less energy. The + DigiPot multi-use cooker is programmable and can act as a pressure + cooker, slow cooker, rice cooker, and steamer. Cook your favorite + dishes with the press of a button. A 24-hour timer allows for delayed cooking. + Comes in 4-, 6-, and 8-quart models. +

+
+ +
+
+ +
Shopping Cart
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Product Order
+ +
+ + + + + + + + +
+
+ Protection Plan + + + + +
+ + 		+ +
Subtotal + +
Tax (5%) + +
TOTAL + +
+ + + +
+ + + diff --git a/tutorial/co_order.js b/tutorial/co_order.js new file mode 100644 index 0000000..ca7582a --- /dev/null +++ b/tutorial/co_order.js @@ -0,0 +1,34 @@ +"use strict"; + +/* + New Perspectives on HTML5, CSS3, and JavaScript 6th Edition + Tutorial 13 + Tutorial Case + + Order Form Script + + Author: send help + Date: 4-10-2019 + + Filename: co_order.js + + Function List + ============= + + calcOrder() + 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() { + var orderForm = document.forms.orderForm; + orderForm.elements.orderDate.value = new Date().toDateString(); +});