jQuery addClass example

Change class name on click in jQuery

by Ben Watts

HTML

<div id="banner-message">
<h1>Countdown</h1>
<button class="game-button vowel">Vowel</button>
<button class="game-button consonant">Consonant</button>
<div class="results"></div>
<br/>
<button class="game-button start">Start</button>
<h1>Timer</h1>
<h4 class="timer"></h4>
<button class="reset alt">Reset</button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

button.alt {
  background: #ff8400;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

.results {
    padding-top: 9px;
    letter-spacing: 5px;
    min-height: 29px;
}

JavaScript

var vowels = ['A', 'E', 'I', 'O', 'U'];
var consonants = ['B','C','D','F','G','H','J','K','L','M','N','P','Q','R','S','T','V','W','X','Y','Z'];
var letters = 0;
var timer = 1000 * 30;
var gameBeginInterval;
$('.vowel').on('click', function(e)
{
	if(letters < 10)
	{
		$('.results').append(vowels[(Math.random() * (vowels.length - 1 + 1) ) << 0]);
		letters++;
    }
});

$('.consonant').on('click', function(e)
{
	if(letters < 10)
	{
		$('.results').append(consonants[(Math.random() * (consonants.length - 1 + 1) ) << 0]);
		letters++;
    }
});

$('.reset').on('click', function(e)
{
	if(letters == 10)
	{
		$('.results').text('');
        $('.game-button').removeAttr('disabled');
		letters = 0;
        timer = 1000 * 30;
        $('.timer').text("");
    }
});

$('.start').on('click', function()
{
	begin();
});

function begin()
{
	$('.game-button').attr('disabled', 'disabled');
    gameBeginInterval = setInterval(function()
    {
    	timer -= 1000/ 60;
        $('.timer').text(parseInt(timer) / 1000);
        if(timer <= 0)
        {
        	clearInterval(gameBeginInterval);
            $('.timer').text("Stop");
        }
    }, 1000 / 60);
}