Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Yay Vrijdag!</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
  <h1>Lets Race!</h1>
  <div id="track">
    <div class="car" id="car1"></div>
    <div class="car" id="car2"></div>
    <div class="car" id="car3"></div>
    <div id="finish"></div>
  </div>
  <button id="start-button">GO!</button>
  <script type="text/javascript" src="script.js"></script>
</body>
</html>


$('#start-button').click(function(event) {
  var pixelsToFinish = $(document).width() - 30 - 83;
  var $car1 = $('#car1');
  var $car2 = $('#car2');
  var $car3 = $('#car3');

  var raceInterval = setInterval(function(){

    var randomLeftCar1 = Math.floor(Math.random() * 100) + 25;
    var currentLeftCar1 = parseInt($car1.css('left'));
    var newLeftCar1 = currentLeftCar1 + randomLeftCar1;
    $car1.css({left:  newLeftCar1+'px'});

    var randomLeftCar2 = Math.floor(Math.random() * 100) + 25;
    var currentLeftCar2 = parseInt($car2.css('left'));
    var newLeftCar2 = currentLeftCar2 + randomLeftCar2;
    $car2.css({left:  newLeftCar2+'px'});

    var randomLeftCar3 = Math.floor(Math.random() * 100) + 25;
    var currentLeftCar3 = parseInt($car3.css('left'));
    var newLeftCar3 = currentLeftCar3 + randomLeftCar3;
    $car3.css({left:  newLeftCar3+'px'});

    if ((newLeftCar1 >= pixelsToFinish) || (newLeftCar2 >= pixelsToFinish)  || (newLeftCar3 >= pixelsToFinish)){

      if (newLeftCar1 >= pixelsToFinish) {
        var pixelsRemaining = pixelsToFinish - currentLeftCar1;
        var pixelsPerMilisecond = (randomLeftCar1 / 200);
        console.log('CAR1:')
        console.log(pixelsRemaining * pixelsPerMilisecond);
      }
      if (newLeftCar2 >= pixelsToFinish) {
        var pixelsRemaining = pixelsToFinish - currentLeftCar1;
        var pixelsPerMilisecond = (randomLeftCar2 / 200);
        console.log('CAR2:')
        console.log(pixelsRemaining * pixelsPerMilisecond);
      }

      if (newLeftCar3 >= pixelsToFinish) {
        var pixelsRemaining = pixelsToFinish - currentLeftCar1;
        var pixelsPerMilisecond = (randomLeftCar3 / 200);
        console.log('CAR3:')
        console.log(pixelsRemaining * pixelsPerMilisecond);
      }

      clearInterval(raceInterval);
      return;
    }


  }, 200);


});