JSFiddle - React, Tailwind, and code Playground

by yinyann

HTML

<div><span style="width: 270px; display: inline-block;">Best: <span id="best"></span></span><input type="text" id="name" /></div>
<div class="score">score: <span id="score"></span></div>
<div class="question" id="question">
    <span class="chiffre1"></span>
X
<span class="chiffre2"></span><input type="text" id="result" />
</div>
<div id="history">
    
</div>

CSS

div { font-size: 24px; font-weight: bold; }
div.score { color: #555555; }
.red { color: red; }
.green { color: green;}

JavaScript

var newQuestion = function(){
    dealScore();
    $(".chiffre1:first").text(number1());
    $(".chiffre2:first").text(number2());
    $("#result").val("").focus();
}

var sameQuestion = function(){
    dealScore();
    $("#result").val("").focus();
}

var knownNumbers = [3,5]
var score = 0;
function number2(){
    var nb = Math.floor(Math.random() * 10) + 1;
    return nb;
}
    
function number1(){
    var nb = Math.floor(Math.random() * knownNumbers.length);
    return knownNumbers[nb];
}

function dealScore(){
    var bestScoreKey = 'bestScore' + $("#name").val();
    var bestScore = localStorage.getItem(bestScoreKey);
    if(score > bestScore*1)
    {
        localStorage.setItem(bestScoreKey, score);
    }
    $("#best").text(localStorage.getItem(bestScoreKey));
    $("#score").text(score);
}


function response(){
    var myResult = $("#question").clone();
    myResult.find("input").remove();
    var myResponse = $("<span></span>").text("  =  " + $("#result").val());
    
    var success = ($("#result").val() == $(".chiffre1:first").text() * $(".chiffre2:first").text());
    if(success)
    {
        myResponse.addClass("green");
        score = score +1;
        myResult.append(myResponse);
    $("#history").prepend(myResult);
    newQuestion();
    }
    else
    {
        myResponse.addClass("red");
        score  = score - 2;
        myResult.append(myResponse);
    $("#history").prepend(myResult);
    sameQuestion();
    }
    
}

newQuestion();
$("#result").on("change",function(){response();});
$("#name").on("change",function(){$("#history").html(""); newQuestion();});