JSFiddle - React, Tailwind, and code Playground

Random Two Picture

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app ng-controller="ApplicationController" class="container-fluid">
  {{andrew}}
  <div class="animated fifty bg1 row" ng-class="classname">{{randompic}}</div>
  <div class="animated fifty bg2 row" ng-class="classname1">{{randompic1}}</div>

</div>

CSS

.ad1 {
  height: 45vh;
  background:
}

.fifty {
  height: 50vh
}

.bg1 {
  padding: 0 80px;
  background: rgba(239, 1, 124, 1);
  background: -moz-linear-gradient(-45deg, rgba(239, 1, 124, 1) 0%, rgba(255, 186, 223, 1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(239, 1, 124, 1)), color-stop(100%, rgba(255, 186, 223, 1)));
  background: -webkit-linear-gradient(-45deg, rgba(239, 1, 124, 1) 0%, rgba(255, 186, 223, 1) 100%);
  background: -o-linear-gradient(-45deg, rgba(239, 1, 124, 1) 0%, rgba(255, 186, 223, 1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(239, 1, 124, 1) 0%, rgba(255, 186, 223, 1) 100%);
  background: linear-gradient(135deg, rgba(239, 1, 124, 1) 0%, rgba(255, 186, 223, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ef017c', endColorstr='#ffbadf', GradientType=1);
}

.bg2 {
  padding: 0 80px;
  background: rgba(35, 62, 130, 1);
  background: -moz-linear-gradient(-45deg, rgba(35, 62, 130, 1) 0%, rgba(255, 186, 223, 1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(35, 62, 130, 1)), color-stop(100%, rgba(255, 186, 223, 1)));
  background: -webkit-linear-gradient(-45deg, rgba(35, 62, 130, 1) 0%, rgba(255, 186, 223, 1) 100%);
  background: -o-linear-gradient(-45deg, rgba(35, 62, 130, 1) 0%, rgba(255, 186, 223, 1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(35, 62, 130, 1) 0%, rgba(255, 186, 223, 1) 100%);
  background: linear-gradient(135deg, rgba(35, 62, 130, 1) 0%, rgba(255, 186, 223, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#233e82', endColorstr='#ffbadf', GradientType=1);
}

JavaScript

function ApplicationController($scope, $interval, $filter) {
	
  $scope.genPics2 = function() {
 $scope.pics =  ["1.jpg", "2.jpg", "3.jpg", "4.jpg"]
   
    var newNr = Math.floor(Math.random() * ($scope.pics.length));
    if ($scope.pics.indexOf(newNr) == -1) {
      $scope.pics.push(newNr);
    }
    return $scope.pics[newNr];
  }
  $scope.number = 100;
  $scope.classname = 'zoomInDown'; // init
  $scope.testTimer = function() {
    $interval(function() {

      var match = ($scope.randompic == $scope.randompic1);
      if (match) console.log(" /" + match);
      $scope.andrew = match ? ("DAMN IT") : "OK";

      if ($scope.number === 50) {
        $scope.classname1 = $scope.classname1 == 'zoomInLeft' ? 'zoomInRight' : 'zoomInLeft';
        $scope.classname = $scope.classname == 'zoomInRight' ? 'zoomInLeft' : 'zoomInRight';
        // $scope.randompic = $scope.pics[Math.floor(Math.random() * $scope.pics.length)];
        $scope.randompic = $scope.genPics2();
        $scope.pics = $scope.pics.filter(function(item) {
          console.log(item + "<--")
          return item != $scope.randompic;
        });
        console.log($scope.pics)
        $scope.randompic1 = $scope.genPics2();

      } else if ($scope.number === 0) {
        $scope.number = 100;
        $scope.classname = $scope.classname == 'zoomInLeft' ? 'zoomInRight' : 'zoomInLeft';
        $scope.classname1 = $scope.classname1 == 'zoomInRight' ? 'zoomInLeft' : 'zoomInRight';
        $scope.randompic = $scope.genPics2();
        $scope.pics = $scope.pics.filter(function(item) {
          return item != $scope.randompic;
        });
        $scope.randompic1 = $scope.genPics2();

      }

      $scope.number--;
    }, 100);
  }; // end timer 
  $scope.testTimer();




}