JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<form>
    <p>A better way to search the app stores... only returns the first 50 results :D</p>
    <input type="text" class="search" value="math" />
    <select class="media-type">
      <option value="software">iPhone Software</option>
      <option value="iPadSoftware">iPad Software</option>
      <option value="macSoftware">Mac Software</option>
    </select>
    <input type="button" class="submit" value="submit" />
    <div class="results"></div>
</form>

CSS

body {
    font-family: helvetica;
}
.results {
}
.result {
    overflow: hidden;
    display: block;
    padding: 4px;
    margin: 5px 0;
    border: 1px solid #ccc;
}
.result .details {
    overflow: hidden;
}
.result .title {
    margin-top: 19px;
    padding-left: 10px;
    float: left;
    color: #329fe3;
    
    text-overflow: ellipsis;
    width: 90%;
    height: 20px;
    white-space: nowrap;
}
.result .icon {
    display: block;
    float: left;
    width: 57px;
    height: 57px;
}
.screenshots {
    margin-top: 5px;
}
}

JavaScript

$('form').bind('submit', function () {
    $('.submit').trigger('click');
    return false;
});
$('.submit').bind('click', function () {
    var iPad = false,
        mediaType = $('.media-type').val();
    
    if (mediaType == 'iPadSoftware') {
        mediaType = 'software';
        iPad = true;
    }
    
    $.getJSON('https://itunes.apple.com/search?term=' + encodeURIComponent($('.search').val()) + '&media=' + mediaType + '&callback=?', function (response) {
        
        $('.results').html(response.results.map(function (item) {
            var screenshots = iPad ? item.ipadScreenshotUrls : item.screenshotUrls;
            
            return ''+
                '<div class="result">' +
                    '<div class="details">' + 
                        '<img class="icon" src="' + item.artworkUrl60 + '"/>' +
                        '<a href="' + item.trackViewUrl + '" class="title">' + item.trackName + '</a>' +
                    '</div>' +
                    '<div class="screenshots">' +
                        (screenshots ? screenshots.map(function (url) {
                            return '<img src="' + url + '" width="240" />';
                        }).join('') : '') +
                    '</div>' +
                '</div>';
        }).join(''));
    });
});