JSFiddle - React, Tailwind, and code Playground

by Steve de Peijper

HTML

<div ng-app="myApp" ng-controller="personCtrl">


    <br>  <div class="my_text">
     {{deel1}} x {{deel2}} = {{getal}}
</div>
    Tijd per som: {{tijdpersom}} <br>
    <table border="1" cellpadding="5">
        <tr>
            <td><img ng-click="fn(7)" src="http://www.clker.com/cliparts/b/3/4/3/1345584783624561454Animal%20Number%20Seven.svg"  width="55"></td>
            <td><img ng-click="fn(8)" src="http://www.clker.com/cliparts/a/f/8/4/13455842341153953340Animal%20Number%20Eight.svg"  width="55"></td>
            <td><img ng-click="fn(9)" src="http://www.clker.com/cliparts/f/c/e/e/1345584628836254527Animal%20Number%20Nine.svg"  width="55"></td>
        </tr>
        <tr>
            <td><img ng-click="fn(4)" src="http://www.clker.com/cliparts/1/9/5/d/13455846051729363694Animal%20Number%20Four.svg"  width="55"></td>
            <td><img ng-click="fn(5)" src="http://www.clker.com/cliparts/b/1/9/d/13455844971411421551Animal%20Number%20Five.svg"  width="55"></td>
            <td><img ng-click="fn(6)" src="http://www.clker.com/cliparts/8/d/d/0/13455848511522532135Animal%20Number%20Six.svg"  width="55"></td>
        </tr>
        <tr>
            <td><img ng-click="fn(1)" src="http://www.clker.com/cliparts/W/h/N/m/o/e/number-one-gray.svg"  width="55"></td>
            <td><img ng-click="fn(2)"...

CSS

.my_text
        {
            font-family:    Arial, Helvetica, sans-serif;
            font-size:      40px;
            font-weight:    bold;
        }

JavaScript

var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope,$timeout) {
    $scope.getal = "";
    $scope.aantalgoed = "";
    $scope.tijdpersom = 0;

    $scope.gn = function() {
        $scope.deel1 = Math.floor((Math.random() * 10) + 1);
        $scope.deel2 = Math.floor((Math.random() * 10) + 1);
    }

    $scope.resetval = function () {
        $scope.getal = "";
    }

    $scope.fn = function(p) {
            $scope.getal = "" + $scope.getal + p;
          //  console.log("" + $scope.getal + p);
            if ($scope.deel1 * $scope.deel2 == $scope.getal) {
                console.log("goed");
                $scope.reset();
                $scope.aantalgoed++;
                $scope.tijdpersom = ($scope.counter / $scope.aantalgoed).toFixed(2);
                $scope.getal = "";

            }
   }

    $scope.counter = 0;
    $scope.onTimeout = function(){
        $scope.counter++;
        mytimeout = $timeout($scope.onTimeout,1000);
    }
    var mytimeout = $timeout($scope.onTimeout,1000);

    $scope.reset = function(){
        $scope.gn();
    }

    $scope.start = function(){
        $scope.reset();
        $scope.counter = 0;
        $scope.aantalgoed = 0;

    }


});