Skip to content
This repository was archived by the owner on Mar 18, 2019. It is now read-only.

Shakil Choudhury #2

Open
sh-k-l wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Shakil Choudhury #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
153 changes: 153 additions & 0 deletions CoInvestor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
font-family: 'Open Sans',sans-serif;
font-size: 20px;
text-align: center;
background-color: #f7fbf9;
color:#4a4a4a;
}

#fund-manager-container{
display: flex;
flex-wrap: wrap;
}

#fund-manager-container ul{
margin: auto;
}

.token{
display: flex;
align-items: center;
background-color: white;
border: 2px solid #dce5eb;
padding: 12px;
margin: 10px auto;
height: 150px;
}

a{
color:#d60b52;
font-size:28px;
margin-left:20px;
float: right;
}

.btnbox{
margin-left:auto;
margin-right:20px;
}

.title{
padding:0;
margin: 10px;
font-size: 16px;
}

.token img{
max-height: 100px;
max-width: 400px;
margin: 10px;
}

.sponsor{
background-color: #fddee9;
font-size: 11px;
padding:5px;
border-radius: 6px;
margin: 3px;
}

ul *{
list-style-type:none;
}

</style>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.min.js'></script>
<title>CoInvestor Coding Test</title>
</head>
<body>
<div id="intro">
This page showcases a list of fund managers that all have profiles on the <span style="color:#d60b52">CoInvestor</span> platform.
<hr>
</div>
<div id="fund-manager-container">
<ul>
<script id="token-template" type="text/template">
<li class="token">
<div class="sponsor-box">
{{#sponsors}}
<p class="sponsor">{{.}}</p>
{{/sponsors}}
</div>
<img src="{{logo}}">
<p class="title">{{title}}</p>
<div class="btnbox">
<a class="website" href="{{website}}"><i class="fas fa-globe"></i></a>
<a class="email" href="mailto:{{email}}"><i class="fas fa-envelope"></i></a>
</div>
</li>
</script>
</ul>
</div>
</body>
<script>
$( document ).ready(function() {

let $tm = $("#fund-manager-container");
let $tokens = $tm.find("ul");
let tokentemplate = $tm.find("#token-template").html();

function renderToken(data){
$tokens.append(Mustache.render(tokentemplate, {title:data.title, logo:data.logo, sponsors:data.sponsors, website: data.website, email:data.email}));
}

function getData(page = 1){
let currentPage = page;
$.ajax({
type: "GET",
url: "https://api.coinvestor.co.uk/v2/company/sponsor?&page="+page,
dataType: "json",
success: function(data){
$.each(data.data, function(i, item){
$.ajax({
type: "GET",
url: "https://api.coinvestor.co.uk/v2/company/sponsor/"+ item.id +"?include=latestLogo,primarySponsorType,otherSponsorTypes,communications",
dataType: "json",
success: function(details){
let ob = new Object();
ob.title = item.attributes.name.toUpperCase();
console.log(ob.title);
ob.sponsors = new Array();
$.each(details.included, function(x, detail){
if(detail.type == "file_manager"){
ob.logo = detail.attributes.path;
}else if(detail.type == "sponsor_type"){
ob.sponsors.push(detail.attributes.value);
}else if(detail.type == "company_communication"){
ob.email = detail.attributes.email;
ob.website = detail.attributes.website;
}
});
renderToken(ob);
}
});
});

if(currentPage < data.meta.pagination.total_pages){
currentPage++;
getData(currentPage);
}
}
});
}
getData();
});
</script>
</html>