CoInvestor · irinacristache · Mar 17, 2018 · Mar 17, 2018 · Mar 17, 2018
diff --git a/User Story b/User Story
@@ -0,0 +1,6 @@
+As a...
+As a client
+I want...
+I want a web page to display the name, address, website, logo and sponsor type of all the fund managers in a structured and aesthetically pleasing design.
+So that I...
+So that visitors can easily browse through the list and go to the website of the fund manager they are interested in. 
diff --git a/page.html b/page.html
@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+.grid-container {
+  display: grid;
+  grid-template-columns: auto auto auto auto;
+  grid-template-rows: 100px 300px;
+  grid-gap: 10px;
+  background-color: #2196F3;
+  padding: 10px;
+}
+.grid-container>div {
+  background-color: rgba(255, 255, 255, 0.8);
+  text-align: center;
+  padding:20px 0;
+  font-size: 30px;
+}
+body{
+        font-family: 'Open Sans',serif;
+        font-size: 20px;
+        text-align: center;
+        background-color: #e0e0eb;
+        color:#4a4a4a;
+      }
+
+      #grid {
+        display: grid;
+        flex-wrap: wrap;
+      }
+      #grid ul{
+        margin: auto;
+      }
+
+      .token{
+        display: flex;
+        align-items: center;
+        background-color: white;
+        border: 2px solid #c2f0f0;
+        padding: 12px;
+        margin: 10px auto;
+        height: 150px;
+      }
+
+      a{
+        color: #2aa2a2;
+        font-size:30px;
+        margin-left:25px;
+        float:right;
+      }
+
+      .btnbox{
+        margin-left:auto;
+        margin-right:20px;
+      }
+
+      .title{
+        padding:0;
+        margin: 10px;
+        font-size: 25px;
+      }
+
+      .token img{
+        max-height: 100px;
+        max-width: 400px;
+        margin: 10px;
+      }
+
+      .sponsor{
+        background-color: #d6f5f5;
+        font-size: 11px;
+        padding:5px;
+        border-radius: 6px;
+        margin: 3px;
+        display: grid;
+      }
+
+      ul *{
+        list-style-type:none;
+      }
+
+    $ (function() {
+    $("body").on("input propertychange", ".floating-label-form-group", function(e) {
+      $(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val());
+    }).on("focus", ".floating-label-form-group", function() {
+      $(this).addClass("floating-label-form-group-with-focus");
+    }).on("blur", ".floating-label-form-group", function() {
+      $(this).removeClass("floating-label-form-group-with-focus");
+    });
+  });
+    </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>Irina Cristache - CoInvestor Coding Test</title>
+  </head>
+  <body>
+    <div id="first">
+      <span style="color:#33cccc">COINVESTOR FUND MANAGERS</span>
+      <hr>
+    </div>
+    <div id="grid">
+      <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 = $("#grid");
+    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>