<br>
<div id="con" class="container-fluid">
<div class="row">
  <div class="col-sm-4"></div>
   <div class="col-sm-4">
    <div class="container-fluid animated fadeInDown" id="content">
            <h1 class="text-success text-center">Simon Game</h1>
 <div id="box1" class="container-fluid">
            <h1 id="input" class="text- alert text-center"></h1>
                <div class="row text-center" id="box">
           <div id = "bt1" class="btn-group text-center">  
                <button id="start" class="bt btn btn-default"><span class="glyphicon glyphicon-play" aria-hidden="true"></span></button>
                <button id="strict" class="bt btn btn-default"><span class="glyphicon glyphicon-step-backward" aria-hidden="true"></span></button>
             <button id="on" class="bt btn btn-default"><span class="glyphicon glyphicon-off" aria-hidden="true"></span></button>
                <button id="off" class="bt btn btn-default"><span class="glyphicon glyphicon-off" aria-hidden="true"></span></button>
             <button id="info" class="bt btn btn-default" data-toggle="tooltip" data-placement="bottom" title="1.- Press the green button on the grey screen to start. 
2.- Press the play button.3.- Wait to hear a tone and then try to copy the same. The tones increase with your progress.                                                                                                      4.- You can win the game when your count is 20.5.- When you're wrong this sign *** shows on the screen, so you get a new opportunity to copy the tones."><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></button>
             <br>
   <br><h3>Count</h3>
                <form id="count" class="well well-lg">  </form> 
            </div>
 </div>
                 </div>   
            <div class="row text-center">
              <br>
              <div id = "bt2" class="btn-group">  
                <button id="one" class="dark1 btn btn-default"><i id="g" class="fa fa-bug" aria-hidden="true"></i>
</button>
                <button id="two" class="dark2 btn btn-default"><i id="r" class="fa fa-bug" aria-hidden="true"></i>
</button>
            </div>
              </div>
            <div class="row text-center">
              <div id = "bt2" class="btn-group">  
                <button id="three" class="dark3 btn btn-default"><i id="y" class="fa fa-bug" aria-hidden="true"></i>
</button>
                <button id="four" class="dark4 btn btn-default"><i   id="b" class="fa fa-bug" aria-hidden="true"></i>
</button>
            </div>
              <br><br>
            </div>
        </div>
     <br><br>
    </div>
    
  <div class="col-sm-4"></div>
  </div></div>
            
    <audio id="audio1">
        <source src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg">
    </audio>
    <audio id="audio2">
        <source src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3" type="audio/mpeg">
    </audio>
    <audio id="audio3">
        <source src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3" type="audio/mpeg">
    </audio>
    <audio id="audio4">
        <source src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3" type="audio/mpeg">
    </audio>
<div class="panel-footer text-center" id="footer"><p>Created by Paulina Fischer</p><br><p>Library from 
<a href="https://www.youtube.com/channel/UCLG_lIjyLPqjN-KtHK_aE-Q" target="_blank">Happy Coder</a> and freeCodeCamp.</p></div>
#content {
 text-align:center;
        }
#box1{background-color:darkgrey;
 border:solid 5px  #0f0e0f;;
          border-radius:60px;
margin:15px 25px 1px 25px;}
#con{
  background-color:whitesmoke;
}
#content{background-color:black;
 border:solid 5px  #0f0e0f;;
          border-radius:100px;
box-shadow: 7px 12px 5px #292829;}

.well{
  font-size:30px;
  width:200px;
   border-radius:100px;
  background-color:black;
  color:darkgreen;
  border:solid 5px #0a0a0a;;
}
        #one {
            height: 100px;
            width:100px;
            text-align: center;
            align-content: center;
 border:solid 2px #000000;
          border-top-left-radius:28px;
        }

        #two {
            height: 100px;
            width: 100px;
            text-align: center;
            align-content: center;
            border:solid 2px #000000;
          border-top-right-radius:28px;
        }

        #three {
            height: 100px;
            width: 100px;
            text-align: center;
            align-content: center;
            border:solid 2px #000000;
            border-bottom-left-radius:28px;
        }

        #four {
            height: 100px;
            width: 100px;
            text-align: center;
            align-content: center;
              border:solid 2px #000000;
          border-bottom-right-radius:28px;
        }

        .dark1 {
            background-color: #097604;
        }

        .light1 {
            background-color: #61FE5A;
        }

        .dark2 {
            background-color: #7E0506;
        }

        .light2 {
            background-color: #FE585A;
        }


        .dark3 {
            background-color: #8C8606;
        }

        .light3 {
            background-color: #fdff1d;
        }

        .dark4 {
            background-color: #04167B;
        }

        .light4 {
            background-color: #667CFB;
        }

        .bt {
            text-align: center;
            align-content: center;
            background-color: transparent;
            font-size:18px;
            border:none;
        }


        #footer{
            margin:auto;
            text-align:center;
        }
.fa{
  font-size:50px;
}
#y{color:#8C8606;}
#g{color:#097604;}
#r{color:#7E0506;}
#b{color:#04167B;}
#on{color:green; }
#off{color:maroon; }
h1, h3{font-family: 'Saira Extra Condensed', sans-serif;}
var random = [];
    var litID = [];
    var lit;
    var clicked = [];
    var i;
    var j=0;
    var count = 1;
    var on;
    var off;
    var strict;
    var x;


    function change1() {

      
        if (count <= 10) {
            off = 400;
            on = 800;

        }

        else {
            off = 250;
            on = 500;
        }

               x = setInterval(function () {

                if (random[j] == 1) {

                    lit = 'light1';
                    $('#one').addClass(lit);
                    $('#audio1')[0].play();
                    litID.push(1);


                    setTimeout(function () {

                        $('#one').removeClass(lit);

                    }, off);

                }

                else if (random[j] == 2) {

                    lit = 'light2';
                    $('#two').addClass(lit);
                    $('#audio2')[0].play();
                    litID.push(2);


                    setTimeout(function () {

                        $('#two').removeClass(lit);

                    }, off);

                }

                else if (random[j] == 3) {

                    lit = 'light3';
                    $('#three').addClass(lit);
                    $('#audio3')[0].play();
                    litID.push(3);


                    setTimeout(function () {

                        $('#three').removeClass(lit);

                    }, off);

                }

                else {

                    lit = 'light4';
                    $('#four').addClass(lit);
                    $('#audio4')[0].play();
                    litID.push(4);


                    setTimeout(function () {

                        $('#four').removeClass(lit);

                    }, off);
                }

                 j++;

                   if (j>=count) {
                       clearInterval(x);
                   }

            }, on);

    }


    function checking() {

        if (litID.length == clicked.length) {

                if (litID.join() == clicked.join()) {

                        if (count == 20) {

                            setTimeout(function () {
                                alert("You win!");
                                location.reload();
                            }, 1000);
                        }

                        else {
                            setTimeout(function () {
                                $('#count').text(count + 1);
                                count++;
                                litID = [];
                                clicked = [];
                                j = 0;
                                change1();

                            }, 1000);
                        }
                }

                else {
                    if (strict == 1) {

                        location.reload();

                    }

                    else {
                        setTimeout(function () {
                            $('#count').text('***');

                            litID = [];
                            clicked = [];
                            j = 0;
                            change1();
                        }, 1000);
                    }
                }
    }
  }

    $('#on').on('click', function () {
        $('#count').text('--');

        for (i=0; i<20; i++) {
        random[i] = Math.ceil((Math.random() * 4));
        }

        $('#strict').on('click', function () {
            strict=1;
        });

        $('#start').on('click', function () {

            $('#count').text(count);

            change1();

        });

        $('#one').on('click', function () {

            $('#one').addClass('light1');
            $('#audio1')[0].play();

            clicked.push(1);

            setTimeout(function () {
                $('#one').removeClass('light1');

            }, 250);

            checking();

        });

        $('#two').on('click', function () {

            $('#two').addClass('light2');
            $('#audio2')[0].play();

            clicked.push(2);

            setTimeout(function () {
                $('#two').removeClass('light2');

            }, 250);

            checking();
        });

        $('#three').on('click', function () {

            $('#three').addClass('light3');
            $('#audio3')[0].play();

            clicked.push(3);

            setTimeout(function () {
                $('#three').removeClass('light3');

            }, 250);

            checking();
        });

        $('#four').on('click', function () {

            $('#four').addClass('light4');
            $('#audio4')[0].play();

            clicked.push(4);

            setTimeout(function () {
                $('#four').removeClass('light4');

            }, 250);

            checking();
        });

    });

  
    $('#off').on('click', function () {
        location.reload();
      
    });

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});

Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js
  3. https://cldup.com/S6Ptkwu_qA.js