Laboratoria · RLCHuncp · Feb 13, 2020 · Feb 24, 2020 · Mar 2, 2020 · Mar 5, 2020
diff --git a/README.md b/README.md
diff --git a/src/imágenes/check.png b/src/imágenes/check.png
diff --git a/src/imágenes/logo.PNG b/src/imágenes/logo.PNG
diff --git a/src/imágenes/mantenimiento.png b/src/imágenes/mantenimiento.png
diff --git a/src/imágenes/protopapel.jpeg b/src/imágenes/protopapel.jpeg
diff --git a/src/imágenes/prototipo.PNG b/src/imágenes/prototipo.PNG
diff --git a/src/imágenes/prototipo1.PNG b/src/imágenes/prototipo1.PNG
diff --git a/src/imágenes/prototipo2.PNG b/src/imágenes/prototipo2.PNG
diff --git a/src/imágenes/test.PNG b/src/imágenes/test.PNG
diff --git a/src/imágenes/visa.png b/src/imágenes/visa.png
diff --git a/src/imágenes/x.png b/src/imágenes/x.png
diff --git a/src/index.html b/src/index.html
@@ -4,11 +4,49 @@
     <meta charset="utf-8">
     <title>Tarjeta de crédito válida</title>
     <link rel="stylesheet" href="style.css" />
+    <link rel="icon" type="image/png" href="imágenes/logo.PNG">
+    <meta name="viewport" content="with=device-with, initial-scale=1.0">
   </head>
   <body>
-    <header></header>
-    <main></main>
-    <footer></footer>
+    <header>
+      <hr>
+      <div id= "logo">
+        <img src="imágenes/logo.PNG">
+      </div>
+    </header>
+    <main>
+      <div id="inicio">
+        <h1>Finalizar compra</h1>
+        <p id = "ingresaremail">Ingrese su email para continuar</p>
+        <input type="text" name="email" id="email" placeholder="[email protected]"> <br>
+        <button type="button" id="btn1">Continuar</button>
+      </div>
+      <div id="segundo">
+        <h2>Validación de tarjeta</h2>
+        <p id= "esimportantevalidar">Es importante validar su tarjeta para continuar la compra</p>
+        <form action="" class="formulario">
+          <label for="creditCardNumber" class="form--label1">Número de tarjeta</label> <br>
+          <input type="text" id="creditCardNumber" maxlength = "16" class="form--input1"> <br>
+          <label for="nameCliente" class="form--label2">Nombre y apellido que figura en la tarjeta</label> <br>
+          <input type="text" id="nameCliente" class="form--input2"> <br>
+        </form>
+        <div id="logovisa">
+          <img src="imágenes/visa.png">
+        </div>
+        <button type="button" id="btn2">Validar</button>
+        <div id = "status1"></div>
+      </div>
+      <div id = "status2">
+        <img src="imágenes/check.png">
+        <p id= "tarjetaválida"><p>
+        <p id="continuarcompra">Continuar con la compra <a href="http://127.0.0.1:5500/src/p%C3%A1gina%20en%20construcci%C3%B3n.html">aquí</a>
+        </p>
+      </div>
+      <div id = "status3">
+        <img src="imágenes/x.png">
+        <p id= "tarjetainválida"></p>
+      </div>
+    </main>
     <script src="index.js" type="module"></script>
   </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,51 @@
 import validator from './validator.js';
 
-console.log(validator);
+const btn1 = document.getElementById('btn1'); // BOTÓN FORMULARIO 'inicio'
+    btn1.addEventListener('click', () => {
+    const email = document.getElementById('email').value;
+        if (email === '') {
+            document.getElementById('email').focus();
+        } else {
+        document.getElementById('email').focus();
+        document.getElementById('inicio').style.display='none';
+        document.getElementById('segundo').style.display='block';
+        }
+});
+
+const btn2 = document.getElementById('btn2'); // BOTÓN FORMULARIO 'segundo'
+    btn2.addEventListener('click', () => {
+
+    const creditCardNumber = document.getElementById('creditCardNumber').value;
+    const nameCliente = document.getElementById('nameCliente').value;
+
+    if (creditCardNumber === '' && nameCliente === '') {
+        document.getElementById('status1').innerHTML= 'Ingresar datos requeridos';
+        } else {
+        const numeroTarjeta = document.getElementById('creditCardNumber');
+        const isValidCardNumber = validator.isValid(numeroTarjeta.value);
+
+        const numeroTarjetaEncriptado = validator.maskify(numeroTarjeta.value);
+        numeroTarjeta.value = numeroTarjetaEncriptado;
+
+        if (isValidCardNumber === true) {
+            document.getElementById('tarjetaválida').innerHTML= 'Tarjeta ingresada válida';
+            document.getElementById('status1').style.display='none';
+            document.getElementById('status2').style.display='block';
+            // setTimeout('document.location.reload()',20000);
+            } else {
+            document.getElementById('tarjetainválida').innerHTML= 'Tarjeta ingresada inválida';
+            document.getElementById('status1').style.display='none';
+            document.getElementById('status3').style.display='block';
+            // setTimeout('document.location.reload()',10000);
+            }
+
+        }
+
+
+    });
+
+
+
+
+
+
diff --git a/src/página en construcción.html b/src/página en construcción.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Página en construcción</title>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="icon" type="image/png" href="imágenes/logo.PNG">
+  </head>
+  <body>
+    <header>
+      <hr>
+      <div id= "logo">
+        <img src="imágenes/logo.PNG">
+      </div>
+    </header>
+    <main>
+      <div id= "fondo">
+        <img src="imágenes/mantenimiento.png">
+      </div>
+    </main>
+    <script src="index.js" type="module"></script>
+  </body>
+</html>