JSFiddle - React, Tailwind, and code Playground

by Michele Marcucci

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.js"></script>
<div ng-app="myApp" ng-controller="gameController">
        <table style="width:400px">
            <tr>
                <td><div id = "00"></div></td>
                <td><div id = "01"></div></td>
                <td><div id = "02"></div></td>
                <td><div id = "03"></div></td>
                <td></td>
                <td rowspan = "5" id = "wordTable"></td>
            </tr>
            <tr>
                <td><div id = "10"></div></td>
                <td><div id = "11"></div></td>
                <td><div id = "12"></div></td>
                <td><div id = "13"></div></td>
            </tr>
            <tr>
                <td><div id = "20"></div></td>
                <td><div id = "21"></div></td>
                <td><div id = "22"></div></td>
                <td><div id = "23"></div></td>
            </tr>
            <tr>
                <td><div id = "30"></div></td>
                <td><div id = "31"></div></td>
                <td><div id = "32"></div></td>
                <td><div id = "33"></div></td>
            </tr>
            <tr>
                <td><button ng-click="startTimer()" ng-disabled="scoreStart">Start Game</button></td>
                <td><button ng-click="addScore()">Submit</button></td>
                <td><span> {{count + " : Seconden"}}</span></td>
                <td><span> {{"Score: " + score}}</span></td>
            </tr>
        </table>
    </div>

JavaScript

var app = angular.module('myApp', []);
app.controller('gameController', function($scope, $interval) {

$scope.count= 180;
$scope.score= 0;
$scope.scoreStart = false;
    
 $scope.addScore = function(){
    $scope.score++;
 };
 $scope.startTimer = function(){
    $scope.scoreStart = true;
    $interval(function () { $scope.count--; }, 1000);
 };
});