clearbit.js

const authorization = "Bearer sk_9d181e5372e526fc69209f9e64dae0d0";

// 1. Select our form to get our input
const form = document.querySelector('#clearbitForm');
// store all other HTML elements (for enriched info)
const userName = document.querySelector('#userName');
const userEmail = document.querySelector('#userEmail');
const userBio = document.querySelector('#userBio');
const userLocation = document.querySelector('#userLocation');
const userInput = form.querySelector("#clearbitEmail");

// 2. Listen to the submit event on the form
form.addEventListener('submit', (event) =>  {
  const email = userInput.value;
  apiCall(email);
});

const apiCall = (email) => {
// 3. Build the url to call the API (GET request)
  const url = `https://person-stream.clearbit.com/v2/combined/find?email=${email}`
  fetch(url, {
    headers: {
      'Authorization': authorization
    }
  })
    // 4. Parse the response (json)
    .then(response => response.json())
    .then(data => {
      // 5. Identify and extract the data we need to enrich our profile
      console.log(data)
      const name = data.person.name.fullName
      const bio = data.person.bio
      const location = data.person.location
      // 6. Insert those in the HTML
      userName.innerHTML = name
      userEmail.innerHTML = email
      userBio.innerHTML = bio
      userLocation.innerHTML = location
    })
}