Camper News- FCC

Camper News- FCC.markdown

Camper News- FCC

Implementation of a stylised version of the Free Code Camp's camper news(which currently has been discontinued). The data can be found here https://www.freecodecamp.com/news/hot/ Initially implemented using HTML, CSS, JQuery. For building of each story, added the required HTML as strings while looping through the JSON data This implementation makes use HandleBars templating. Using HandleBars was a quite a challenge on this data since, the data is an array of objects and also I needed the data to be modified before displaying to the user. Added a representative element for the JSON object for accessing it, and used Helper functions for the modification of data.

index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<center>
<h1> Free Code Camp</h1>
<h2>Camper news Stories</h2>
</center>
<div id="wrap-stories"></div>
<!--
1. The handlebars template which contains the template format
2. Iterating through each object property(Since the JSON was an array of objects, I created a holding property named objects so that i can iterate easily.)
3. Where required used helper functions appropriately
4. Rest of the places accessed the property directly, since I am iterating thorugh the object 
-->
<script id="data_populate_template" type="text/x-handlebars-template" >
  {{#each objects}}
  <div class="story">
    <a target="_blank" href={{link}} class="pictureHolder"><img class="pic" src={{author.picture}}></a>
    <p class="titleWrap">
      <a target="_blank" href={{link}} class="title">{{headline}}</a><br>
    </p>
    <a target="_blank" href="http://freecodecamp.com/{{author.username}}" class="camper">By- {{author.username}}</a>
    <div class="merger">
      <p class="love">♥  {{rank}}</p>
      <a target="_blank" href={{returnDiscussUrl storyLink}}>
        <button class="discuss">Discuss</button>
      </a>
      <p class="postDetails">{{getPostedDate timePosted}}</p>
    </div>
  </div>
  {{/each}}
</script>


  

script.js

$(document).ready(function(){
  $.getJSON("https://www.freecodecamp.com/news/hot/",function(json){
    //Helper function returnDiscussUrl, which makes a modification to the stories URL and returns back to the template
    Handlebars.registerHelper("returnDiscussUrl", function (storyLink){
      var discussUrl="http://freecodecamp.com/news/";
      storyLink=storyLink.replace(/ /g,'-');
      discussUrl=discussUrl+storyLink;
      return discussUrl;
    });
    //Helper function getPostedDate, which accesses the time posted, converts it into data and returns the data in appropriate format
    Handlebars.registerHelper("getPostedDate", function (timePosted){
      var datePosted=new Date(timePosted);
      var dateString=datePosted.toString();
      var dates=dateString.split(" ");
      return 'Posted on: '+dates[0]+', '+dates[1]+' '+dates[2]+' '+dates[3];
    });
    /*
    The actual handlebar code being executed
    1. Access the html of the template
    2. generate a renderer function by compling the html template
    3. Since the data is array of objects, there is a need of a handler, so create a handler 'objects' and pass the JSON data to the renderer, which returns the resultant html
    4. Put the html on the page
    */
    var templateHtml= $("#data_populate_template").html();
    var renderer= Handlebars.compile(templateHtml);
    var resultHtml = renderer({objects: json});
    $("#wrap-stories").html(resultHtml); 
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js"></script>

style.css

body{
  font-family:calibri;
  background-color:#ffd9d9;
}
.story{
  width:200px;
  background-color:pink;
  height:320px;
  text-overflow:ellipsis;
  border-radius:10px;
  margin:15px;
}
.pictureHolder{
  width:200px;
  height:150px;
}
.pic{
  width:200px;
  height:200px;
  border-radius:10px;
}
.titleWrap{
  padding:2px;
  width:200px;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
  font-size:20px;
  margin:0px;
}
.title{
  width:200px;
  white-space:nowrap;
  text-decoration:none;
  font-weight:bold;
  color:#0099cc;
  font-family:calibri;
  text-overflow:ellipsis;
  overflow:hidden;
}
.camper{
  text-decoration:none;
  color:#0099cc;
  font-family:calibri;
  font-size:18px;
  white-space:nowrap;
}
.postDetails{
  font-family:calibri;
}
.merger{
  margin-bottom:3px;
}
.love{
  display:inline;
  margin-left:5px;
  font-size:18px;
}
.discuss{
 float:right;
 margin-right:5px;
 background-color:#0099cc;
 color:white;
 border-radius:5px;
}
.title,.camper,.postDetails,.merger{
  padding:5px;
}
#wrap-stories{
  display:flex;
  flex-wrap:wrap;
  margin: 0 auto;
}
a{
  text-decoration:none;
}
h1{
font-family:Lucida Calligraphy;
}
h2{
  font-family:Vani;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />