JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    
<body>
<div style="width:100%; height:260px; display:inline-block; padding-top:200px; position:relative">

    <div style="margin:auto; display:block;width:520px;height:260px">
        
    <div class="hand" id="lvl1_leftcircle"></div>

    <div class="hand" id="lvl1_rightcircle"></div>
    </div>
</div>
    
<div class="trackers">

    <div id="correct1" class="off" style="width:50px; height:50px; float:left; margin-left:0px;">
    </div>

    <div id="correct2" class="off" style="width:50px; height:50px; float:left; margin-left:50px;"></div>

    <div id="correct3" class="off" style="width:50px; height:50px; float:left; margin-left:50px;"></div>

</div>
    
<div id="win">
        <h1>YAY!</h1>
        <h2>Level 1 Complete!</h2>
        <a style="width:200px; margin:auto" href="levelselection.html">
            
        <div id="backtolvlselect">
            <p id="back">Back to Level Select</p>
        </div>
            
        </a>
    
</div>
    
    <script src="js/jquery.mobile-1.4.5.js"></script>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/level1.js"></script>
    
</body>

CSS

h1{
    text-align: center;
    font-family: 'Roboto', sans-serif;
}

h2{
    text-align: center;
    font-family: 'Roboto:700', sans-serif;
}

p {
    font-family: 'Roboto', sans-serif; 
}

a {
    text-decoration: none; 
    display: block;
    color:inherit;
}

#lvl1_leftcircle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    margin: 30px;
    display: block;
}

#lvl1_leftcircle:active {
    transform:scale(.95,.95);
    transition-timing-function: ease-in-out;
}

#lvl1_rightcircle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    margin: 30px;
    display: block;
}

#lvl1_rightcircle:active {
    transform:scale(.95,.95);
    transition-timing-function: ease-in-out;
}

.header {
    height: 50px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 20px;
    z-index: 1;
}

.trackers {
    height:54px; 
    width:262px; 
    margin:auto; 
    padding-top:100px; 
    display:block; 
    position:relative;
}

#win {
    width:350px;
    height:200px;
    margin:auto;
    position:absolute;
    top:25%;
    left:10%;
    right:10%;
    z-index: 5;
    border-radius: 20px;
    border:1px solid gray;
    background: rgba(0,0,0,.5);
    visibility: hidden;
    color: white;
}

#backtolvlselect {
    width:200px;
    height:50px;
    border-radius:200px;
    border:1px solid white;
    margin:auto;
}

#back {
    margin:auto; 
    display:block; 
    text-align:center; 
    color:white;
    padding-top:15px;
}

.off {
    border: 2px solid lightgray;
    background: white;
    border-radius: 50%;
}
.on {
    border: 2px solid goldenrod;
    background: yellow;
    transition: background 1s;
    transition: border 1s;
    border-radius: 50%;
}
.hand {
  cursor: pointer;
}

JavaScript

var green = "#20b789",
    darkblue = "#0076B6",
    lightblue = "#74CEED",
    red = "#D8263D",
    pink = "#F177AE",
    colors = [green, darkblue, lightblue, red, pink];

//var green = "rgb(32,183,137)";
//var darkblue = "rgb(0,118,182)";
//var lightblue = "rgb(116,206,237)";
//var red = "rgb(216,38,61)";
//var pink = "rgb(241,119,174)";

$(document).ready(function () {
    
    $('#lvl1_leftcircle').css('background', colors[Math.floor(Math.random() * colors.length)]);
    
    $('#lvl1_rightcircle').css('background', colors[Math.floor(Math.random() * colors.length)]);
});

function win() {
    document.getElementById("win").style.visibility = "visible";
}


function shame() {
    
    var correct1 = document.getElementById("correct1"),
        correct2 = document.getElementById("correct2"),
        correct3 = document.getElementById("correct3");

    correct1.className = "off";
    correct2.className = "off";
    correct3.className = "off";
}

function colorprogress() {
    
    var correct1 = document.getElementById("correct1"),
        correct2 = document.getElementById("correct2"),
        correct3 = document.getElementById("correct3");

    if (correct1.className === "off") {
        correct1.className = "on";
    } else if (correct2.className === "off") {
        correct2.className = "on";
    } else {
        correct3.className = "on";
        win();
    }
}

function checkl() {

    var Llc = document.getElementById("lvl1_leftcircle"),
        Lrc = document.getElementById("lvl1_rightcircle");
    
    if (Llc.style.background === lightblue && Lrc.style.background === darkblue) {
        colorprogress();
    } else if (Llc.style.background === red && Lrc.style.background === green) {
        colorprogress();
    } else if (Llc.style.background === pink && Lrc.style.background === pink) {
        colorprogress();
    } else if (Llc.style.background === red && Lrc.style.background === lightblue) {
        colorprogress();
    } else if...