FCC Stylize Stories

FCC Stylize Stories.markdown

FCC Stylize Stories

This is an app that displays trending news stories that campers post to FCC news. I used Jade, Stylus, jQuery, JavaScript, ES6, and Semantic UI to style the card components.

A Pen by Adam Recvlohe on CodePen.

License.

index.html

.ui.container
  h1 FCC Camper News
  .ui.special.cards.six.doubling

script.js

($ => {

  const api = 'http://www.freecodecamp.com/news/hot';

  $.ajax({
    url: api,
    crossDomain: true,
    dataType: 'json',
    success: (data) => {
      data.forEach(story => {
        const discuss = story.headline.trim().replace(/&|([^\w\s])/g, '').match(/\w+/g).join('-').toLowerCase();
        const discussLink = `http://www.freecodecamp.com/news/${discuss}`;
        const name = story.author.username;
        const userLink = `http://www.freecodecamp.com/${name}`
        const authImage = story.author.picture;
        const link = story.link;
        const upvotes = story.upVotes.length;
        const date = new Date(story.timePosted);
        const headline = story.headline.trim();
        
        const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'];
        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        const day = days[date.getDay()];
        const month = months[date.getMonth()];
        const year = date.getFullYear().toString().slice(2);
        const dayNum = date.getDate();
        const today = new Date();
        const thisYear = today.getFullYear().toString().slice(2);
        let dateAbbr = `${month} ${dayNum} '${year}`;
        
        if(thisYear === year) 
          dateAbbr = `${month} ${dayNum}`;
        
        $('.cards').append(
          `<div class='card'>
            <div class='extra content'>
              <div class='right floated meta'>${dateAbbr}</div>
                <a href=${userLink} target='_blank'><img class="ui avatar image" title=${name} src=${authImage}></a>
              </div>
            <div class ='content'>
              <a href=${link} target='_blank'>
                <div class='ui header'>${headline}</div>
                <div class='meta'>Read more</div>
              </a>
            </div>
            <div class='extra content'>
              <div class='content'>
                <span class='right floated'>
                  <i class='heart outline like icon'></i>
                  ${upvotes}
                </span>
                <a href=${discussLink} target='_blank'>
                  <i class='comment outline icon'></i>
                  Discuss
                </a>
              </div>
            </div>
           </div>`)
      });
    }
  });
})(jQuery);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.js"></script>

style.css

h1
  text-align center
  padding 1em 0
  font-size: 3em
  

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.css" rel="stylesheet" />