JSFiddle - React, Tailwind, and code Playground

by Jesper Hof

HTML

<div id="blog-posts" style="display:none;">
    <h1>Laatste blog posts</h1>
    <div id="blog-posts-results"></div>
</div>

CSS

#blog-posts { font-family:verdana; border:1px solid #333; padding:20px; }
.blog-post { padding:20px; border: 1px dashed #000; margin:10px; }
.blog-post h3 { color:red; }
.blog-post div {  }

JavaScript

var $cw = $.noConflict();
$cw(document).ready(function() {
    getLatestBlogPosts( 3 );
});

function getLatestBlogPosts(amount)
{
    // Send request
    $cw.getJSON('http://www.cewe.be/nl/blog/api/get_recent_posts/?count=' + amount + '&callback=?',function( response ) {
        
        // Some if... checks
        if(typeof response.status !== "undefined" && response.status === "ok" && response.posts !== "undefined") {
                        
            // Read the posts
            var html = "";
            $cw(response.posts).each(function(index, post) {
                
                // Fetch the image
                var image = '';
                if(typeof post.attachments[0] !== 'undefined' && post.attachments[0].images !== 'undefined') {
                    image = post.attachments[0].images['small-feature'].url;
                }
                
                // Fetch the category
                var categoryTitle = '';
                if(typeof post.categories !== 'undefined' && typeof post.categories[0] !== 'undefined' && typeof post.categories[0].title !== 'undefined') {
                    categoryTitle = post.categories[0].title;                                 
                }
                
                // Fetch date
                var dateObj = new Date(post.date);
                var date = dateObj.getDate() + '-' + dateObj.getMonth() + '-' + dateObj.getFullYear();
                console.log(date);
                
                // Create the html
                html += '<div class="blog-post">';
                if(date != '') {
                    html += '    <span>' + date + '</span>';
                }
                html += '    <h3>' + post.title + '</h3>';
                if(image != '') {
                    html += '<div><img src="' + image + '"/></div>';
                }
                if(categoryTitle != '') {
                    html += '<h4>' + categoryTitle + '</h4>';                    
                }
...