JSFiddle - React, Tailwind, and code Playground

by Dennis Betman

HTML

<div ng-app="Blizzard" ng-controller="BlizzController">
  <div class="som">
    <img src="http://us.media.blizzard.com/wow/icons/56/{{resultBlizz.icon}}.jpg" style="float:left;"/>
    <h1>
      {{resultBlizz.name}}
    </h1>    
  </div>
  <p ng-repeat="country in resultBlizz.bonusStats | orderBy: 'stat'">
    {{country.amount}} <span ng-if="country.stat === 3">Agility: </span><span ng-if="country.stat === 7">Stamina: </span><span ng-if="country.stat === 36">Haste: </span><span ng-if="country.stat === 32">Critical Strike: </span><span ng-if="country.stat === 49">Mastery: </span>
  </p>
  Damage: {{resultBlizz.weaponInfo.damage.min}} - {{resultBlizz.weaponInfo.damage.max}}
  <div class="prev"><img src="http://us.media.blizzard.com/wow/renders/items/item{{resultBlizz.id}}.jpg"/></div>
</div>

CSS

@keyframes rotate{
  0%{
    transform: translateX(0px);
  }
  4%{
    transform: translateX(-280px);
  }
  8%{
    transform: translateX(-560px);
  }
  12%{
    transform: translateX(-840px);
  }
  16%{
    transform: translateX(-1400px);
  }
  20%{
    transform: translateX(-1400px);
  }
  24%{
    transform: translateX(-1680px);
  }
  28%{
    transform: translateX(-1960px);
  }
  32%{
    transform: translateX(-2240px);
  }
  36%{
    transform: translateX(-2520px);
  }
  40%{
    transform: translateX(-2800px);
  }
  44%{
    transform: translateX(-3080px);
  }
  48%{
    transform: translateX(-3360px);
  }
  52%{
    transform: translateX(-3640px);
  }
  56%{
    transform: translateX(-3920px);
  }
  60%{
    transform: translateX(-4200px);
  }
  64%{
    transform: translateX(-4480px);
  }
  68%{
    transform: translateX(-4760px);
  }
  72%{
    transform: translateX(-5040px);
  }
  76%{
    transform: translateX(-5320px);
  }
  80%{
    transform: translateX(-5600px);
  }
  84%{
    transform: translateX(-5880px);
  }
  88%{
    transform: translateX(-6160px);
  }
  92%{
    transform: translateX(-6440px);
  }
  96%{
    transform: translateX(-6440px);
  }
  100%{
    transform: translateX(-6440px);
  }
}
.som{
  display:flex;
  align-items:center;
}
.prev{
  width:280px;
  height:280px;
  overflow:hidden;
}
.prev img{
  animation: rotate 1.5s infinite;
  animation-timing-function:steps(1);
}

JavaScript

var app = angular.module('Blizzard', []);

app.controller('BlizzController', function($scope, $http) {
		
    var itemID = 124368;

    $http.get("https://eu.api.battle.net/wow/item/"+itemID+"?locale=en_GB&apikey=zwqbx7wzhdh7zbajttu2nxttrhzrs6fm")
    .then(function(response) {
        $scope.resultBlizz = response.data;
    });
});