JSFiddle - React, Tailwind, and code Playground

by Dennis Betman

HTML

<h2 class="level">Level: <span class="levelscore">1</span></h2>
<h2 class="points">0</h2>

<div class="talents">
    <table>
        <tr class="first">
            <td>Level 2:</td>
            <td>Mistic shot</td>
            <td>Debiel shot</td>
            <td>Homo shot</td>
        </tr>
        <tr class="second">
            <td>Level 3:</td>
            <td>Mistic shot</td>
            <td>Debiel shot</td>
            <td>Homo shot</td>
        </tr>
        <tr class="third">
            <td>Level 4:</td>
            <td>Mistic shot</td>
            <td>Debiel shot</td>
            <td>Homo shot</td>
        </tr>
    </table>
</div>

CSS

* {
    margin:0px;
    padding:0px;
}

body{
    background:#f3f3f3;
}

h2{
    width:100%;
    text-align:center;
    font-size:25px;
}

.talents {
    position: absolute;
    top:0;
    left:-50px;
    display:none;
    opacity:0;
}
.active{
    background:green;
}
table tr{
    border-right:10px solid orange;
    margin-bottom:0px;
    display:block;
    background:grey;
}
table tr td {
    padding:20px;
    width:50px;
    text-align:center;
}

td.kan{
    background:lightblue;
    cursor:pointer;
}
td.kan:hover{
    background:orange;
}

JavaScript

var points = 0;
$(document).click(function(){
    points = points + 1;
    $(".points").html(points);    
    
    if(points == 10){
        $(".levelscore").html("2");
        var getLevel = $(".levelscore").html();
        $(".first").find("td").addClass("kan");
    }
    if(points == 20){
        $(".levelscore").html("3");
        var getLevel = $(".levelscore").html();
        $(".second").find("td").addClass("kan");
    }
    if(points == 30){
        $(".levelscore").html("4");
        var getLevel = $(".levelscore").html();
        $(".third").find("td").addClass("kan");
    }
});

$("tr").hover(function(){
    $(this).css({"border-right": "10px solid blue"});
}, function(){
    $(this).css({"border-right": ""});
});

var toShow = false;
$(document).keydown(function(e) {
    if(e.keyCode == 78){
        if(!toShow){
            $('.talents').css({"display": "block"}).animate({opacity:1, left: "0px"}, 500);
        }
        if(toShow){
            $('.talents').animate({opacity:0, left: "-50px"}, 500);
            setTimeout(function(){
                $(".talents").css("display","none")
            }, 500);
        }
        toShow = !toShow;
    }
});