JSFiddle - React, Tailwind, and code Playground

by Dennis Betman

HTML

<div class="exp"></div>
<div class="exp_bar"></div>

CSS

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

.exp{
    width:100%;
    float:left;
}

.exp_bar{
    background:orange;
    height:15px;
    float:left;
}

button{
    float:left;
    width:100%;
}

JavaScript

var currentScore = 598;
var level = 2;

if(level == 0){
    var totalScore   = 100;
}
else if(level == 1){
    var totalScore   = 500;
}
else if(level == 2){
    var totalScore   = 1000;
}

var expBar = (currentScore / totalScore) * 100;

$(".exp").text("EXP " + currentScore + " / " + totalScore);
$(".exp_bar").css("width", expBar+"%");

if(currentScore == totalScore){
    var level = level + 1;
    alert("You hit level " + level);
}