clearbit.js

const baseUrl = "https://person.clearbit.com/v2/people/find?email=";
const authorization = "Bearer sk_d32a1fafc46187184db79ee19e470a5f";

// DONE - Add an Event listener to the submit button
// DONE - Get the value of the input
// DONE - Call the clearbit api
// DONE - Process the response
// Update the html with the response data

// <tr>
// <td>Name</td>
// <td id="userName"></td>
// </tr>
// <tr>
// <td>Email</td>
// <td id="userEmail"></td>
// </tr>
// <tr>
// <td>Bio</td>
// <td id="userBio"></td>
// </tr>
// <tr>
// <td>Location</td>
// <td id="userLocation"></td>
// </tr>

const populateData = (name, email, bio, location) => {
	document.getElementById("userName").innerText = name;
	document.getElementById("userEmail").innerText = email;
	document.getElementById("userBio").innerText = bio;
	document.getElementById("userLocation").innerText = location;
}

const formElm = document.querySelector("#clearbitForm");
formElm.addEventListener("submit", (event) => {
	event.preventDefault();
	const emailInputElm = document.querySelector("#clearbitEmail");
	const emailValue = emailInputElm.value;
	fetch(baseUrl + emailValue, {
		headers: {
			'Authorization': authorization,
		}
	})
	.then(response => response.json())
	.then(data => {
		const name = data.name.fullName;
		const bio = data.bio;
		const email = data.email;
		const location = data.location;

		populateData(name, email, bio, location);
	})
});