Laboratoria-learning · Ingrid-s · Feb 24, 2018 · Feb 25, 2018 · Feb 26, 2018 · Feb 26, 2018
diff --git a/README.md b/README.md
@@ -73,6 +73,42 @@ const form = document.querySelector("form");
 
 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
+
+
+//// lógica entre squad
+ poner el borde de los 4 imputs en rojo
+  luego una funcion genera que es la que trabaja con el submit,  y acepta 4 funciones por parámetros que corresponden a las funciones  de nombres,número vencimiento y CVV
+  en cada una de sus funciones tendría que validar las condiciones, por ejemplo: que no sea un string vacío y que en el caso de name sea menor a 30 caractéres, ya que ralice esa validación, debemos agregar una clase con add class para cambiar el color de borde del imput a verde.
+
+  recuerda que en la función más grande, se pasa como parámetro todo el form
+  y que el elemento que detona todo es submit
+
+
+  para lo de name con splice y ("") string vacio  para que con eso identifique que se separe los indices del array, tambien hay que ponerle lal condicional que el indice 0 del array sea !==" "
+
+  hay que parsearlo lo de la fecha para hacerlo number
+
 #### Validaciones por realizar
 
 ##### Fecha vencimiento (solo 3 validaciones son necesarias)
@@ -99,3 +135,4 @@ const form = document.querySelector("form");
 4. mayusculas y minusculas
 5. MINIMO 2 palabras
 6. No empieza con espacios
+
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+<body>
+
+  <form>
+    <div class="form-group">
+      <label for="cn">Número de tarjeta</label>
+      <input id="cn" name="cn" required/>
+    </div>
+    <div class="form-group">
+      <label for="exp">Fecha de vencimiento</label>
+      <input type="month" min="2018-02" id="exp" name="exp" required />
+    </div>
+    <div class="form-group">
+      <label for="cvv">CVV</label>
+      <input type="number" min="100" max="999" id="cvv" name="cvv" required />
+    </div>
+    <div class="form-group">
+      <label for="name">Nombre completo</label>
+      <input type="text" id="name" name="name" required placeholder="Min two Words"/>
+    </div>
+    <input type="submit" value="Pagar" required/>
+  </form>
+
+<script src="js/app.js"></script>
+</body>
+</html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,115 @@
+//function para validar el número de tarjeta
+let validationNumber =  cardNumber;
+let luhn = (value) => {
+  if (isNaN(value)){
+    return false;
+  } else if (value.length <16) {
+    return false;
+  } else if (cardNumber.indexOf(" ") === 0) {
+    return false;
+
+
+  let sum = 0;
+  for (var i = cardNumber.length-1; i>= 0; i--){
+    let odd = parseInt(value.charAt(i))
+    if((i%2)=== 1)
+
+    if((odd*=2) >9) odd-=9
+       sum += odd
+    }
+     return (sum%10) == 0
+   }
+   console.log (luhn(validationNumber)? "verify ok" : "failed");
+}
+
+/*const paintInput = document.querySelector("#cn");
+const form = document.querySelector("form");
+
+form.addEventListener("submit", e => {
+  e.´reventDefault();
+  if (validationNumber return failed)
+})*/
+
+//función para validar el nombre
+const validationName = (name) => {
+  console.log(name);
+  if (name === "") {
+    return false;
+  }
+  if(name.indexOf(" ") === 0){
+    return false;
+  }
+  const array = name.split(" ").filter((element) => {
+    /*otra opción .filter(palabra => palabra !=="")*/
+    // return element === "" ? false : true
+    if (element === ""){
+      return false;
+    } else {
+      return true;
+    }
+  })
+  if (array.length <2){
+    return false;
+  }
+  const arrayValidationWordsExtention = array.filter( word => {
+    if (word.length > 30){
+      return false;
+    }
+  /*(también se puede poner else)*/  return true;
+  })
+    if (array.length !== arrayValidationWordsExtention.length){
+      return false;
+    }
+    return true;
+}
+//función para validar el CVV
+const functionvalidationCvv = element =>{
+  let inputValue = element.value;
+  if (inputValue >000) {
+    elemen.className = "success";
+    console.log("grate");
+  } else{
+    element.className= "error";
+    console.log("wrong");
+  }
+}
+//Funcion para corroborar todos los inputs
+const validateCardDetails = element => {//element sera el form completo
+    const formArray = Array.from(form);
+    console.log(formArray);
+    let cardNumber = formArray[0].value;
+    let expirationDate = formArray[1].value;
+    let cvv = formArray[2].value;
+    let name =formArray[3].value;
+    /*
+    console.log(cvv);
+    console.log(cardNumber);
+    console.log(expirationDate);
+    console.log(typeof expirationDate);
+    console.log(name);
+    */
+    validatioNumber(cardNumber);
+    validationName(name);
+    functionvalidationCvv(cvv);
+    fuctionvalidationExpiration(expirationDate);
+  };
+/*const paintDiv =document.querySelector("#testingId");
+const form = document.querySelector("form");
+
+form.addEventListener("submit", e => {
+  e.preventDefault();
+  //console.log(validateCardDetails(form))
+  if (validateCardDetails(form)) {
+    paintDiv.className ="validate"
+    paintDiv.innerHTML ="valid"
+    //>console.log("datos válido... enviar...");
+  } else {
+     paintDiv.className = "error"
+     paintDiv.innerHTML= "Malisimo"
+    //console.log("datos inválidos");
+  }
+});
+
+function validateCardDetails(element) {
+  //escribe tu código aqui
+}*/
diff --git a/js/test.js b/js/test.js
@@ -0,0 +1,50 @@
+
+//reglas de testeo
+describe("Validar nombre", () => {
+  it("Existe la función", () => {
+    expect(validarNombre).toBeDefined();
+  });
+  it("No acepta cadena vacía", () => {
+    expect(validarNombre("")).toEqual(false);
+  });
+  it("Cada palabra tiene máximo 30 caracteres", () => {
+    const prueba = "SuperCalifragilisticoespiralidoso parangaricutirimicuaro"
+    expect(validarNombre(prueba)).toEqual(false)
+  });
+  it("Debe tener mayúsculas y minúsculas");
+  it("Mínimo 2 palabras", () => {
+    const unaPalabra = "Juanito";
+    expect(validarNombre(unaPalabra))
+    .toEqual(false)
+    const dosPalabras = "La Bikina"
+    expect(validarNombre(dosPalabras))
+    .toEqual(true)
+    const trampa = "Lalo  "
+    expect(validarNombre(trampa))
+    .toEqual(false)
+
+  });
+  it("No empieza con espacios", () => {
+    const fechaAhorita = Date.now()
+    const nombreRandom =` ${fechaAhorita}`
+    expect(validarNombre(nombreRandom)).toEqual(false);
+  });
+  /*xit("indexOf", () =>{
+    const nombre =" nombre";
+    expect(nombre.indexOf(" ")).toEqual(0);
+  })*/
+});
+
+describe('Probar entradas de nombre invalias', () => {
+  it('ingresa nombre de una "palabra"', () =>{
+    let inputNombre = document.querySelector('testingId')
+    inputNombre.value = ''
+    const submit = document.querySelector('input[type="submit"]')
+    const result = document.querySelector('#testingId')
+
+    inputNombre.value = Date.now()
+    submit.click()
+    expect(result.innerHTML).toEqual('Malisimo')
+    expect(result.className).toEqual("error")
+  })
+})
diff --git a/main.css b/main.css
@@ -0,0 +1,12 @@
+
+
+#testingId:empty {
+  display: none;
+}
+
+#testingId.success {
+  color: green;
+}
+#testingId.error{
+  color: red;
+}
diff --git a/test.html b/test.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.1/jasmine.min.css">
+    <link rel="stylesheet" href="main.css">
+    <title>Mis métodos de aray</title>
+  </head>
+  <body>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.1/jasmine.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.1/jasmine-html.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.1/boot.min.js"></script>
+
+
+    <form>
+      <div class="form-group">
+        <label for="cn">Número de tarjeta</label>
+        <input id="cn" name="cn" />
+      </div>
+      <div class="form-group">
+        <label for="exp">Fecha de vencimiento</label>
+        <input type="month" min="2018-02" id="exp" name="exp"  />
+      </div>
+      <div class="form-group">
+        <label for="cvv">CVV</label>
+        <input id="cvv" name="cvv"  />
+      </div>
+      <div class="form-group">
+        <label for="name">Nombre completo</label>
+        <input id="name" name="name" />
+      </div>
+      <input type="submit" value="Pagar" />
+    </form>
+
+    <div id="testingId"></div>
+
+    <script type="text/javascript" src="js/app.js"></script>
+    <script type="text/javascript" src="js/test.js"></script>
+  </body>
+</html>