JSFiddle - React, Tailwind, and code Playground

by Adam Doherty

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.min.css">
<body ng-app="Zeus" ng-controller="GameController as g">
   <div class="row">
       <div class="columns small-12">
     <!--<h1>{{title}}</h1>-->
       </div>
    </div>
    <div class="row" id="addPerson">
        <form ng-submit="addPerson()">
            <div class="columns small-8">
                <input placeholder="Add person..." type="text" ng-model="playerText" required></input>
            </div>
            <div class="columns small-4">
                <button class="expand" type="submit">Add Player</button>
            </div>
        </form>
    </div>
    <div class="row" id="player-list">
            <div class="small-4 columns end" ng-repeat="p in players">
                <input type="checkbox" class="hidden" name="cb" id="cb" ng-model="p.remove">
                <label for="cb">{{p.name}}</label>
            </div>
    </div>
    <button ng-click="removePlayers()">Remove selected players</button>
</body>

CSS

.hidden {
    position:absolute;
    visibility:hidden;
    opacity:0;
}
input[type=checkbox] + label {
    color: #ccc;
    font-style: italic;
}
input[type=checkbox]:checked + label {
    color: #f00;
    font-style: normal;
}
li {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid black;
    margin: 0 2px;
}
fieldset {
    font-size: 1em;
    padding: 0.5em;
    border-radius: 1em;
    font-family: sans-serif;
}

label, input, button {
    font-size: inherit;
    padding: 0.2em;
    /*margin: 0.1em 0.2em;*/
    /* the following ensures they're all using the same box-model for rendering */
    -moz-box-sizing: content-box; /* or `border-box` */
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height:30px;
    border-radius: 3px;
}

JavaScript

// Code goes here

angular.module('Zeus', [])
    .controller('GameController', ['$scope', function ($scope) {
    $scope.title = "My App";
    $scope.players = [];

    $scope.addPerson = function () {
        $scope.players.push({
            name: $scope.playerText,
            remove: false
        });
        $scope.playerText = '';
        //$scope.shuffleArray($scope.players);
    };

    $scope.removePlayers = function () {
        var oldArray = $scope.players;
        $scope.players = [];
        angular.forEach(oldArray, function (p) {
            if (!p.remove) $scope.players.push(p);
        });
        //$scope.shuffleArray($scope.players);
    };

    $scope.shuffleArray = function (array) {
        var m = array.length,
            t, i;

        // While there remain elements to shuffle
        while (m) {
            // Pick a remaining element…
            i = Math.floor(Math.random() * m--);

            // And swap it with the current element.
            t = array[m];
            array[m] = array[i];
            array[i] = t;
        }

        return array;
    };

}]);