JSFiddle - React, Tailwind, and code Playground

by chandings

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
    {{hello}}
    <div ng-repeat="valueY in formatterArray">
        <span>
            <span ng-repeat="valueX in formatterArray">
                <input 
                    style="width:15px;text-align:center; " 
                    ng-change="gridUpdated(valueY*9+valueX)"
                    ng-disabled="gameData[valueY*9+valueX] !== 0"
                    ng-model="gameModel[valueY*9+valueX]"
                    ng-class="{true:'border-red', false:'border-blue'}[(valueY/3 < 1||valueY/3 >= 2)&&(valueX/3 < 1||valueX/3 >= 2)||(valueX>=3 && valueX<6 && valueY>=3 && valueY<6)]">
                </input>
            </span>            
        </span>
    </div>   
    <button ng-show="filledIn" ng-click="checkGame()">Check Game</button>
</div>

CSS

.border-red{
    border:1px solid red;
}
.border-blue{
    border:1px solid blue;
}

JavaScript

/*{
values:    [1, 0, 0, 0, 2, 0, 7, 9, 0,
            0, 9, 5, 7, 4, 3, 2, 8, 1,
            8, 7, 2, 1, 5, 9, 3, 4, 6,
            4, 0, 9, 5, 3, 6, 1, 2, 0,
            7, 5, 6, 8, 1, 2, 9, 3, 4,
            3, 2, 1, 9, 7, 4, 6, 5, 8,
            2, 6, 7, 4, 9, 5, 8, 1, 3,
            5, 1, 3, 2, 8, 7, 4, 6, 9,
            0, 4, 0, 0, 6, 1, 5, 7, 2];
            
   solved = [1, 3, 4, 6, 2, 8, 7, 9, 5, 
             6, 9, 5, 7, 4, 3, 2, 8, 1, 
             8, 7, 2, 1, 5, 9, 3, 4, 6, 
             4, 8, 9, 5, 3, 6, 1, 2, 7, 
             7, 5, 6, 8, 1, 2, 9, 3, 4, 
             3, 2, 1, 9, 7, 4, 6, 5, 8, 
             2, 6, 7, 4, 9, 5, 8, 1, 3, 
             5, 1, 3, 2, 8, 7, 4, 6, 9, 
             9, 4, 8, 3, 6, 1, 5, 7, 2]
             
             [1, 5, 4, 8, 7, 3, 2, 9, 6,
              3, 8, 6, 5, 9, 2, 7, 1, 4,
              7, 2, 9, 6, 4, 1, 8, 3, 5,
              8, 6, 3, 7, 2, 5, 1, 4, 9,
              9, 7, 5, 3, 1, 4, 6, 2, 8,
              4, 1, 2, 9, 6, 8, 3, 5, 7,
              6, 3, 1, 4, 5, 7, 9, 8, 2,
              5, 9, 8, 2, 3, 6, 4, 7, 1,
              2, 4, 7, 1, 8, 9, 5, 6, 3]
}*/

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

myApp.factory("utility", function(){
    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    
    function getUniqueRandomInts(min, max, count){
        var retArr = [];
        for(var index = 0; index < count; index ){
            retArr.push(getRandomIntWithException(min, max, retArr));
        }
        return retArr;
    }
    
    function getRandomIntWithException(min, max, not) {
        var randomInt;
        if(max - min > not.length){
            return null;
        }
        if(!not){
            return getRandomInt(min, max);        
        } else{
            do{
                randomInt = getRandomInt(min, max);
            }while(not.indexOf(randomInt) === -1)
            return randomInt;
        }
    }
    
    function getMin(num1, num2){
...