JSFiddle - React, Tailwind, and code Playground

by Zonedark

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<div ng-controller="MyCtrl">

  <button ng-click="AddNewPlot('Stone')">
    Stone++
  </button>
  <button ng-click="AddNewPlot('Wood')">
    Wood++
  </button>
  <div class="Plot" ng-repeat="plot in Plots">
    {{plot}}
  </div>
</div>

CSS

.Plot {
  border: solid 1px black;
  height: 100px;
  width: 100px;
  margin-left: 20px;
  margin-top: 20px;
}

.Plot:hover{
  background-color:lightgreen;
}

JavaScript

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

myApp.controller('MyCtrl', ['$scope', '$interval', function($scope, $interval) {
  $scope.name = "Angular";

  $scope.Money = 50;
  $scope.PlotPrice = 50;
  $scope.Income = 0;
  $scope.Plots = new Array();

  $scope.AddNewPlot = function(value) {
    $scope.Plots.push(value);
  };

  stop = $interval(function() {
    $scope.Money = $scope.Money + $scope.Income;
  }, 1000);
}]);