jQuery toggleClass example

Toggle class name on click in jQuery

by Vasil Svetoslavov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/he/1.2.0/he.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/css/bootstrap.min.css">
<meta charset="UTF-8">
<div class="container">
<span style="display:block" id="vehicles">🚌🚐🚑🚒🚓🚕🚗🚙🚚🚛🚜</span>
<div id="lane1" class="lane"><span class="car"></span></div>
<div id="lane2" class="lane"><span class="car"></span></div>
<div style="margin-top:10px">
<button id="startRaceButton" onclick="startRace()" class="btn btn-sm btn-success">Start</button>
<button id="terminateRaceButton" onclick="stopRace()" class="btn btn-sm btn-danger">Stop</button>
<button onclick="generateCars()" class="btn btn-sm btn-info">Generate Cars</button>
</div>
<div style="margin-top: 10px;" id="log">
</div>
</div>

CSS

.lane {
	border-bottom: 2px solid #000;
  text-align: right;
  padding-right: 0;
  font-size: 18px;
  text-shadow: 2px -2px 2px #666;
  background: #ccc;
}

.lane:first-of-type {
  border-bottom: 2px dashed #fff;
  border-top: 2px solid #000;
}

JavaScript

var vehicles = ['🚌', '🚐', '🚑', '🚒', '🚓', '🚕', '🚗', '🚙', '🚚', '🚛', '🚜'];
var maxVehicleIdx = vehicles.length - 1;

const viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
var maxWidth = viewportWidth;

function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

function generateCar(laneEl) {

  var pickedCharacter = vehicles[getRandomInt(maxVehicleIdx)];
  var encodedEntity = he.encode(pickedCharacter);
	
  laneEl.find(' .car').html(encodedEntity);
}

generateCars();




var progress1 = 0;
var progress2 = 0;

var maxSpeedPx = 5;

var raceFinished = false;



function generateCars() {
  generateCar($('#lane1'));
  generateCar($('#lane2'));
  var w1 = $('#lane1 .car').innerWidth();
  var w2 = $('#lane2 .car').innerWidth();
  
  maxWidth = viewportWidth - w1;
  if (w1 < w2) {
  	maxWidth = viewportWidth - w2;
  }
  
  console.log('Viewport Width: ' + viewportWidth);
  console.log('Max Width: ' + maxWidth);
}

function progressCar(progress, laneEl) {
  var delta = getRandomInt(maxSpeedPx);
  console.log('progress on ' + laneEl.attr('id') + ': ' + progress);

	
  var newProgress = progress + delta;

  if (newProgress >= maxWidth) {
  	newProgress = maxWidth;
	  finishRace(laneEl)
  }
  
  laneEl.find('.car').css('margin-right', newProgress);

  return newProgress;

}

function progressRace() {
	if (raceFinished) {
  	clearInterval(raceIntervalRef);
    console.log('progressRace: race finished');
    return;
  }
    progress1 = progressCar(progress1, $('#lane1'));
    progress2 = progressCar(progress2, $('#lane2'));
    console.log('progressRace: progress complete');

}

var raceIntervalRef;

function startRace() {
  raceFinished = 0;
  progress1 = 0;
  progress2 = 0;
  $('#startRaceButton').attr('disabled', true);
  $('#log').html(null);
  raceIntervalRef = setInterval(progressRace, 10);
}

function finishRace(laneEl) {
		terminateRace();
    console.log('Car on ' + laneEl.attr('id') + ' finished first!');
   ...