diff --git a/case1/mpl_links_txt.html b/case1/mpl_links.html similarity index 94% rename from case1/mpl_links_txt.html rename to case1/mpl_links.html index 956d056..b7565f8 100644 --- a/case1/mpl_links_txt.html +++ b/case1/mpl_links.html @@ -5,27 +5,28 @@ New Perspectives on HTML5, CSS3, and JavaScript 6th Edition Tutorial 13 Case Problem 1 - + Monroe Public Library Government Links - Author: - Date: + Author: Lane and Ruiz + Date: 4/10/19 Filename: mpl_links.html --> - + Monroe Public Library List of Government Sites +
- Monroe Public Library + Monroe Public Library +
- +
- +
-
+ +
- + 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 81% rename from case2/dl_expense_txt.html rename to case2/dl_expense.html index 48fadef..84f70e9 100644 --- a/case2/dl_expense_txt.html +++ b/case2/dl_expense.html @@ -5,18 +5,19 @@ New Perspectives on HTML5, CSS3, and JavaScript 6th Edition Tutorial 13 Case Problem 2 - + Travel Expense Report - Author: - Date: + Author: Lane and Ruiz + Date: 4/10/19 Filename: dl_expense.html --> - + DeLong Enterprises Expense Report + @@ -33,13 +34,13 @@
  • Insurance
  • Accounts
    • - - DeLong Enterprises + + DeLong Enterprises - +
    - + @@ -50,7 +51,7 @@
    Trip Summary*
    - + - + + - + - + - + - +
    Last Name* First Name* M.I. Account*
    Department*
    Social Security Number* Project*
    @@ -118,16 +119,16 @@

    Expense Report

    - + - + - + - + @@ -138,17 +139,17 @@

    Expense Report

    - + - + - + - - + + @@ -158,17 +159,17 @@

    Expense Report

    - + - + - + - - + + @@ -178,17 +179,17 @@

    Expense Report

    - + - + - + - - + + @@ -198,16 +199,16 @@

    Expense Report

    - + - + - + - + @@ -218,24 +219,24 @@

    Expense Report

    - + - + - + - - + + -
    - + +
    - + diff --git a/case2/dl_expense.js b/case2/dl_expense.js new file mode 100644 index 0000000..5d1bee8 --- /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: 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"} ); +} \ No newline at end of file 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 80% rename from case3/mas_reg2_txt.html rename to case3/mas_reg2.html index 63ca91a..1c88c76 100644 --- a/case3/mas_reg2_txt.html +++ b/case3/mas_reg2.html @@ -7,18 +7,19 @@ Case Problem 3 Media Arts Society Registration Form #2 - Author: - Date: + Author: Lane and Ruiz + Date: 4/10/19 Filename: mas_reg2.html --> - + MAS Registration Payment Form + > @@ -34,9 +35,9 @@
  • Education
  • Jobs
    • - + - + - + + + +
    -

    MAS22 Payment Form

    -
    +

    MAS22 Payment Form

    +
    Credit Information - - - + + +
    - + -
    +
    MAS22 Payment Form -

    * - Required Item

    - +

    * - Required Item

    +
    - + +
  • MAS home page
    • + + - + - \ No newline at end of file + 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 85% rename from case3/mas_register_txt.html rename to case3/mas_register.html index 18e9a0c..b0cfe42 100644 --- a/case3/mas_register_txt.html +++ b/case3/mas_register.html @@ -7,18 +7,22 @@ Case Problem 3 Media Arts Society Registration Form - Author: - Date: + Author: Lane and Ruiz + Date: 4/10/19 Filename: mas_register.html --> - + MAS Registration Form + + + + @@ -34,32 +38,32 @@
  • Education
  • Jobs
    • - + - +

    MAS Annual Conference

    MAS 22
    - Sierra Vegas Resort
    + Sierra Vegas Resort
    Las Vegas, Nevada
    April 16 — April 19, 2018

    -

    The premier conference for multimedia technlogy celebrates its - 22nd anniversay with extensive coverage of new and exciting +

    The premier conference for multimedia technlogy celebrates its + 22nd anniversay with extensive coverage of new and exciting developments in media and entertainment.

    Please join us by filling out your registration information below. Go - to the Accommodation Page to reserve lodging at the + to the Accommodation Page to reserve lodging at the conference center.

    -

    Email mas22@example.com for questions related to +

    Email mas22@example.com for questions related to accommodation, traveling to the conference, or submitting presentation proposals.

    - +

    MAS22 Registration Form

    - -
    + +
    @@ -76,7 +80,7 @@

    MAS22 Registration Form

    - +
    - attendees - + attendees + - - -
    + + +
    - + - - + + +
  • MAS home page
    • + + - + - \ No newline at end of file + 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..c28d6c7 100644 --- a/case4/ws_lincoln_txt.html +++ b/case4/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 88% rename from review/co_cart_txt.html rename to review/co_cart.html index f2fe302..c8350b8 100644 --- a/review/co_cart_txt.html +++ b/review/co_cart.html @@ -5,18 +5,19 @@ New Perspectives on HTML5, CSS3, and JavaScript 6th Edition Tutorial 13 Review Assignment - + Coctura Cart Page - Author: - Date: + Author: Lane and Ruiz + Date: 4/10/19 Filename: co_cart.html --> - + Coctura Shopping Chart - + + @@ -35,7 +36,7 @@
  • registry
  • blog
  • stores
    • -
  • recipes
    • +
  • recipes
  • contact us
    • @@ -47,8 +48,8 @@
  • electrics
  • bakeware
  • food
    • -
  • bar
    • -
  • homekeeping
    • +
  • bar
    • +
  • homekeeping
    • @@ -61,13 +62,13 @@

    Customer Rating (903 votes): 4 stars

    Coffee. The EC115 creates delicious cappuccinos with rich foam using our patented nozzle system. You can enjoy your espresso almost immmediately thanks to the thermolink® technology. With self-priming, the - EC115 is always ready to go. The EC115 is easily customizable with filters + EC115 is always ready to go. The EC115 is easily customizable with filters that support single and double shots.

    - +
    -
    - + + @@ -84,26 +85,26 @@

    Customer Rating (903 votes): 4 stars

    - - + + - - +
    Shopping Cart
    - + +
    Shipping - - + +
    Subtotal @@ -146,7 +147,7 @@

    Customer Rating (903 votes): 4 stars

  • find a store
  • request a catalog
  • top picks
    • - +
    • manage your account
    • order history
      • 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 84% rename from review/co_credit_txt.html rename to review/co_credit.html index 0620047..ebabb8b 100644 --- a/review/co_credit_txt.html +++ b/review/co_credit.html @@ -5,18 +5,19 @@ New Perspectives on HTML5, CSS3, and JavaScript 6th Edition Tutorial 13 Review Assignment - + Coctura Credit Page - Author: - Date: + Author: Lane and Ruiz + Date: 4/10/19 Filename: co_credit.html --> - + Coctura Payment Form - + + @@ -35,7 +36,7 @@
    • registry
    • blog
    • stores
      • -
    • recipes
      • +
    • recipes
    • contact us
    @@ -47,12 +48,12 @@
  • electrics
  • bakeware
  • food
    • -
  • bar
    • -
  • homekeeping
    • +
  • bar
    • +
  • homekeeping
    • - +

    Payment Form

    - - + + + + @@ -90,7 +91,7 @@

    Payment Form

    - +
    - + X - -
    Subtotal @@ -112,14 +113,14 @@

    Payment Form
    - + -
    +
    Credit Information - +
    @@ -127,19 +128,19 @@

    Payment Form

    American Express -
    +
    Payment Form -

    * - Required Item

    - +

    * - Required Item

    +
    - +