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.
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.
.ui.container | |
h1 FCC Camper News | |
.ui.special.cards.six.doubling |
($ => { | |
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); |
<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> |
h1 | |
text-align center | |
padding 1em 0 | |
font-size: 3em | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.css" rel="stylesheet" /> |