JSFiddle - React, Tailwind, and code Playground

by abellay

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Master Mind</title>

    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
    
    <div class="container">
        <div class="panel landing-page" id="landing-page">
            <div class="header"><h1>Master Mind</h1></div>
            <div class="play-button" id="play">
                <button><h2>Play</h2></button>
            </div>
            <div class="instruction"><p>Click the buttons in the the correct order. Every round the game gets harder and you have to remember more and more!</p></div>
        </div>

        <div class="game" id="game">
            <div class="score-text"><p>Your score:</p></div>
            <div class="score"><p>00</p></div>
            <div class="squares">
            <div class="square red" id="red" ></div>
            <div class="square yellow" id="yellow" ></div>
            <div class="square blue" id="blue" ></div>
            <div class="square green" id="green" ></div>
        </div>

        </div>


    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="script.js"></script>
    
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

h1, h2, h3, h4, h5, h6, a, p {
    color: #E8E8E8;
}

body {
    margin: 0;
    padding: 0;
}

.container {
    
}

.panel {
    
    background-color: #222222;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    text-align: center;
}

.landing-page {
    Z-index: 2;
    display: flex;
}

.header {
margin-bottom: 10%;
font-size: 54px;
}

.landing-page button {
    background-color: transparent;
    border-style: solid;
    border-width: 3px;
    border-color: #FF0074;
    cursor: pointer;
    margin: 20px;
}
.landing-page h2 {
    padding: 5px;
    margin: 0px 40px 0px 40px;
}

.instruction {
    padding: 10px;
}

.landing-page p {

}

#game {
    z-index: 1;
}

.game {
    display: none;
    
    background-color: #222222;
    flex-direction: row;

    justify-content: center;
    width: 100vw;
    height: 100vh;
}

.square {
    width: 100px;
    height: 100px;
    margin: 10px 10px 10px 10px;
    background-color: red;
}

.score-text {
    position: absolute;
    top: 10%;
    font-size: 24px;
    font-weight: bold;
}
.score {
    position: absolute;
    top: 15%;
    font-size: 24px;
}

.red {
    background-color: #EC6F86;
}

.yellow {
    background-color: #FFDD75;
}
.blue {
    background-color: #45B4E7;
}
.green {
    background-color: #B2F068;
}

.red:hover {
    border-style: solid;
    border-width: 3px;
    border-color: white;
}
.yellow:hover {
    border-style: solid;
    border-width: 3px;
    border-color: white;
}
.blue:hover {
    border-style: solid;
    border-width: 3px;
    border-color: white;
}
.green:hover {
    border-style: solid;
    border-width: 3px;
    border-color: white;
}

.squares {
    margin-top: 30vh;
    display: flex;
    width: 250px;
    height: 250px;
    flex-wrap: wrap;
    justify-content: center;
}

.shakecolor {
    animation: shake 0.5s;
}

@keyframes shake {
    0% {...

JavaScript

$(document).ready(function(){

var runda = 1;
var tablica = [];
var i = 0;
var j = 0;


    $("#play").click(function(){
        $("#landing-page").css("display","none");
        $("#game").css("display","flex");
        gra();
    });


    function gra(){
        
        if (j<runda)
        {
            if(j==0)
            {
                alert("1");
                losuj();
                i=0;
                myLoop();
            }
        alert("2");
        $("#red").on("click",checkred);
        $("#green").on("click",checkgreen);
        $("#blue").on("click",checkblue);
        $("#yellow").on("click",checkyellow);
        }
        else if (j==runda)
        {
            alert("3");
            j=0;
            runda++;
            gra();
        }
        
           
        

        
            
    }

    function checkred(){
        if(tablica[j]===0)
        {
           j++;
            gra();
        }
        else{
          location.reload();
        }
    }
    function checkgreen(){
        if(tablica[j]===2)
        {
          j++;
            gra();
        }
        else{
          location.reload();
        }
    }
    function checkblue(){
        if(tablica[j]===1)
        {
           j++;
            gra();
        }
        else{
          location.reload();
        }
    }
    function checkyellow(){
        if(tablica[j]===3)
        {
             j++;
            gra();
        }
        else{
         location.reload();
        }
    }
    function losuj(){
        tablica.push(Math.floor(Math.random()*4))
    }

    function myLoop () {  
           
       setTimeout(function () {    
          if(tablica[i]==0)
          {
            shakered();
          }
          if(tablica[i]==1)
          {
              shakeblue();
          }
          if(tablica[i]==2)
          {
              shakegreen();
          }
          if(tablica[i]==3)
          {
              shakeyellow();
          }         
         ...