JSFiddle - React, Tailwind, and code Playground

by kayadiker

HTML

<script src="http://jchavannes.com/include/scripts/3p/jquery.timer.js"></script>
<script src="http://jchavannes.com/include/scripts/timer-demo.js"></script>
           
<p><span class='countdown'>10</span> seconds remaining!</p>   
<div id="sayilar">
<div id="soru" class="ust"><span id="bir">20</span><span id="islem"> + </span><span id="iki">2</span> = <span id="sonuc">5</span></div>

    </div><div id="puan">0</div>


<table width="100%" class="rakamlar">
    <tr><td  width="33%" onclick="sayial(this)">1</td><td width="33%" onclick="sayial(this)">2</td><td width="33%" onclick="sayial(this)">3</td></tr>
    <tr><td onclick="sayial(this)">4</td><td onclick="sayial(this)">5</td><td onclick="sayial(this)">6</td></tr>
    <tr><td onclick="sayial(this)">7</td><td onclick="sayial(this)">8</td><td onclick="sayial(this)">9</td></tr>
    <tr><td onclick="sayial(this)">0</td><td onclick="temizle()">Clear</td><td onclick="sonucal()">Submit</td></tr>
</table>

CSS

.ust {
 color:red;   
}
.alt {
 color:green;  
}

.rakamlar td{
    text-align:center;
}

.rakamlar td:hover{
    color:red;
    background-color:black;
}

JavaScript

function fisherYates(myArray) {
    var i = myArray.length;
    if (i == 0) return false;
    while (--i) {
        var j = Math.floor(Math.random() * (i + 1));
        var tempi = myArray[i];
        var tempj = myArray[j];
        myArray[i] = tempj;
        myArray[j] = tempi;
    }
}

function sayial(bu) {
    $('#sonuc').html(parseInt($('#sonuc').html() + $(bu).html()));
}


function puanla() {
    $('#puan').html(parseInt($('#puan').html()) + 1);
}

function temizle() {
    $('#sonuc').html('');
}

function yenigetir() {
    
    temizle();
    count = count + 100;
    var islemislem = islemler[Math.floor(Math.random() * 4)];

    switch (islemislem) {
    case '+':
        birbir = Math.floor(Math.random() * 101);
        farkfark = (100 - birbir);
        ikiiki = Math.floor(Math.random() * farkfark);
        break;
    case '-':
        birbir = Math.floor(Math.random() * 101);
        ikiiki = Math.floor(Math.random() * (birbir + 1));
        break;
    case 'x':
        birbir = Math.floor(Math.random() * 49) + 1;
        farkfark = Math.floor(100 / birbir) + 1;
        ikiiki = Math.floor(Math.random() * farkfark);
        break;
    case '/':
        birbir = Math.floor(Math.random() * 49) + 1;
        farkfark = Math.floor(100 / birbir);
        ikiiki = Math.floor(Math.random() * farkfark) + 1;
        sonucsonuc = birbir * ikiiki;
        sonucarray = new Array(birbir, ikiiki);
        fisherYates(sonucarray);
        birbir = sonucsonuc;
        ikiiki = sonucarray[0];
        break;
    }
    $('<div>').fadeIn().attr('id', 'soru').addClass('alt').html('<span id="bir">' + birbir + '</span><span id="islem"> ' + islemislem + ' </span><span id="iki">' + ikiiki + '</span> = <span id="sonuc">?</span>').appendTo('div#sayilar');
    birbir = null;
    ikiiki = null;
    farkfark = null;
}

function sonucal() {
    var bir = parseInt($('#bir').html());
    var iki = parseInt($('#iki').html());
    var sonuc = parseInt($('#sonuc').html());
    var islem =...