JSFiddle - React, Tailwind, and code Playground

by lionking0

HTML

<table id="tab">
    <tr>
        <td></td>
        <td class="bg">[a]</td>
        <td class="bg">[b]</td>
        <td class="bg">[c]</td>
        <td class="bg">[d]</td>
    </tr>
    <tr>
        <td class="bg">[A]</td>
        <td>
            <input type="checkbox" name="Rn[]" value="" />
        </td>
        <td>
            <input type="checkbox" name="Rn[]" value="" />
        </td>
        <td>
            <input type="checkbox" name="Rn[]" value="" />
        </td>
        <td>
            <input type="checkbox" name="Rn[]" value="" />
        </td>
    </tr>
    <tr>
        <td class="bg">[B]</td>
        <td>
            <input type="checkbox" name="Rn[]" value="" />
        </td>
        <td>
            <input type="checkbox" name="Rn[]" value="" />
        </td>
        <td>
            <input type="checkbox" name="Rn[]" value="" />
        </td>
        <td>
            <input type="checkbox" name="Rn[]" value="" />
        </td>
    </tr>
    <tr>
        <td class="bg">[C]</td>
        <td>
            <input type="checkbox" name="Rn[]" value="" />
        </td>
        <td>
            <input type="checkbox" name="Rn[]" value="" />
        </td>
        <td>
            <input type="checkbox" name="Rn[]" value="" />
        </td>
        <td>
            <input type="checkbox" name="Rn[]" value="" />
        </td>
    </tr>
    <tr>
        <td class="bg">[D]</td>
        <td>
            <input type="checkbox" name="Rn[]" value="" />
        </td>
        <td>
            <input type="checkbox" name="Rn[]" value="" />
        </td>
        <td>
            <input type="checkbox" name="Rn[]" value="" />
        </td>
        <td>
            <input type="checkbox" name="Rn[]" value="" />
        </td>
    </tr>
</table>
<br/>
<label class="bakg">Player Score</label>&nbsp;
<input type="text" name="playerScore" id="playerScore" size="40" />
<br/>
<label class="bakg">Message:</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text"...

CSS

body {
    background-color:#7F7E7E;
    color: #fff;
}
table#tab {
    width:200px;
}
table#tab td {
    border:1px solid #fff;
    text-align:center;
}
table#tab .bg {
    background-color:#fff000;
    color: #F00;
}
.bakg {
    background-color:#ff0000;
    color: #fff;
    padding:1px;
    font-weight:bold;
}

JavaScript

var elements = document.getElementsByName('Rn[]');
var elementLength = elements.length;
var attempt = 3;
var playerScoreElem = document.getElementById('playerScore');
var messageElem = document.getElementById('message');

var count = 0;
var sum = 0;

// When the page loads
window.onload = function () {
    for (var i = 0; i < elementLength; i++) {
        elements[i].value = Math.floor(Math.random() * (15 - (-10) + 1) + (-10));
        elements[i].onclick = function () {
            calculate(this);
        };
    };
};

// When you click a reset button
document.getElementById('reset').onclick = function () {
    count = sum = 0;
    for (var i = 0; i < elementLength; i++) {
        elements[i].value = Math.floor(Math.random() * (15 - (-10) + 1) + (-10));
        elements[i].disabled = false;
        elements[i].checked = false;
        playerScoreElem.value = null;
        messageElem.value = null;
    }
};

// When you mark a checkbox
function calculate(elem) {
    if (elem.checked) {
        sum += parseInt(elem.value);
        elem.disabled = true;
        if (count < attempt) {
            count++;
            if (count == attempt) {
                playerScoreElem.value = sum;
                for (var i = 0; i < elementLength; i++) {
                    elements[i].disabled = true;
                }
                if (sum >= 15) {
                    messageElem.value = "Congratulations you are an export.";
                } else {
                    messageElem.value = "You are still a beginner!.";
                }
            }
        } else {
            elem.checked = false;
        }
    }
}