Laboratoria · Majolag · Jun 2, 2020 · Jun 3, 2020 · Jun 3, 2020 · Jun 3, 2020
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "gh-pages": "^2.1.1",
     "htmlhint": "^0.11.0",
     "jest": "^24.9.0",
+    "jquery": "^3.5.1",
     "opener": "^1.5.1",
     "serve": "^11.0.0"
   }

diff --git a/sketch/1.jpeg b/sketch/1.jpeg
diff --git a/sketch/2.jpeg b/sketch/2.jpeg
diff --git a/sketch/3.jpeg b/sketch/3.jpeg
diff --git a/sketch/4.jpeg b/sketch/4.jpeg
diff --git a/src/img/bienvenida.png b/src/img/bienvenida.png
diff --git a/src/img/fondo.png b/src/img/fondo.png
diff --git a/src/img/img2.png b/src/img/img2.png
diff --git a/src/img/img3.png b/src/img/img3.png
diff --git a/src/img/logo.png b/src/img/logo.png
diff --git a/src/img/perdio.png b/src/img/perdio.png
diff --git a/src/index.html b/src/index.html
@@ -1,14 +1,91 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Tarjeta de crédito válida</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <header></header>
-    <main></main>
-    <footer></footer>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Apartamentos Hogar</title>
+    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
+    <link href="style.css" rel="stylesheet" type="text/css">
+
+
+</head>
+
+<body>
+
+    <!-- menu y logo -->
+
+    <section class="contenedor">
+        <header>
+            <article class="menu">
+                <img class="logo" src="/src/img/logo.png" alt="Logo apartamentos hogar">
+            </article>
+            <nav>
+                <ul>
+                    <li><a href="#">Hogar</a></li>
+                    <li><a href="#">LLave</a></li>
+                    <li><a href="#">Vecinos</a></li>
+                    <li><a href="#">Ayuda</a></li>
+                </ul>
+            </nav>
+        </header>
+
+        <!-- contenido -->
+
+        <main>
+            <article id="bienvenido" class="cuerpo">
+                <article class="img">
+                    <img class="perdido" src="img/perdio.png" alt="olvido su tarjeta">
+                </article>
+                <article class="texto">
+                    <p class="bienvenido">Bienvenido a</p>
+                    <p class="apartamentos">Apartamentos</p>
+                    <p class="home">Hogar</p> <br>
+                    <button id="boton" type="button" class="btn">¿Olvido su tarjeta?</button>
+                </article>
+            </article>
+
+            <!-- Ingresar numero -->
+
+            <article id="numero" class="cuerpo">
+                <article class="img">
+                    <img class="perdido" src="img/img2.png" alt="olvido su tarjeta">
+                </article>
+                <article class="texto">
+                    <p class="parrafo">Por favor digite <br> el número de <br> la tarjeta</p>
+                    <input id="card" type="text" maxlength="16" autocomplete="off"><br>
+                    <button type="button" class="btn" id="ingresar">Ingrese</button>
+                </article>
+            </article>
+
+            <!-- Validacion -->
+
+            <article id="validacion" class="cuerpo">
+                <article class="img">
+                    <img class="perdido" src="img/img2.png">
+                </article>
+                <article class="texto">
+                    <p class="parrafo">No es valido, <br> digite de nuevo <br> el numero</p>
+                    <input id="card" type="text" maxlength="12" autocomplete="off"><br>
+                    <button type="button" class="btn" onclick="mostrarMensaje()">Ingrese</button>
+                </article>
+            </article>
+
+            <!-- mensaje -->
+
+            <article id="mensaje" class="cuerpo">
+                <article class="img">
+                    <img class="perdido" src="img/img3.png">
+                </article>
+                <article class="texto">
+                    <p class="mensaje">No olvide siempre tener <br> su tarjeta de ingreso <br> a las torres,
+                        por su <br> seguridad y la  <br> de todos. <br> Gracias!</p>
+                </article>
+            </article>
+        </main>
+    </section>
+
     <script src="index.js" type="module"></script>
-  </body>
+</body>
+
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,29 @@
+'use strict'
+
 import validator from './validator.js';
 
-console.log(validator);
+let boton = document.getElementById('boton');
+var numero = document.getElementById("numero");
+var bienvenido = document.getElementById("bienvenido");
+var mensaje = document.getElementById("mensaje");
+var tarjeta = document.getElementById("card");
+var ingresar = document.getElementById("ingresar");
+
+
+boton.addEventListener('click', () => {
+    numero.style.display = "block";
+    bienvenido.style.display = "none";
+});
+
+ingresar.addEventListener('click', () => {
+
+    let valor = validator.isValid(tarjeta.value)
+
+    if (valor) {
+        alert(validator.maskify(tarjeta.value));
+        numero.style.display = "none";
+        mensaje.style.display = "block";
+    } else {
+        alert("no valido");
+    }
+});