CodePen

HTML

            
              <!-- listview template (hide in unknown script tag type) -->
<script type="text/html" id="primaryPageContentTmpl">
    <ul data-role="listview" class="movies">
        <!-- mustache section -->
        {{#.}}
            <!-- template for each item in given json data -->
            <li><a href="#secondaryPage" class="movie" data-index={{index}}>
                <!-- movie thumbnail image -->
                <img src={{posters.thumbnail}} />
                <!--title of the movie -->
                <h3>{{title}}</h3>
                <!-- Rotten Tomatoes critics rating, numeric w/ corresp icon -->
                <p>
                    TOMATOMETER<sup>&reg;</sup> {{ratings.critics_score}}
                    <i class="icon tiny {{&ratings.critics_rating}}"></i>
                </p>
            </a></li>
        {{/.}}
    </ul>
</script>
            
          
!

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................