JSFiddle - React, Tailwind, and code Playground

by DaveAlger

HTML

<center>
<div id="n">0</div>
    <div id="c">CLICK ON THE <span id="btnLabel">BUTTON</span></div>
<div id="b"><button id="btn">BUTTON</button></div>
<div id="a"><input id="btnName" type="text" /></div>
</center>

CSS

#n,
#c { font-family: sans-serif; font-size: 3em; color: #aaaaaa; }
#btn { padding: 10px 20px; margin: 30px; }

JavaScript

var bname = "BUTTON";
var bcount = 0;

function btnSetColor (fg, bg) {
    $("#btn").css("color", fg);
    $("#btn").css("background", bg);
}

$(document).ready(function () {
    $("#n").fadeTo(0,0.0);
    $("#btnName").hide();
    btnSetColor("#ffffff", "#666666");
    
    $("#btn").click(function () {
        bcount++;
        
        if (bcount === 1) {
            $("#n").fadeTo(0,1.0);
        }
        
        if (bcount >= 2) {
            $("#c").text("CLICKS ON THE " + bname);
        }
        
        if (bcount === 10) {
            btnSetColor("#ffffff", "#991111");
            alert("Nice Job!\n\nThe button really likes being clicked. You should give him a name.");
        
            
            
            $("#btnName").show();
            $("#btnName").change( function () {
                bname = $("#btnName").val();
                $("#btnName").hide();
                $("#btnLabel").text(bname);
                $("#btn").text(bname);
                
            });
        }
        
        if (bcount === 100) {
                btnSetColor("#ffffff", "#994411");
            }
            
            if (bcount === 200) {
                btnSetColor("#ffffff", "#999911");
            }
            
            if (bcount === 300) {
                btnSetColor("#ffffff", "#119911");
            }
            
            if (bcount === 400) {
                btnSetColor("#ffffff", "#111199");
            }
        
        $("#n").text(bcount);
    });
});