freeCodeCamp/views/stories/new-stories.jade

.spacer
.col-xs-12
    #story-list.story-list

        script(src="https://cdn.jsdelivr.net/ramda/0.10.0/ramda.min.js")
        script.

            var getLinkedName = function getLinkedName(name) {
                return name.trim().toLowerCase().replace(/\s/g, '-');
            }
            $.ajax({
                url: '/stories/recentStories',
                type: 'GET'
            })
                    .success(
                    function(data) {
                        for (var i = 0; i < data.length; i++) {
                            var div  = document.createElement('div');
                            var linkedName = getLinkedName(data[i].storyLink);
                            var rank = data[i].rank;

                            $(div)
                            .html(
                                "<div class='col-xs-12 text-left'>" +
                                    "<h2 class='col-xs-1 col-sm-1 positive-5'>" +
                                        (i + 1) +
                                    "</h2>" +
                                    "<div class='col-xs-2 col-sm-1'>" +
                                        "<a href='/" + data[i].author.username + "'>" +
                                            "<img src='" + data[i].author.picture + "' class='img-news'/>" +
                                        "</a>" +
                                    "</div>" +
                                    "<div class='col-xs-9 col-sm-10'>" +
                                        "<div class='row'>" +
                                            "<div class='story-headline col-xs-12'>" +
                                                "<a href='" + data[i].link + "' target='_blank'>" +
                                                    data[i].headline +
                                                "</a>" +
                                            "</div>" +
                                            "<div class='col-xs-12'>" +
                                                "<span>" +
                                                    "<a class='btn btn-no-shadow btn-primary btn-xs btn-primary-ghost' href='/stories/" + linkedName + "'>discuss</a> · " +
                                                    rank + (rank > 1 ? " points" : " point") + " · posted " +
                                                    moment(data[i].timePosted).fromNow() +
                                                    " by <a href='/" + data[i].author.username + "'>@" + data[i].author.username + "</a> " +"</a> " +
                                                "</span>" +
                                            "</div>" +
                                        "</div>" +
                                    "</div>" +
                                "</div>"
                            );
                            $(div).addClass('story-list')
                            $(div).appendTo($('#story-list'));
                        }
                    });