JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<body ng-app="hello-world">
    <div ng-controller="helloController as hi">
        
<h1 style="text-align: center" ng-style="{'color':hi.myColor}">Hello, {{hi.myName}}</h1>

    </div>
</body>

JavaScript

(function () {
    var app = angular.module('hello-world', []);

    app.controller('helloController', function ($scope, $interval) {
        // Create an array of names.
        var names = [
            "Jed",
            "Leo",
            "Josh",
            "Toby",
            "Sam",
            "CJ",
            "Donna",
            "Charlie",
            "Delores",
            "Abby",
            "Will"];

        // Set initial values for on-page elements
        var vm = this; // reference to view-model
        this.myName = names[0];
        this.nameIndex = 0;
        
        /**
         * Changes the name when called.
         */
        this.changeName = function () {
            vm.nameIndex = vm.nameIndex++ >= names.length - 1 ? 0: vm.nameIndex; 
            vm.myName = names[vm.nameIndex];
            console.log(vm.myName, vm.nameIndex);
        };

        $interval(this.changeName, 2000);
    });
})();