Laboratoria · PilyBernal · Aug 5, 2022 · Aug 5, 2022
diff --git a/README.md b/README.md
diff --git a/Thumbs.db b/Thumbs.db
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/IMAGENES/FINAL.png b/src/IMAGENES/FINAL.png
diff --git a/src/IMAGENES/LOGO.png b/src/IMAGENES/LOGO.png
diff --git a/src/IMAGENES/PROTOTIPO.png b/src/IMAGENES/PROTOTIPO.png
diff --git a/src/IMAGENES/PROTOTIPO1_FIGMA.png b/src/IMAGENES/PROTOTIPO1_FIGMA.png
diff --git a/src/IMAGENES/Thumbs.db b/src/IMAGENES/Thumbs.db
diff --git a/src/index.html b/src/index.html
@@ -2,13 +2,83 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Tarjeta de crédito válida</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
+    <title>TC Válida_PilyBernal</title>
+    <link rel="stylesheet" href="style.css">
+  </head> 
   <body>
-    <header></header>
-    <main></main>
-    <footer></footer>
+
+    <header>
+      <div class="LOGO">
+        <img src="./IMAGENES/LOGO.png" alt="miLogo">
+        <h2 class="nombreEmpresa">CAFETERÍA P_B</h2>
+      </div>
+      <nav>
+        <a href="" class="nav-link">Registrarse</a>
+        <a href="" class="nav-link">Armar_desayuno</a>
+        <a href="" class="nav-link">Validar_TC</a>
+      </nav>
+    </header>
+
+  <div class="textos">
+
+    <br><br><br><br>
+
+    <h1>VALIDACIÓN DE TARJETA DE CRÉDITO_PB</h1>
+
+    <br><br><br><br>
+
+<div class="descripcion" id = "descripcion">
+    <p1>Al proporcionar el número de tu Tarjeta de Crédito, se validará mediante el Algoritmo de Luhn</p1>
+</div>
+
+    <br><br><br>
+
+<div class="numero" id = "numero">
+  <p5>La Tarjeta de Crédito:</p5>
+</div>
+
+<div class="ingreso" id = "ingreso">
+  <p2>Ingresa el número de la tarjeta de crédito que deseas validar</p2>
+</div>
+
+  <br><br>
+
+  </div>
+
+  <div class="inp">
+
+    <input type="text" name="d1"  id="dig1"  autofocus>
+    <input type="text" name="d2"  id="dig2">
+    <input type="text" name="d3"  id="dig3">
+    <input type="text" name="d4"  id="dig4">
+    <input type="text" name="d5"  id="dig5">
+    <input type="text" name="d6"  id="dig6">
+    <input type="text" name="d7"  id="dig7">
+    <input type="text" name="d8"  id="dig8">
+    <input type="text" name="d9"  id="dig9">
+    <input type="text" name="d10"  id="dig10">
+    <input type="text" name="d11"  id="dig11">
+    <input type="text" name="d12"  id="dig12">
+    <input type="text" name="d13"  id="dig13">
+    <input type="text" name="d14"  id="dig14">
+    <input type="text" name="d15"  id="dig15">
+    <input type="text" name="d16"  id="dig16" size="1" tabindex="1" maxlength="1"> 
+
+</div>
+
+<br><br>
+
+  <div class="valida" id = "letreroValida">
+    <p3>es válida</p3>
+  </div>
+
+  <div class="valida" id = "letreroInvalida">
+    <p4>es inválida</p4>
+  </div>  
+
+   <br><br><br><br><br> 
+
     <script src="index.js" type="module"></script>
+    <footer>PILY BERNAL / Laboratoria-MX013</footer>
   </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,110 @@
-import validator from './validator.js';
+const arregloCuadritos=[];
+  let cardNumber=[];
+  //arregloCuadritos.length=16;
+
+  arregloCuadritos[0]=document.getElementById("dig1");
+  arregloCuadritos[1]=document.getElementById("dig2");
+  arregloCuadritos[2]=document.getElementById("dig3");
+  arregloCuadritos[3]=document.getElementById("dig4");
+  arregloCuadritos[4]=document.getElementById("dig5");
+  arregloCuadritos[5]=document.getElementById("dig6");
+  arregloCuadritos[6]=document.getElementById("dig7");
+  arregloCuadritos[7]=document.getElementById("dig8");
+  arregloCuadritos[8]=document.getElementById("dig9");
+  arregloCuadritos[9]=document.getElementById("dig10");
+  arregloCuadritos[10]=document.getElementById("dig11");
+  arregloCuadritos[11]=document.getElementById("dig12");
+  arregloCuadritos[12]=document.getElementById("dig13");
+  arregloCuadritos[13]=document.getElementById("dig14");
+  arregloCuadritos[14]=document.getElementById("dig15");
+  arregloCuadritos[15]=document.getElementById("dig16");
+
+  for (let i=0; i<16; i++){
+    arregloCuadritos[i].addEventListener("input", function(){
+        if (i<15){
+          //console.log(parseInt(arregloCuadritos[i].value));
+          if (isNaN(parseInt(arregloCuadritos[i].value))){
+            arregloCuadritos[i].value = ""
+          }
+          else{
+            arregloCuadritos[i+1].focus();
+          }
+        }
+        else {
+            capturandoValores();
+          validar();
+      }
+      })
+  }
+
+  function capturandoValores(){
+  //let cardNumber=[];
+  cardNumber.length = 16;
+  //let digitosPares = [];
+  //let digitosNones = [];
+
+  for (let i=0; i<16; i++){
+    cardNumber[i] = arregloCuadritos[i].value;
+  }
+
+  }
+
+  /*******
+  //Aquí empieza el algoritmo de Luhn
+  ******/
+
+  function validar(){
+  let reverseCardNumber = cardNumber.reverse();
+  let digitosPares = [];
+  let digitosNones = [];
+  //return reverseCardNumber;
+  //convertirAEnteros();
+
+  for(let i=0; i<16; i++){
+    if(i % 2 === 0){
+      digitosNones.push(parseInt(reverseCardNumber[i]))
+    }
+    else{
+      digitosPares.push(parseInt(reverseCardNumber[i]))
+    }
+  }
+
+  for(let i=0; i<8; i++){
+    digitosPares[i] = digitosPares[i] * 2;
+    if (digitosPares[i] >9){
+      digitosPares[i] = digitosPares[i] -9
+    }
+  }
+
+  let sumaTotal = 0;
+
+  for(let i=0; i<8; i++){
+    sumaTotal = sumaTotal + digitosPares[i] + digitosNones[i];
+  }
+
+  let mSumaTotal=sumaTotal%10;
 
-console.log(validator);
+  letreros();
+  enmascarandoValores();
+
+if (mSumaTotal==0){
+  document.getElementById("letreroValida").style.display = "block";
+  } else{
+    document.getElementById("letreroInvalida").style.display = "block";
+
+}
+
+}
+
+function letreros(){
+document.getElementById("descripcion").style.display = "none";
+  document.getElementById("ingreso").style.display = "none";
+  document.getElementById("numero").style.display = "block";
+  }
+
+  function enmascarandoValores(){
+    for(let i=0; i<12; i++){
+  arregloCuadritos[i].value = "#";
+      }
+  }
+
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,152 @@
+body{
+  font-family: alata;/*fuente o tipo de letra*/
+  margin: 0;
+}
+
+footer{
+  display: flex;
+  height: 50px;
+  padding: 5px;
+  font-size: large;
+  justify-content: center;
+  align-items: center;
+  background-color: #BB4FB0;
+  color: white;
+  font-weight: 600;
+}
+
+header{
+  display: flex;
+  height: 50px;
+  padding: 5px;
+  font-size: large;
+  background-color: #BB4FB0;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.LOGO{
+  display: flex;
+  align-items: center;
+  color: white;
+  font-weight: 600;
+}
+
+.LOGO img{
+  max-width: 50px;
+  max-height: 50px;
+  margin-right: 10px;
+}
+
+a{
+  text-decoration: none;
+  color: white;
+}
+
+nav a{
+  font-weight: 600;/*Negritas/blanquitas*/
+  padding-right: 50px;
+}
+
+nav a:hover{
+  color: #FA5CEA;/*Cambia de color al pasar el cursor*/
+}
+
+#letreroValida{display:none}
+#letreroInvalida{display:none}
+#descripcion{display:block}
+#ingreso{display:block}
+#numero{display:none}
+
+p3{
+  text-align: center;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start;
+  font-size: x-large;
+  color: green;
+  background-color: white;
+  padding: 20px ;
+  margin: auto;
+  width: 300px;
+  height: 5px;
+}
+
+p4{
+  text-align: center;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-end;
+  font-size: x-large;
+  color: red;
+  background-color: white;
+  padding: 20px ;
+  margin: auto;
+  width: 300px;
+  height: 5px;
+}
+
+.textos{
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+}
+
+.inp{
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-direction: row;
+  text-align: center;
+  font-size: xx-large;
+  margin-right: 430px;
+  margin-left: 430px;
+}
+
+h1{
+    text-align: center;
+    color: #FFFFFF;/*da color al texto*/
+    font-size: x-large;
+    background-color: #BB4FB0;/*color de relleno*/
+    padding: 20px ;/*margen interior*/
+    margin: auto;/*margen exterior, auto para centrar*/
+    width: 600px;/*ancho caja*/
+    height: 20px;/*altura caja*/
+}
+
+p1{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    color: #FFFFFF;
+    background-color: #FA5CEA;
+    font-size: large;
+    padding: 10px ;
+    margin: auto;
+    width: 750px;
+    height: 30px;
+}
+
+input{
+  text-align: center;
+  color: #746E6E;
+  background-color: #F8CEF3 ;
+  border: 2px #F8CEF3;
+  font-size: large;
+  width: 15px;
+  height: 30px;
+}
+
+p2,p5{
+    text-align: center;
+    color: #BB4FB0;
+    background-color: #FDFDFD;
+    font-size: x-large;
+    padding: 20px ;
+    margin: auto;
+    width: 750px;
+    height: 30px;
+}
diff --git a/src/validator.js b/src/validator.js
@@ -1,5 +1,5 @@
 const validator = {
-  // ...
-};
+
+}  
 
 export default validator;