API Demo

<html>
  <head>
    <title>MailboxLayer Email Checker Proof of Concept</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <style>
      * {
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-8">
          <p>Enter the email you wish to be checked:</p>
          <input class="form-control my-2" type="email" id="email" placeholder="[email protected]">
          <button type="button" id="button" class="btn btn-primary my-2">Submit</button>
          <div class="alert my-4" role="alert" id="response">
            <b></b>
            <br>
            <pre class="text-left">

            </pre>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-8">
          <p>This API is found at https://mailboxlayer.com is used for evaluating emails and how legitimate the email could be.
            A use case for this would be verifying people signing up for an website are using emails that are valid and less likely to be spam the service.
            This will ensure that real people are signing up rather than one person generating email accounts and using the service maliciously.
            The api will generate a score from the email address and provide the user the score from information such are what kind of domain is it created from and if it is free or not
            which will tell if the email is of a bad quality which is not worth sending things to or approving or is it a good quality email
            worth being approved.
          </p>
        </div>
      </div>
    </div>
    <script>
      const API_KEY = 'ac0a044916b9b20806a2f4e7a14d270b';
      (function(){
        document.getElementById("button").addEventListener('click', function() {
          console.log(this);
          const userEmail = document.getElementById('email').value;
          const outputField = document.getElementById('response');

          fetch('https://apilayer.net/api/check?access_key=' + API_KEY + '&email=' + userEmail)
          .then(response => {
            return response.json();
          })
          .then(json => {
            console.log(json);
            outputField.classList.remove('alert-danger');
            outputField.classList.remove('alert-success');
            outputField.classList.remove('alert-warning');
            if (json.format_valid) {
              outputField.classList.add('alert-success');
              outputField.querySelector('b').innerText = 'Success';
            } else {
              outputField.classList.add('alert-warning');
              outputField.querySelector('b').innerText = 'Warning - Invalid Email Format';
            }
              outputField.querySelector('pre').innerText =  JSON.stringify(json, null, 2);
          })
          .catch(error => {
            outputField.classList.remove('alert-danger');
            outputField.classList.remove('alert-success');
            outputField.classList.remove('alert-warning');
            outputField.classList.add('alert-danger');
            outputField.querySelector('b').innerText = 'Error';
            outputField.querySelector('pre').innerText =  error;
          });
        });
      })();
    </script>
  </body>
</html>