Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Readme #6

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
upload html y js
gilliam24 committed Jan 24, 2022
commit 74ea5934beb38d095e0d1ec687f8fa2232db7616
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/imagenes.img/fondo.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 29 additions & 11 deletions src/index.html
Original file line number Diff line number Diff line change
@@ -6,12 +6,13 @@
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="pag1" class= "pag1" >
<center>
<body background="imagenes.img/fondo.jpg">
<div id="pag1" class= "pag1">
<center>
<img src="imagenes.img/descarga.jfif" width="300" height="120"> </center>
<br>
<span style="font-size: 40px; margin: 21px 0;">BIENVENIDOS</span>
</br>

<h1 font-size: 250% class="title" style="font-size:38px"> BIENVENIDOS </h1>

<h1>PET SHOP</h1>
<div id="images" class="images">
<img src="imagenes.img/img1.jpg" width="150" height="150">
@@ -26,17 +27,34 @@ <h1>PET SHOP</h1>


<div id="pag2" class= "pag2">
<img src="imagenes.img/diferencia-tarjeta-credito-debito.png" alt="">
<form>
<div>
<input type="text" name="name" id="name" placeholder="NOMBRE">
<input type="number" name="numbertc" id="cardNumber" placeholder="DIGITA EL NUMERO DE TU TARJETA DE CREDITO">
<button id="btn-ntc" type="button" >Validar</button>

</form>
</div>
<br>
<div>
<input type="number" name="numbertc" id="cardNumber" placeholder="DIGITA EL NUMERO DE TU TARJETA" maxlength="16">
</br>
<br>
<button id="btn-ntc" class="last" type="submit" >Validar</button> </br>
</div>
</form>
<p> </p>
<footer></footer>
</div>
</div>


</div>





<footer></footer>




<script src="index.js" type="module"></script>

</body>
35 changes: 26 additions & 9 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,41 @@
import validator from './validator.js';

function comprar() {
document.getElementById("pag1").style.display = 'none';
document.getElementById("pag2").style.display = 'block';
}

const comprar1 = document.getElementById("btnimg1");
const comprar2 = document.getElementById("btnimg2");
const comprar3 = document.getElementById("btnimg3");
comprar1.addEventListener("click", () => comprar1())
comprar2.addEventListener("click", () => comprar2())
comprar3.addEventListener("click", () => comprar3())
comprar1.addEventListener("click", () => comprar())
comprar2.addEventListener("click", () => comprar())
comprar3.addEventListener("click", () => comprar())


const form = document.querySelector('form'); //impedir que el usuario envie los datos vacios.
const name = document.getElementById('name');
const cardNumber = document.getElementById('cardNumber');
form.addEventListener('submit', e => {
if (name.value === '' || cardNumber.value === '') {
alert('Por favor ingresa tu nombre y tu número de Tarjeta de Crédito');
e.preventDefault();
}

})

let btnntc = document.getElementById("btn-ntc");
let btnntc = document.getElementById("btn-ntc"); //Mostrar mensaje de tarjeta valida o invalida
//let numbertc = document.getElementById("cardNumber");
btnntc.addEventListener('click', () => {
let numbertc = document.getElementById("cardNumber").value;
validator.isValid(numbertc)
validator.maskify(numbertc)
if (validator.isValid(cardNumber.value)) {
alert("tu tarjeta terminada en " + validator.maskify(cardNumber.value) + " es Valida");
} else {
alert("tu tarjeta terminada en " + validator.maskify(cardNumber.value) + " es Invalida")
}


console.log(validator.isValid(cardNumber.value));


return console.log(numbertc);
return;
})

42 changes: 42 additions & 0 deletions src/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@

.title{
font-family: cursive;
text-align: center;
}



h1{
text-align: center;
font-family: cursive;
}

.images{
text-align: right;
}

.pag2{
text-align: center;
display: none;
margin: 0.5em 3em 0.5em 3em;
padding: 2em;
}

.pag1{
margin: 3em 3em 3em 3em;
padding: 3em;
border: 1px solid rgb(211, 205, 187)
}

input{
border: 2px solid rgb(49, 185, 209);
width: 300px;
height: 30px;

}

.last {
border: double black;
width: 100px;
height: 25px;
}
13 changes: 8 additions & 5 deletions src/validator.js
Original file line number Diff line number Diff line change
@@ -16,19 +16,22 @@ const validator = {
}

}
//return console.log(numPair + numOdd) % 10 === 0;
return (numPair + numOdd) % 10 === 0;

},


maskify: (cardNumber) => {
let response=""
if (cardNumber.length > 4) {
let result = cardNumber.lengt - 4;
let result = cardNumber.length - 4;
console.log("#".repeat(result) + cardNumber.substr(-4));
return "#".repeat(result) + cardNumber.substr(-4);

response= "#".repeat(result) + cardNumber.substr(-4);
}
},
console.log(response)
return response ;
}

}
export default validator;