From 6c3255f2bbf72a8ef790f6b49fd9fcc4253c3758 Mon Sep 17 00:00:00 2001 From: skidoodle Date: Mon, 30 Oct 2023 18:07:54 +0100 Subject: [PATCH] first commit --- index.html | 18 ++++++++++++++++++ script.js | 47 +++++++++++++++++++++++++++++++++++++++++++++++ style.css | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 112 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..2b3d70e --- /dev/null +++ b/index.html @@ -0,0 +1,18 @@ + + + + CC Validator + + + + + + +

CC Validator

+
+ + +
+

+ + diff --git a/script.js b/script.js new file mode 100644 index 0000000..d4c302e --- /dev/null +++ b/script.js @@ -0,0 +1,47 @@ +function restrictInput(a) { + a.value = a.value.replace(/[^0-9]/g, "").slice(0, 16); +} +function validateCreditCard(a) { + a = a.replace(/\D/g, ""); + var b = getCardNetwork(a); + return b && a.length == b.length && luhnCheck(a) ? !0 : !1; +} + +function getCardNetwork(a) { + const cardNetworks = [ + { pattern: /^\b4\d{15}\b/, name: "Visa", length: 16 }, + { pattern: /^\b5[1-5]\d{14}\b/, name: "MasterCard", length: 16 }, + { pattern: /^\b3[47]\d{13}\b/, name: "American Express", length: 15 }, + { pattern: /^\b30[0-5]\d{11}\b/, name: "Diners Club", length: 14 }, + { pattern: /^\b35[3-8]\d{13}\b/, name: "JCB", length: 16 }, + { pattern: /^\b5[0678]\d{14,17}\b/, name: "Maestro", length: 16 }, + { pattern: /^\b6011\d{12}\b/, name: "Discover", length: 16 } + ]; + + for (const network of cardNetworks) { + if (network.pattern.test(a)) { + return { name: network.name, length: network.length }; + } + } + + return null; +} + +function luhnCheck(a) { + for (var b = 0, c = !1, e = a.length - 1; 0 <= e; e--) { + var d = parseInt(a.charAt(e)); + c && (d *= 2, 9 < d && (d -= 9)); + b += d; + c = !c; + } + return 0 === b % 10; +} + +function checkCC() { + event.preventDefault(); + var a = document.querySelector("#cc"), b = document.querySelector("#result"), c = getCardNetwork(a.value); + a = validateCreditCard(a.value); + b.textContent = a ? "Credit card is valid. (" + c.name + ")" : "Credit card is invalid."; + b.style.color = a ? "#4CAF50" : "#FF5733"; + return a; +}; \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..2483f92 --- /dev/null +++ b/style.css @@ -0,0 +1,47 @@ +body, +input { + width: 100%; + text-align: center; +} +body { + font-family: Arial, sans-serif; + background-color: #121212; + color: #338ef7; + font-size: 1.5rem; + margin: 10% auto; +} +form { + max-width: 350px; + margin: 0 auto; +} +input, +label { + margin: 10px 0; + color: #338ef7; + font-size: 2rem; +} +input { + padding: 10px; + border: 1px solid #338ef7; + border-radius: 5px; + background-color: #333; + box-sizing: border-box; +} +button { + background-color: #338ef7; + color: #efefef; + border: none; + margin-top: 15px; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + font-size: 1rem; + font-weight: 700; +} +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +input[type='number'] { + -moz-appearance: textfield; +}