<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
<title>Mail Verification</title>
</head>
<body>
<section class="container mt-3">
<div class="row justify-content-between">
<div class="col-6">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Ingrese Email</label>
</div>
</div>
<div class="col-4">
<button class="btn btn-primary">Valida</button>
</div>
</div>
<ol class="list-group list-group-numbered mt-3">
</ol>
</section>
</body>
<script>
/* Ingresa a
https://apilayer.com/marketplace/email_verification-api?_gl=1*td662l*_ga*NTIwOTg3NzE1LjE2NzAwMTM2NTM.*_ga_HGV43FGGVM*MTY3MDAyMzk2Ni4zLjEuMTY3MDAyNDA1OC42MC4wLjA.#pricing
Te logueas y seleccionas el plan libre, te daran un Key
*/
const llave = 'COLOCA AQUI EL KEY';
document.querySelector('.btn').addEventListener('click', function(e) { if (document.querySelector('.btn').innerHTML == 'Valida') { document.querySelector('.btn').innerHTML = '<div class="spinner-border" role="status"></div>'; document.querySelector('.btn').disabled = true; var myHeaders = new Headers();
myHeaders.append("apikey", llave);
let ol = '';
var requestOptions = { method: 'GET',
redirect: 'follow',
headers: myHeaders
};
fetch("https://api.apilayer.com/email_verification/check?email=" + floatingInput.value, requestOptions)
.then(response => response.json())
.then((res) => { Object.entries(res).forEach(([key, value]) => { ol += li(key, value)
});
document.querySelector('.col-6').classList.add('d-none'); document.querySelector('.list-group').innerHTML = ol; document.querySelector('.btn').innerHTML = 'Hagamos otro'; document.querySelector('.btn').disabled = false; })
.catch(error => console.log('error', error)); } else { document.querySelector('.list-group').innerHTML = ''; document.querySelector('.btn').innerHTML = 'Valida'; document.querySelector('.col-6').classList.remove('d-none'); }
});
const li = (key, value) => { let dataArray = [{ "email": "Buscamos el email"
},
{ "did_you_mean": "Quisiste decir"
},
{ "user": "Usuario"
},
{ "domain": "Dominio"
},
{ "format_valid": "Formato valido"
},
{ "mx_found": "Registro Mail Exchanger"
},
{ "smtp_check": "Test del SMTP (EXISTE LA DIRECCION)"
},
{ "catch_all": "Posee comodin de reenvio"
},
{ "role": "Cuenta de empresa"
},
{ "disposable": "Cuenta email desechable"
},
{ "free": "Cuenta correo gratuita"
},
{ "score": "Puntuacion"
}
]
let res = dataArray.filter(obj => key in obj);
let check = '<i class="bi bi-check-circle text-success fs-4"></i>';
let fail = '<i class="bi bi-x-circle-fill text-danger fs-4"></i>';
let badge = value == 1 ? check : (value == 0 ? fail : check);
let cont = value == 1 ? 'SI' : (value == '' ? 'NO' : value);
return `
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">` + res[0][key] + `</div>
` + cont + `
</div>
<span class="badge bg-light rounded-pill">` + badge + `</span>
</li>
`;
}
</script>
</html>
