JSFiddle - React, Tailwind, and code Playground

by Yasser Sinjab

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://instagramcsharpdemo.azurewebsites.net/scripts/jquery.highlight.js"></script>
<div id="tabs">
    <ul>
        <li><a href="#popular-media-tab">Popular Media</a>

        </li>
        <li><a href="#tagged-media-tab">Tagged Media</a>

        </li>
    </ul>
    <div id="popular-media-tab">
        <button id='popular-media-btn'>Load Media</button>
        <ul id='popular-media-list'></ul>
    </div>
    <div id="tagged-media-tab">
        <div>
            <label for="tags">Tag:</label>
            <input id="tag" />
            <button id='tagged-media-btn'>Load Media</button>
        </div>
         <h3 id='tagged-media-result'></h3>

        <ul id='tagged-media-list'></ul>
    </div>
</div>

CSS

ul {
    list-style-type: none;
}
.highlight {
    background-color: yellow
}

JavaScript

$(function () {
    $("#tabs").tabs();
    $("#popular-media-btn")
        .button()
        .click(function (event) {
        $.getJSON("http://instagramcsharpdemo.azurewebsites.net/api/PopularMedia", function (data) {
            $('#popular-media-list').empty();
            $.each(data, function (key, mediaItem) {
                $('#popular-media-list').append('<li><img src="' + mediaItem.Images.Thumbnail.Url + '"/></li>');
            });
        });
    });

    $("#tagged-media-btn")
        .button()
        .click(function (event) {
        if ($("#tag").val().trim().length === 0) {
            alert('hi');
        } else {
            $.getJSON("http://instagramcsharpdemo.azurewebsites.net/api/RecentTaggedMedia", {
                q: $("#tag").val()
            }, function (data) {
                $('#tagged-media-list').empty();
                $('#tagged-media-result').empty();
                var media = [];
                $.each(data, function (key, mediaItem) {
                    media.push(mediaItem);
                    var captionText=mediaItem.Caption==null ? null: mediaItem.Caption.Text;
                    $('#tagged-media-list').append('<li><img src="' + mediaItem.Images.Thumbnail.Url + '"/><p class="media-caption">"' + captionText + '"</p></li>');
                });
                $('.media-caption').highlight($("#tag").val());   
                
                $('#tagged-media-result').text(media.length + ' items');
            });
        }
    });



});