Skip to content

Instantly share code, notes, and snippets.

@thomasnaude

thomasnaude/application.css

Last active May 4, 2017 17:43
Show Gist options
  • Save thomasnaude/ef96c8712705de986de3aa5d944484fa to your computer and use it in GitHub Desktop.
Save thomasnaude/ef96c8712705de986de3aa5d944484fa to your computer and use it in GitHub Desktop.
Download ZIP
HTTP & AJAX - clearbit
Raw
application.css
#response {
margin-top: 30px;
margin-bottom: 30px;
}
img {
width: 64px;
float: right;
margin-top: -32px;
margin-right: -32px;
border: 1px solid #ececec;
}
.panel.infos {
padding: 16px;
}
.banner {
height: 50vh;
text-align: center;
background-image: linear-gradient(-225deg, rgba(30,30,30,0.6) 30%, rgba(46,46,46,0.5) 80%), url("https://unsplash.it/1439/500?random");
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.content {
padding: 30px 0;
height: 50vh;
background-color: #F4F4F4;
}
Raw
application.js
// put a micro on id submit
// fetch emailInput
// ajax request on clearbit to get datas
// display data
//
$(document).ready(function(){
$("#emailform").submit(function(event){
event.preventDefault();
console.log("coucouminou");
var email = $("#emailInput").val();
console.log(email);
var url = "https://person.clearbit.com/v1/people/email/" + email ;
$.ajax({
url: url,
type: "GET",
beforeSend: function(xhr){
xhr.setRequestHeader('Authorization', 'Bearer sk_55ec21549d8e2828a23398f5eee8eb99');
},
success: function(data) {
$('#bio').html(data.bio);
$('.user-card').removeClass('hidden');
}
});
})
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Clearbit People</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="application.css">
</head>
<body>
<div class="banner">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Fetch info with Clearbit API</h1>
<form action="#" class="form-inline" id="emailform">
<input type="text" class="form-control" id="emailInput" placeholder="alan@turing.com">
<input type="submit" class="btn btn-primary" value="Lookup!" id="submit">
</form>
</div>
</div>
</div>
</div>
<div class="content">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="user-card hidden">
<img src="http://placehold.it/64x64" class="img img-circle" alt="avatar">
<div class="panel panel-default infos">
<div class="panel-body">
<div class="bio"><span><strong>Bio</strong></span><span class="pull-right" id="bio">No result</span></div>
<div class="email"><span><strong>Email</strong></span><span class="pull-right" id="email">No result</span></div>
<div class="gender"><span><strong>Gender</strong></span><span class="pull-right" id="gender">No result</span></div>
<div class="city"><span><strong>City</strong></span><span class="pull-right" id="city">No result</span></div>
<div class="employment"><span><strong>Employment</strong></span><span class="pull-right" id="employment">No result</span></div>
<div class="linkedin"><span><strong>Linkedin</strong></span><a href="#" class="pull-right" id="linkedin">No result</a></div>
<div class="facebook"><span><strong>Facebook</strong></span><a href="#" class="pull-right" id="facebook">No result</a></div>
<div class="github"><span><strong>Github</strong></span><a href="" class="pull-right" id="github">No result</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Including jQuery from the Google CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Including your code -->
<script src="application.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment