From aba21dbfd62d04e6322f0d8e4a9f73b7904a6b96 Mon Sep 17 00:00:00 2001 From: Jess Moran Date: Fri, 23 Feb 2018 10:35:24 -0600 Subject: [PATCH 1/4] =?UTF-8?q?A=C3=B1adiendo=20estructura?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 25 +++++++++++++++++++++++++ app.js | 0 index.html | 31 +++++++++++++++++++++++++++++++ 3 files changed, 56 insertions(+) create mode 100644 app.js create mode 100644 index.html diff --git a/README.md b/README.md index a336061..bcf9d0f 100644 --- a/README.md +++ b/README.md @@ -72,3 +72,28 @@ const form = document.querySelector("form"); ¿Tengo un arreglo? ¿Algo diferente? ¿Cómo le hago para implementar metodos de arreglo en otras cosas que no son arreglos? 2. La solucion se tiene que hacer **con ES6** con los temas vistos en clase. + + +Validaciones por realizar: + +Fecha vencimiento (solo 3 validaciones son necesarias) +No string vacio +solo numeros +que sean 2 digitos de año y 2 de mes +los numeros no pueden ser negativos +el mes no puede ser mayor a 12 +Que el numero sea futuro (no hoy ni antes) +Revisar el formato + +CVV (todas son necesarias) +No string vacio +Sean SOLO 3 digitos (no string ni boolean ni nada) +los numeros sean positivos (que numeros son positivos de 3 digitos¿) + +Nombre (3 de las 6 son necesarias) +No string vacio +SOLO Sea string +Cada palabra maximo tiene 30 caracteres +mayusculas y minusculas +MINIMO 2 palabras +No empieza con espacios diff --git a/app.js b/app.js new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..1ae39e4 --- /dev/null +++ b/index.html @@ -0,0 +1,31 @@ + + + + + Card Validator + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ + + From ea9ccad075e41e9adc54cf8a3ff47dcdf227d471 Mon Sep 17 00:00:00 2001 From: Jess Moran Date: Mon, 26 Feb 2018 09:09:01 -0600 Subject: [PATCH 2/4] Funciones --- README.md | 2 +- app.js | 142 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 12 ++--- 3 files changed, 148 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index bcf9d0f..3454ced 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ La función debe recibir un elemento DOM que contenga ```html
-
+
diff --git a/app.js b/app.js index e69de29..b3b8cf0 100644 --- a/app.js +++ b/app.js @@ -0,0 +1,142 @@ +//se obtienen los elementos de html para manipularlos de acuerdo con la validacion + +const form = document.querySelector("form"); +const cvvInput = document.querySelector("#cvv"); +const cnInput = document.querySelector("#cn"); +const expInput = document.querySelector("#exp"); +const nameInput = document.querySelector("#name"); + + +const formArr = Array.from(form); + +//se comprueba que la funcion "validateCardDetails" arroje true o false para consolear +form.addEventListener("submit", e => { + e.preventDefault(); + + if (validateCardDetails(form) == true) { + console.log("datos válidos... enviar..."); + } else { + console.log("datos inválidos"); + } +}); + +//funcion la cual debe recibir todos los true de las funciones posteriores para arrojar true +function validateCardDetails(element) { + //escribe tu código aqui + getValue (formArr); + return true +} + +//fucncion que itera y obtiene todos los valores de los inputs +const getValue = array => { + let newArray = array.map (element => element.value) + let cardNumber = newArray[0]; + let date = newArray[1]; + let cvv = newArray[2]; + let userName = newArray[3]; +//llama a todas las funciones para asignarles su valor + stringToArray(cardNumber); + valdDate(date); + valdCvv(cvv); + valdName(userName); +} + +//funciones para validar numero de tarjeta +//separa string obtenido de input y convierte a numero +const stringToArray = numberStr =>{ + let arrayNumbers = []; + for (let i in numberStr) { + let numberDivided = numberStr[i].split(); + let allStr = parseInt(numberDivided.join()); + arrayNumbers.push(allStr); + } + //console.log(arrayNumbers); + if (arrayNumbers == "") { + cnInput.style.border = "2px solid #f91818"; + }else { + getCardNumer(arrayNumbers); + } +} + +//realiza operacion necesaria para obtener un digito de cada numero ingresado +//obtiene nuevos digitos + +const getCardNumer = (numbers) =>{ + let result = []; + const element = numbers.filter((item,index) => { + if (index %2 == 0) { + let multiply = ""+ item * 2; + if (multiply.length == 1) { + let number = parseInt(multiply); + result.push(number) + }else { + let digit1 = multiply [0]; + let digit2 = multiply [1]; + let number1 = parseInt(digit1); + let number2 = parseInt(digit2); + let sum = number1 + number2; + result.push(sum); + } + }else { + let oddNumbers = item; + result.push(oddNumbers); + } + //console.log(result); + valdCardNumer(result); + }) +} + +//utiliza los nuevos digitos, los suma entre si y lo reduce a un solo numero +//comprueba que su residuo sea igual a 0 para validar tarjeta +const valdCardNumer = resultArray => { + const value = resultArray.reduce((sum,value) => sum + value, 0); + if (value %10 !== 0 || "") { + cnInput.style.border = "2px solid #f91818"; + + }else { + cnInput.style.border = "2px solid #56d937"; + return true; + } +} + +/*funcion que valida que la fecha en el primer indice sea menor a 2 +en el segundo sea mayor a 0 en el tercero menor a 2 y en el cuarto mayor a 8 +ya que es hace referencia al año en curso y no puede ser menor a este */ +const valdDate = expirationDate =>{ + let digitsDate = []; + for (let i in expirationDate) { + let dateDivided = expirationDate[i].split(); + let allDate = parseInt(dateDivided.join()); + digitsDate.push(allDate); + } + if (digitsDate[0] < 2){ + if (digitsDate[1] > 0){ + if ( digitsDate[2] < 2){ + if (digitsDate[3] >= 8){ + expInput.style.border = "2px solid #56d937"; + } + } + } + }else { + expInput.style.border = "2px solid #f91818"; + } + } + +/*con esta funcion y una sola condicional logramos +que el usuario no pueda acceder si pone +espacios, letras o numero menor a 99*/ + +const valdCvv = elementCvv =>{ + if (elementCvv > 99 && elementCvv < 1000) { + cvvInput.style.border = "2px solid #56d937"; + const value = true; + }else { + cvvInput.style.border = "2px solid #f91818"; + } +} + + +//funcion que valida que no haya espacios vacios o que tenga numeros más de 30 letras +const valdName = userName =>{ +console.log(userName); +} diff --git a/index.html b/index.html index 1ae39e4..2ee9dfd 100644 --- a/index.html +++ b/index.html @@ -8,24 +8,22 @@
- +
- +
- +
- +
- + From 89b7852b13bc4c3e9ffe7133c73aadf0dd5fd5fb Mon Sep 17 00:00:00 2001 From: Jess Moran Date: Mon, 26 Feb 2018 09:45:42 -0600 Subject: [PATCH 3/4] fixing functions --- app.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/app.js b/app.js index b3b8cf0..0e3c16e 100644 --- a/app.js +++ b/app.js @@ -90,15 +90,17 @@ const getCardNumer = (numbers) =>{ //comprueba que su residuo sea igual a 0 para validar tarjeta const valdCardNumer = resultArray => { const value = resultArray.reduce((sum,value) => sum + value, 0); - if (value %10 !== 0 || "") { + if (value %10 !== 0 || ""){ + cnInput.style.border = "2px solid #f91818"; + }else if (value == 0){ cnInput.style.border = "2px solid #f91818"; - }else { cnInput.style.border = "2px solid #56d937"; return true; } } + /*funcion que valida que la fecha en el primer indice sea menor a 2 en el segundo sea mayor a 0 en el tercero menor a 2 y en el cuarto mayor a 8 ya que es hace referencia al año en curso y no puede ser menor a este */ @@ -114,6 +116,8 @@ const valdDate = expirationDate =>{ if ( digitsDate[2] < 2){ if (digitsDate[3] >= 8){ expInput.style.border = "2px solid #56d937"; + }else { + expInput.style.border = "2px solid #f91818"; } } } @@ -127,7 +131,7 @@ que el usuario no pueda acceder si pone espacios, letras o numero menor a 99*/ const valdCvv = elementCvv =>{ - if (elementCvv > 99 && elementCvv < 1000) { + if (elementCvv > 100 && elementCvv < 1000) { cvvInput.style.border = "2px solid #56d937"; const value = true; }else { From da62a8414359c53fc94694a574d12a33056479c3 Mon Sep 17 00:00:00 2001 From: Jess Moran Date: Wed, 28 Feb 2018 17:49:23 -0600 Subject: [PATCH 4/4] Adding styles --- .DS_Store | Bin 0 -> 6148 bytes css/main.css | 20 ++++++++++++++++++++ index.html | 8 ++++++-- app.js => js/app.js | 2 +- 4 files changed, 27 insertions(+), 3 deletions(-) create mode 100644 .DS_Store create mode 100644 css/main.css rename app.js => js/app.js (99%) diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..c499d8f322b104ce56998b991e7b64dfdd9b1af2 GIT binary patch literal 6148 zcmeHKF;2rk5S&X=BtVf4N|#iT@&gk&5)?G#11NSxKsJt)M56R(D3B-+HSeIz0}ut` z12B7cO5!+aL7-h}ckcFf&wFFZ=LKMT^P~&30W_(CwHD15k#*6E)V$|_Xk?E(9;W$_ zGuck%FEAkQu8tT}OwZEN`@84L)0dSzTScW;-9emZleNS7{49^6WIl_5*O&K?$In$x zmM1$_CgaL(d$`6e5{z(%4#t=vL%LDh1NT05wb?pqxT(~C%9ZEMm@U=Y+*0jtiv@GN zf35O0|CYL2xIiB#h;UBqu!FV?9J+KE z`(*CppKN@GVtngi0viq!I#jC+CTcSW`@g@t|1T%$Oc_uH{uKkJ5e=dqkL2&x x%Hia$4XBq?5s51tE>k$LS21JdDn6oGp+ArTG4xnCq=%wE0+t3f%D|5@@C_tnbc_H1 literal 0 HcmV?d00001 diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..36495b0 --- /dev/null +++ b/css/main.css @@ -0,0 +1,20 @@ +body{ + margin: 0; + padding: 0; +} + +#tittle{ + background-color: #192959; + color: #fff; + text-align: center; +} + +form{ + text-align: center; + color: #00c3c9; +} + +#btn{ + background-color: #00c3c9; + color: #fff; +} diff --git a/index.html b/index.html index 2ee9dfd..d00e265 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,13 @@ + Card Validator +
+

Card Validator

+
@@ -22,8 +26,8 @@
- +
- + diff --git a/app.js b/js/app.js similarity index 99% rename from app.js rename to js/app.js index 0e3c16e..884f8d0 100644 --- a/app.js +++ b/js/app.js @@ -142,5 +142,5 @@ const valdCvv = elementCvv =>{ //funcion que valida que no haya espacios vacios o que tenga numeros más de 30 letras const valdName = userName =>{ -console.log(userName); + }