JSFiddle - React, Tailwind, and code Playground

by Rob Rothe

HTML

<div ng-app="myApp" ng-controller="AppCtrl">
  <div class="card" ng-repeat="movie in movies">

    <h1>{{ movie.Name}}</h1>
    <img src="{{movie.Poster}}">
  </div>

</div>

CSS

body {
  font-family: Helvetica;
}
.card {
  width:200px;
  height:200px;
  margin:20px;
  border:1px solid #ccc;
  float:left;
  text-align:center;
  padding:10px;
}

.card:hover {
  border:1px solid #333;
  cursor:pointer;
  background:#ddd;
}

.card h1 {
  margin:0;
  font-size:20px;
  font-weight:normal;
  margin-bottom:20px;
}

.card img {
  height:160px
}

JavaScript

angular
  .module('myApp', [])
  .controller('AppCtrl', AppCtrl);

function AppCtrl($http, $scope) {
  $http.get('https://raw.githubusercontent.com/lymbzero/movies/master/movieList.json').then(function(response) {
    $scope.movies = response.data.MovieList.Movies;
  });
}