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

Img #4

Open
wants to merge 32 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
fffe8ec
Agregamos paquete Json
Lina-1985-cloud Jan 14, 2022
8445efb
realizamos maquetado en html y comenzamos con estilos
Lina-1985-cloud Jan 14, 2022
ac79b17
Merge pull request #1 from nathaly-creat/maquetado
nathaly-creat Jan 14, 2022
de7c2f2
agregamos estilos al html
Lina-1985-cloud Jan 17, 2022
25c528a
Merge pull request #2 from nathaly-creat/css
Lina-1985-cloud Jan 17, 2022
7161d80
index_js_DOM
Lina-1985-cloud Jan 18, 2022
dac9442
Merge pull request #3 from nathaly-creat/funtion
Lina-1985-cloud Jan 18, 2022
848ab44
validación del form
Lina-1985-cloud Jan 20, 2022
3d882e9
Merge pull request #4 from nathaly-creat/cardFuntion
Lina-1985-cloud Jan 20, 2022
ce3195d
algoritmo Lunh
Lina-1985-cloud Jan 21, 2022
feeaa92
Merge pull request #5 from nathaly-creat/validator
Lina-1985-cloud Jan 21, 2022
06f1ca1
fin del algoritmo Lunh
Lina-1985-cloud Jan 24, 2022
c8e35f9
Merge pull request #6 from nathaly-creat/lunh
Lina-1985-cloud Jan 24, 2022
4d5ce42
terminamos maskify y Readme
Lina-1985-cloud Jan 25, 2022
000e13d
Merge pull request #7 from nathaly-creat/maskify
Lina-1985-cloud Jan 25, 2022
8cbaa9d
del
Lina-1985-cloud Jan 26, 2022
2172447
Merge pull request #8 from nathaly-creat/readme
Lina-1985-cloud Jan 26, 2022
2b2ea4d
foto logo
Lina-1985-cloud Jan 26, 2022
26db9e0
Merge pull request #9 from nathaly-creat/Readme2
Lina-1985-cloud Jan 26, 2022
2833fec
Terminamos el Readme
Lina-1985-cloud Jan 26, 2022
ea6a4cb
Merge pull request #10 from nathaly-creat/imagenes
Lina-1985-cloud Jan 26, 2022
1d79109
correción imagenes
Lina-1985-cloud Jan 26, 2022
674df00
Merge pull request #11 from nathaly-creat/correcion
Lina-1985-cloud Jan 26, 2022
bb83816
prototipo papel
Lina-1985-cloud Jan 26, 2022
8c17e89
Merge pull request #12 from nathaly-creat/correcion
Lina-1985-cloud Jan 26, 2022
e64c781
Arreglo cards y form
Lina-1985-cloud Jan 27, 2022
65a803d
Merge pull request #13 from nathaly-creat/estilos
Lina-1985-cloud Jan 27, 2022
4003610
alert corregido
Lina-1985-cloud Jan 27, 2022
db6c88e
Merge pull request #14 from nathaly-creat/alert
Lina-1985-cloud Jan 27, 2022
fdd9015
eliminar comentarios
Lina-1985-cloud Jan 28, 2022
c762bf6
Merge pull request #15 from nathaly-creat/comentatios
Lina-1985-cloud Jan 28, 2022
7d6fd6d
images-delete
Lina-1985-cloud Jan 28, 2022
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
fin del algoritmo Lunh
Lina-1985-cloud committed Jan 24, 2022
commit 06f1ca18891184f4cfa02b6ab7e3ab5adc6bc88c
6 changes: 3 additions & 3 deletions src/index.html
Original file line number Diff line number Diff line change
@@ -21,7 +21,7 @@
<!-- Menu (modificar la dimensiones del logo petshop)-->
<div class="container_menu">
<figure>
<img class="logo" src="https://res.cloudinary.com/dtaq1ip2g/image/upload/v1642432139/logopng_raq7he.png" src="#" alt="Logotipo de Pet Shop">
<img class="logo" src="https://res.cloudinary.com/dtaq1ip2g/image/upload/v1642432139/logopng_raq7he.png" alt="Logotipo de Pet Shop">
</figure>
<nav>
<ul class="menu">
@@ -105,7 +105,7 @@ <h2 class="titulo">Accesorios y Juguetes</h2><br>
<!-- Crear formulario para imprimir datos en la tarjeta de crédito-->
<div class="container_creditCard">
<form class="creditCard " action="">
<label><input class="number" type="text" id="numberCard"></label>
<label><input class="number" type="text" id="numberCard" placeholder="#### #### #### ####"></label>
<label><input class="name" type="text" id="nameCard"></label>
</form>

@@ -125,7 +125,7 @@ <h2 class="titulo">Accesorios y Juguetes</h2><br>
<!-- footer-->
<footer>
<figure>
<img class="logoFooter" src="https://res.cloudinary.com/dtaq1ip2g/image/upload/v1642432139/logopng_raq7he.png" src="#" alt="Logotipo de Pet Shop">
<img class="logoFooter" src="https://res.cloudinary.com/dtaq1ip2g/image/upload/v1642432139/logopng_raq7he.png" alt="Logotipo de Pet Shop">
</figure>

<ul>
90 changes: 67 additions & 23 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -46,41 +46,56 @@ comprarInactivo.addEventListener('click', ()=>{
.replace(/([0-9]{4})/g, '$1')
// // Elimina el ultimo espaciado
.trim();
})



//PREGUNTAR SI ACA DEBEMOS CONSTRUIR
//EL SPLIT DE LA TARJETA Y REVERSE PARA EXPORTAR LA FUNCION ENTRE ARCHIVOS*****
const numberCard = document.getElementById('numberCard');

// escuche el evento. isvalid(Algoritmo LUHN).retornar un resultado. html DOM Valid o no. MI DUDA
numberCard.value = input

//**SOLUCION POR FANNY**


// Guardar (captuar de datos).numbCard del input.
// Boton addEventListener('EDOM', validator.isValid(cardNumber))
// // numberCard.textContent = validator.maskify(input);
// // }

//document.getElementById('numberCard').value = input

// const inputCc = document.getElementById('numberCard')
// inputCc.addEventListener('keyup', (e) => {
// let numberCard = e.target.value;


})







//**SOLUCION POR FANNY**


// Guardar (captuar de datos).numbCard del input.
// Boton addEventListener('EDOM', validator.isValid(cardNumber))



// Input select mes

form.monthExpire.addEventListener('keyup',(e)=>{

monthExpire.textContent = e.target.value;
})
// form.monthExpire.addEventListener('keyup',(e)=>{

// monthExpire.textContent = e.target.value;
// })


// Input select año

form.yearExpire.addEventListener('keyup',(e)=>{
// form.yearExpire.addEventListener('keyup',(e)=>{

yearExpire.textContent = e.target.value.slice(2);
})
// yearExpire.textContent = e.target.value.slice(2);
// })



@@ -117,6 +132,8 @@ comprarInactivo.addEventListener('click', ()=>{

form.accountCard.value = input.replace(/[0-9]/g, '');

document.getElementById('nameCard').value = input

})

// * Input CVV
@@ -139,18 +156,42 @@ comprarInactivo.addEventListener('click', ()=>{
const inputNumberTc = document.getElementById('numberTc')
inputNumberTc.addEventListener('keyup', (e) => {
let cardNumber = e.target.value;
// isvalid
const isValid = validator.isValid(cardNumber);

const btnPagar = document.getElementById('pagar');
btnPagar.addEventListener('click' , ()=>{
if(isValid == cardNumber){
console.log('Gracias por su compra')
}
})


// maskify
const maskify = validator.maskify(cardNumber)
document.getElementById('numberCard').innerHTML = maskify


})

//cardNumber.addEventListener('keyup', function(){
//*******SECCION ENMASCARAMIENTO*********/
// numberCard.textContent = validator.maskify(cardNumber);

// document.getElementById('numberCard').value = form

// const cardNumber = document.getElementById('numberTc');

// document.getElementById('numberCard').textContent = validator.maskify(cardNumber.value)

// numberCard.addEventListener('keyup', (e)=>{
// let numberMaskify = e.numberCard.value;
// numberMaskify = value.replace(/\D/g, '')



// })

const isValid = validator.isValid(cardNumber);
// if (isValid == true){
// alert('Muchas gracias por su compra con su Tarjeta de Crédito');
// }else{
// alert('Tarjeta invlida, por favor verifica nuevamente los datos');
// }

//})
})



@@ -162,7 +203,7 @@ inputNumberTc.addEventListener('keyup', (e) => {

// let btn = document.getElementById('pagar')
// btn.addEventListener('click', validator.isValid(cardNumber))
// // let cardNumber = form.numberTc.value;
// let cardNumber = form.numberTc.value;
// let btn = document.getElementById('pagar')
// document.addEventListener('click', validator.isValid(cardNumber));

@@ -178,6 +219,9 @@ inputNumberTc.addEventListener('keyup', (e) => {






// function Message(){
// alert('Muchas gracias por su compra con su Tarjeta de Crédito'); //CONCATENAR AL MENSAJE LOS ULTIMOS 4 DIGITOS CIFRADOS DE TDC.
// }
82 changes: 51 additions & 31 deletions src/validator.js
Original file line number Diff line number Diff line change
@@ -1,27 +1,18 @@
const validator = {

isValid: function (cardNumber){
let array1 = []

// save to array
let array1 = []
// el split convierte un string en array
// save to array en Variable Global.
// el split convierte un string en array y el reverse me los invierte
array1= cardNumber.split('').map(Number).reverse();
// invertir los número ingresados
//let arrayReverse = array1.reverse();
// console.log(cardNumber);

// console.log(cardNumber)

// Crear un nuevo array

//
console.log(array1)

// for each para que recorra el arreglo
// array1.forEach(element => console.log(element));
// console.log(array1)

// forEach para que recorra el arreglo y lo muestre en console
array1.forEach((element, index)=>{

if(index % 2 != 1){
if(index % 2 == 1){
element = element * 2
}

@@ -30,26 +21,55 @@ const validator = {
element = parseInt(element[0]) + parseInt(element[1]);
}


//bajar ellos elementos sumados posicionar numeros
array1[index] = parseInt(element);
console.log(array1)

// funtion sumar todo el Array: PENDIENTE DE CORREGIR ESTA FUNCIÓN
function sumOfAll(suma){
let total = 0;
for(let i of suma)
total += i;
return total;
}
console.log(array1)

//Suma del Array
let sum = 0;
array1.forEach((element)=>{
sum += element
})
console.log(sum)


//Modulo de la suma
let result = sum % 10;
console.log(result);

});
if (result === 0){console.log('Tarjeta válida')
}else{ console.log('Trajeta Inválida')}

});

return(cardNumber)
},

//*****ENMASCARAMIENTO EN LA TARJETA */
maskify: function (cardNumber){
let number = []

for(let i = 0; i< cardNumber.length; i ++){
if(i < cardNumber.length-4){
number.push("#");
}else{
number.push(cardNumber[i])
console.log(number.join(""));
}
}


};
return (cardNumber)

}

// for (let i = 0; i < cardScreen.length - 4 ; i++){
// cardScreen = cardNumber.replace(/\w/g,'#'); // \w= Matches any word character (alphanumeric & underscore)
// }
// return(cardNumber)
// //console.log(cardNumber);
// }

export default validator;


};
export default validator;