Home jQuery - how to add a class, then remove that same class after delay with a for loop
Reply: 0

jQuery - how to add a class, then remove that same class after delay with a for loop

Kev-O
1#
Kev-O Published in 2018-02-13 19:54:50Z

Trying to build FCC's Simon game and running into an issue. The CPU is building an array of random numbers according to the Math.random function, then should add the 'active' class temporarily to the span at the index of that random number (for maybe half a second), then remove it, then move onto the next until i = randomArray.length, just so the player can see which buttons they need to press to beat the level.

if you run the attached code, you'll see that the first level works fine. Every level after that though, all randomly selected buttons have the 'active' class added and removed simultaneously, when I need it to happen one at a time with a break between. Note on the console that the first for loop runs until it's finished, THEN it goes to the second loop. I've tried refactoring the code in a ton of ways to get it to bounce between the first loop and second loop, but can't seem to get anything to work right.

Below is a link to one of the better answers I've found, but it doesn't help me create a delay in the for loop, and it doesn't fix the issue of the first for loop running to completion, THEN moving onto the second for loop.

jQuery AddClass then removing a class

Any/all suggestions are welcome. Hopefully my formatting is acceptable. This is my first post on stackoverflow so please forgive any mistakes.

var level = 0;
var currentLevel;
var random = Math.floor(Math.random() * 4); 
var randomArray = [];
var userArray = [];

$('#btn-reset').hide();
$('#btn-next').hide();
$('#btn-start').off('click').on('click', init);

function init() {
  $('#btn-start').off('click'); 
  $('#btn-start').fadeOut(250);
  $('#btn-next').delay(250).fadeIn(250);
  $('#btn-reset').fadeIn(250); 
  simonSays()
};

$('#btn-next').off('click').on('click', simonSays);

function simonSays() {
  
  if(level <= 20) {
    level++;
    $('.counter').html(level);
  }
  
  var lameAttempt = setInterval(function() {
  
    random = Math.floor(Math.random() * 4);
    randomArray.push(random);
    console.log("randomArray = " + randomArray);
    
    for(var i = 0; i < randomArray.length && i <= 20; i++) {
      console.log("1st for Loop Running " + i);
      $('span').eq(randomArray[i]).addClass('active');
      setTimeout(function() {
        for(var j = 0; j < randomArray.length; j++) {
          console.log("2nd for Loop Running " + j);
          $('span').eq(randomArray[j]).removeClass('active');
          console.log("Class removed?");
        }
      },1000); // end setTimeout
    } // end for loop
    
    //////////////////////////////////////////////////////////
    ///////// ^^^ ABOVE LOGIC NEEDS MAJOR FIXING ^^^ /////////
    //////////////////////////////////////////////////////////
    
    clearInterval(lameAttempt);
    console.log("interval cleared");
    
  }, 0);  // end setInterval 
  
  $('#btn-next').off('click').on('click', simonSays);
} // end entire function 



$('#btn-reset').on('click', reset);
function reset() {
  var randomArray = [];
  var userArray = [];
  level = 0;
  for(var i = 0; i < $('span').length - 1; i++) {
    $('span').eq(i).removeClass('active');
  }
  $('.counter').html(level);
  $('#btn-next').fadeOut(300);
  $('#btn-start').delay(300).fadeIn(300);
  $('#btn-reset').fadeOut(300);
  $('#btn-start').off('click').on('click', init);
};

function endGame() {
  console.log("Game Over");
}
body {
  font-family: "Roboto Mono";
}

.border {
  height: 500px;
  width: 500px;
  border-radius: 50%;
  margin: 40px auto;
  position: relative;
  background: #232323;
}

.u-l {
  position: absolute;
  height: 225px;
  width: 225px;
  border:1px solid black;
  background: green;
  top: 18.75px;
  left: 18.75px;
  border-top-left-radius:100%;
  text-indent: -9999px;
}

.u-r {
  position: absolute;
  height: 225px;
  width: 225px;
  border:1px solid black;
  right: 18.75px;
  top: 18.75px;
  background: red;
  border-top-right-radius:100%;
  text-indent: -9999px;
}

.b-r {
  position: absolute;
  height: 225px;
  width: 225px;
  border:1px solid black;
  bottom: 18.75px;
  right: 18.75px;
  background: blue;
  border-bottom-right-radius:100%;
  text-indent: -9999px;
}

.b-l {
  display: inline;
  position: absolute;
  height: 225px;
  width: 225px;
  border:1px solid black;
  bottom: 18.75px;
  left: 18.75px;
  background: yellow;
  border-bottom-left-radius:100%;
  text-indent: -9999px;
}
.inactive {
opacity: .7;
}
span:active {
  opacity: 1;
}
.active {
  opacity: 1;
}

.inner-circle {
  height: 40%;
  width: 40%;
  position: absolute;
  border-radius: 50%;
  top: 30%;
  left: 30%;
  background: #161616;
}

.simon {
  font-size: 50px;
  color: white;
  width: 50%;
  margin: 30px 20px 0 20px;
}

div.level {
  font-size: 22px;
  color: crimson;
  width: 80%;
  margin: 0px 45px;
  font-weight: 700;
}
.counter {
  font-size: 26px;
}
p {
  display: inline;
}
div.reset {
  text-align: center;
}
#btn-start {
  border: 1px solid white;
  border-radius: 10px;
  font-family: "Roboto Mono";
  font-weight: 700;
  font-size: 22px;
  background: transparent;
  color: white;
  outline: none;
  margin: 10px 52px 0 52px;
}

#btn-start:hover {
  color: silver;
  transition-duration: .4s;
}
#btn-reset {
  border: 1px solid black;
  border-radius: 10px;
  font-family: "Roboto Mono";
  font-weight: 700;
  font-size: 22px;
  background: transparent;
  color: black;
  outline: none;
  width: 25%;
  margin: 10px 52px 0 52px;
}
#btn-reset:hover {
  border: 1px solid silver;
  transition-duration: .3s;
}
#btn-start:hover {
  color: silver;
  transition-duration: .4s;
}
#btn-next {
  border: 1px solid white;
  border-radius: 10px;
  font-family: "Roboto Mono";
  font-weight: 700;
  font-size: 22px;
  background: transparent;
  color: white;
  outline: none;
  text-align: center;
  margin: 10px 63px 0 63px;
}
#btn-next:hover {
  border: 1px solid silver;
  color: silver;
  transition-duration: .3s;
}
.btn-color {
  border: none;
}
.btn-color:hover {
  cursor: pointer;
  border: none;
}
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
</head>

<div class="container">   
  
  <div class="border">
      
    <span class="u-l btn-color inactive">0</span>
      
    <span class="u-r btn-color inactive">1</span>
      
    <span class="b-r btn-color inactive">2</span>
      
    <span class="b-l btn-color inactive">3</span>
      
    <div class="inner-circle">
      
      <div class="simon">
        <p>SIMON</p>
      </div>
      
      <div class="level">
        <p>Level: </p><span class="counter">0</span>
      </div>
      
      <div class="start">
        <button id="btn-start">Start!</button> 
        <button id="btn-next">Next</button>
      </div>
    
    </div>
          
  </div>  
  <div class="reset">
    <button id="btn-reset">Reset</button>
  </div>
</div>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.32522 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO