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..efa5765 100644 --- a/case1/mpl_links_txt.html +++ b/case1/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..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..2bd11ab 100644 --- a/case2/dl_expense_txt.html +++ b/case2/dl_expense.html @@ -17,7 +17,7 @@ - + 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 96% rename from case3/mas_reg2_txt.html rename to case3/mas_reg2.html index 63ca91a..34f633b 100644 --- a/case3/mas_reg2_txt.html +++ b/case3/mas_reg2.html @@ -19,6 +19,7 @@ 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..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 96% rename from case3/mas_register_txt.html rename to case3/mas_register.html index 18e9a0c..c92aa76 100644 --- a/case3/mas_register_txt.html +++ b/case3/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..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 94% rename from review/co_cart_txt.html rename to review/co_cart.html index f2fe302..d30f229 100644 --- a/review/co_cart_txt.html +++ b/review/co_cart.html @@ -16,7 +16,8 @@ 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..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..9ddbdca 100644 --- a/review/co_credit_txt.html +++ b/review/co_credit.html @@ -16,7 +16,8 @@ Coctura Payment Form - + + @@ -71,7 +72,7 @@

Payment Form

- +
Shopping Cart
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(""); + } +}