Simon Game - Why is my array being outputed backwards?

Simon Game - Why is my array being outputed backwards?
0.0 0

#1

I am making a Simon game for freecodecamp.

For some reason, when the pcPattern array is being displayed in the browser, it comes out backwards.

Please help guys, have been study for hours.

https://codepen.io/danovity/pen/ZyvvKM

$( document ).ready(function() {
    var move=0;
    var pcPattern=[];
    var userPattern=[];
    var clickAmount=0;
    var stage=0;
//Updates count screen  
  function moveDisplay(move,id,color){
    let buttonPressed=id;
    let countDisplay='count';
    document.getElementById(countDisplay).style.color = color;                        document.getElementById(countDisplay).firstChild.data=move;
  }
//Compare if move matches the pcPattern 
  function compareMove(){
    console.log("At compareMove, userPattern.length: "+userPattern.length);
    clickAmount+=1;
    console.log("clickAmount is: "+clickAmount);
    if(pcPattern[clickAmount-1]===userPattern[clickAmount-1]){
      console.log('pcPattern['+clickAmount+'] is: '+pcPattern[clickAmount-1]);
      console.log('userPattern['+clickAmount+'] is: '+userPattern[clickAmount-1]);
   setTimeout(       
       function chkPatternLength(){
    console.log('check patterns length, pcPattern.length= '+pcPattern.length+' ,userPattern.length= '+userPattern.length);
    if (pcPattern.length===userPattern.length){
     userPattern=[];
     clickAmount=0;
     stage+=1;
     generatePattern();
     //showPattern(pcPattern);
     console.log("Stage is: "+stage);
    }
  },3000);

        }
    }
//Generate Pattern
  function generatePattern(){
    //generate random number from 1-4
    let randomNumber=Math.ceil(Math.random()*2);
    pcPattern.push(randomNumber);
    console.log("randomNumber is: "+randomNumber);
    console.log("pcPattern is: "+pcPattern);
    showPattern(pcPattern);
  }   
//Check Pattern Length
  // function chkPatternLength(){
  //   console.log('check patterns length, pcPattern.length= '+pcPattern.length+' ,userPattern.length= '+userPattern.length);
  //   if (pcPattern.length===userPattern.length){
  //    userPattern=[];
  //    clickAmount=0;
  //    stage+=1;
  //    generatePattern();
  //    //showPattern(pcPattern);
  //    console.log("Stage is: "+stage);
  //   }
  // }


//btn Animation
  function btnAnimation(btnId,firstColor,secondColor){
     $(btnId).animate({backgroundColor:firstColor});
     $(btnId).delay(500);
     $(btnId).animate({backgroundColor:secondColor});
     $(btnId).delay(500);     
  }
//Light up button based on generated pattern
  function activateBtn(btn){
    console.log("btn is: "+btn);
    if (btn===1){
      btnAnimation('#btnBlue','blue','#87ceeb');  
     // $('#btnBlue').animate({backgroundColor:'blue'});
     // $('#btnBlue').delay(500);
     // $('#btnBlue').animate({backgroundColor:'#87ceeb'});
     // $('#btnBlue').delay(500);  
      console.log('btnBlue activated, btn===1');
    } 
    if (btn===2){
      btnAnimation('#btnGreen','#32CD32','green');
     // $('#btnGreen').animate({backgroundColor:'green'});
     // $('#btnGreen').delay(500);
     // $('#btnGreen').animate({backgroundColor:'#32CD32'});
     // $('#btnGreen').delay(500);  
      console.log('btnGreen activated, btn===2');
    } 
    // if (btn===3){
    //   btnAnimation('#btnRed','#ffc0cb','red');
    //   console.log('btnRed activated, btn===3');
    // } 
    // if (btn===4){
    //   btnAnimation('#btnYellow','yellow','#ffa500');
    //   console.log('btnYellow activated, btn===4');
    // } 
  }
  //Show pattern
  window.showPattern=function(pattern){
    console.log("pattern is: "+pattern);
    for (var i=0;i<pattern.length;i++){
      console.log('pattern['+i+'] is: '+pattern[i]);
        activateBtn(pattern[i]);
    }
  }
 //everytime when a button is clicked
 function btnClicked(number){
      console.log('Before push('+number+'),userPattern is: '+userPattern);
      userPattern.push(number);
      console.log('After push('+number+'),userPattern is: '+userPattern);
      activateBtn(number);
      if (clickAmount<userPattern.length){   
      compareMove();
      //moveDisplay(move,clicked,'black');
      }  
 }
  $("button").click(function(){
    
    let clicked=this.id;
    
    if (clicked==="btnBlue"){
      //move+=1;
      btnClicked(1);
      // console.log('Before push(1),userPattern is: '+userPattern);
      // userPattern.push(1);
      // console.log('After push(1),userPattern is: '+userPattern);
      // activateBtn(1);
      // compareMove();
      // //moveDisplay(move,clicked,'black');
    }
     if (clicked==="btnGreen"){
      //move+=1;
      btnClicked(2);
    }
    //    if (clicked==="btnRed"){
    //   //move+=1;
    //   btnClicked(3);
    // }
    //    if (clicked==="btnYellow"){
    //   //move+=1;
    //   btnClicked(4);
    // }
    
    
    if (clicked==="btnReset"){
      userPattern=[];
      pcPattern=[];
      moveDisplay(move,clicked,'transparent');
      stage=0;
    }
    
    if (clicked==="btnStart"){
      moveDisplay(move,clicked,'black');
      generatePattern();
      console.log("Stage is: "+stage);
    }
  });
});
.grid{
  width:340px;
  height:320px;
  margin:auto;
  border: 1px solid black;
  margin-top:3%;
  padding:5px;
}

.select{
  background-color: lightblue;
  height:150px;
  width:150px;
  color:transparent;
}

.select #btnBlue:active {
  background-color: blue;
}
/* .select #btnGreen:active {
  background-color: #90ee90;
}
.select #btnRed:active {
  background-color: pink;
}
.select #btnYellow:active {
  background-color: lightyellow;
} */

#count{
  width:50%;
  padding:5%;
  margin:5%;
  border: 1px solid black;
  text-align:center;
  color:transparent;
}
<div class="grid">  
  
<button class="select" id="btnBlue">1</button>
<button class="select" id="btnGreen" style="background-color:green">1</button>
<button class="select" id="btnRed" style="background-color:red">1</button>  
<button class="select" id="btnYellow" style="background-color:orange">1</button>
  
<button class="StartStop" id="btnStart">Start</button>   
<button class="StartStop" id="btnReset">Reset</button>  
  
<output id="count">1</output>

</div>

#2

In the console.log it says "After push(1),userPattern is: 2,1,1" whatever that means?