Stylizing Stories

index.html

html
  head
    title Stylizing Stories
  body
    .container-fluid.row.text-center
      h1 Jean's
      h2 Stylizing Stories Page
  footer
    .container-fluid.text-center
      .col-md-12
        p.copyright.text-muted.small Copyright © Jean C. González 2016. All Rights Reserved.
              

script.js

String.prototype.trunc = String.prototype.trunc ||
  function(n) {
    return this.length > n ? this.substr(0, n - 1) + '…' : this;
  };

$(document).ready(function() {
  var url = 'http://www.freecodecamp.com/news/hot';
  var username = 'Unknown';
  var picture = 'Unknown';
  var headline = 'Undefined';
  var link = '';
  var upvotes = 0;
  var fcc = 'http://freecodecamp.com/';
  var time = 0;
  var html;

  $.getJSON(url, function(data) {
    for (var news in data) {
      username = data[news].author.username;
      picture = data[news].author.picture;
      headline = data[news].headline;
      link = data[news].link;
      upvotes = data[news].upVotes.length;
      time = moment(data[news].timePosted).format('LLLL');

      html = '<article class="col-xs-2 well well-sm"><img class="logo" src="' + picture + '"><a href="' + fcc + username + '" target="_blank"><span class="glyphicon glyphicon glyphicon-user"></span> ' + username + ' | ' + '<span class="glyphicon glyphicon glyphicon-heart"></span> ' + upvotes + '</p></a><a href="' + link + '"target="_blank"><p>' + headline.trunc(28) + '</p></a><p> Posted on: ' + time.toString() + '</p></article>';

      $('.row').append(html);
    }
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js"></script>

style.css

@import url(https://fonts.googleapis.com/css?family=Cinzel|Sarala|Alegreya|Belleza);

body {
  padding-bottom: 2%;
  font-family: 'Sarala';
}

h1 {
  font-family: 'Cinzel';
}

h2 {
  font-family: 'Alegreya';
  margin-bottom: 2%;
}

.logo {
  border-radius: 5%;
  width: 95%;
}

.well {
  width: 20%;
  margin-right: 1%;
  margin-left: 2%;
  border-radius: 2%;
}

.row {
  margin: auto;
  width: 95%;
}

footer {
  font-family: 'Sarala';
  position: relative;
  margin-top: 1%;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />

Stylizing Stories.markdown

Stylizing Stories

Browse recent entries from Camper News.

A Pen by Jean on CodePen.

License.