Skip to content

Instantly share code, notes, and snippets.

@artemave

artemave/index.html

Last active August 29, 2015 14:07
Show Gist options
  • Save artemave/76768160896793974141 to your computer and use it in GitHub Desktop.
Save artemave/76768160896793974141 to your computer and use it in GitHub Desktop.
Download ZIP
This is a programming test for u_n_b_o_x_e_d. I am not telling you what it is doing, so that other candidates can't google it out.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Unboxed test</title>
<meta charset="utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<style type="text/css" media="screen">
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
main {
margin: 10px auto 0 auto;
width: 90%;
}
#result {
background-color: #fcfcfc;
max-width: 400px;
height: 72px;
padding-top: 10px;
padding-bottom: 10px;
}
.border-line {
width: 100%;
height: 1px;
margin-top: 1px;
margin-bottom: 1px;
box-shadow: 0 -1px 0 rgba(0, 0, 0, .06) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
.container {
background-color: #fcfcfc;
height: 65px;
display: flex;
}
.avatar {
margin: 8px 8px 8px 10px;
}
.avatar img {
width: 48px;
height: 48px;
border-radius: 5px;
}
.caption {
display: flex;
justify-content: space-between;
line-height: 8px;
}
.content {
padding: 10px 10px 10px 0;
width: 80%;
}
.username {
color: #333;
font-weight: bold;
font-size: 13px;
}
.message .link {
color: #2477b3;
}
.timestamp {
color: #999;
font-size: 10px;
}
.message {
padding-top: 5px;
font-size: 13px;
}
</style>
</head>
<body>
<main>
<h1>What is that guy's favourite programming language?</h1>
<form>
<input type="text" placeholder="github username"/>
<button>Go</button>
</form>
<br />
<div id="result">
<div class="border-line"></div>
<div class="container">
<div class="avatar">
<img src="https://pbs.twimg.com/profile_images/378800000157444628/0dd729d3a8c33dabb6a8970e0245a07d_bigger.png" alt="" title="" style="">
</div>
<div class="content">
<div class="caption">
<div class="username">Username</div>
<div class="timestamp">time</div>
</div>
<div class="message">message to <span class='link'>@myself</span></div>
</div>
</div>
<div class="border-line"></div>
</div>
</main>
<script type="text/javascript" charset="utf-8">
$(document).on('submit', 'form', function(e){
e.preventDefault();
var username = $('input').val();
var $resultBox = $('#result');
if (!username)
return false
$resultBox.fadeOut();
$.ajax("https://api.github.com/users/" + username + "/repos", {
success: function(data) {
// TODO refactor until more readable
var language = _(data).map(function(repo) {
return repo.language;
}).compact().groupBy().reduce(function(result, arr, key) {
if (arr.length > result.length) {
result = arr;
}
return result;
}, [])[0];
$resultBox.find('.message').html("Looks like <span class='link'>@"+username+"</span> prefers to code in " + language);
$resultBox.fadeIn();
},
error: function() {
$resultBox.find('.message').html("User not found");
$resultBox.fadeIn();
}
});
return false;
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment