JSFiddle - React, Tailwind, and code Playground

by ucuncubayram

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div ng-app="app">
        <vehicle>
            <bus></bus><br/><br/>
            <car></car><br/><br/>
            Daily Total Passengers: {{totalPassenger()}}
        </vehicle>    
</div>

JavaScript

angular.module("app", [])
	.directive("vehicle", function(){
          return {
              restrict: "E",
              controller: function($scope){
                  var self = this;
                
                  self.totalPassenger = 0;
                  
                  self.loadPassenger = function(count){
                      self.totalPassenger += count;
                  }                
               
                  $scope.totalPassenger =  function(){
                  	  return self.totalPassenger;
                  }
              }
          } 
  	})
	.directive("bus", function(){
		return {
        	restrict: "E",
            require: "^vehicle",
            scope: {},
            link: function(scope, element, ettributes, vehicleController) {
                scope.dailyPassengersCount = 0;
                
                setInterval(function(){ 
                    scope.$apply(function(){
                        var loadedPassengers = Math.floor((Math.random() * 15) + 1)
                        scope.dailyPassengersCount += loadedPassengers;
                        vehicleController.loadPassenger(loadedPassengers);
                    })
                }, 2000);
            },
            template: '<span>Bus Total Passengers: {{dailyPassengersCount}}</span>'
        }
	})
	.directive("car", function(){
		return {
        	restrict: "E",
            require: "^vehicle",
            link: function(scope, element, ettributes, vehicleController) {
                scope.dailyPassengersCount = 0;
                
                setInterval(function(){ 
                    scope.$apply(function(){
                        var loadedPassengers = Math.floor((Math.random() * 4) + 1);
                        scope.dailyPassengersCount += loadedPassengers;
                        vehicleController.loadPassenger(loadedPassengers);
                    })
                }, 1500);
            },
            template: '<span>Car Total...