<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/140/crash-js.svg" width="100%"/>

<section class="container">
  <h5>Question:</h5>
  <p>Two cars are 1000 miles apart. Car A is traveling at 80 miles per hour. Car B is traveling at 60 miles per hour. How long will it be before they meet?</p>
  <h5>Answer:</h5>
  <p><span id="hours"></span> hours, <span id="minutes"></span> minutes, <span id="seconds"></span> seconds</p>
</section>
  
body {
  background: #8f7aad;
  color: #ffffff;
}

.container {
  margin: 0 auto;
  max-width: 600px;
  padding: 0 20px;
}

h5 {
  color: #a795c1;
  margin-bottom: 0;
  text-transform: uppercase;
}

p {
  line-height: 1.4;
  margin-top: 5px;
}
View Compiled
// function calculateCycles(distance, speedA, speedB) {
//   var distance = distance;
//   var speedA = speedA;
//   var speedB = speedB;
//   var cycle = speedA + speedB;
//   var cycleCount = distance / cycle;
//   return cycleCount;
// };

// Per the comments in my post, this is about 500% more efficient
function calculateCycles(distance, speedA, speedB){
  return distance / (speedA + speedB)
}

function calculateTime() {
  var cycles = calculateCycles(1000, 80, 60);
  var secondsPerHour = 60 * 60;
  var secondsTotal = secondsPerHour * cycles;
  var hoursRemainder = cycles % 1;
  var hoursResult = (secondsTotal / secondsPerHour >> 0);
  var minutesInitial = hoursRemainder * 60;
  var minutesRemainder = minutesInitial % 1;
  var minutesResult = (minutesInitial >> 0);
  var secondsResult = (minutesRemainder * 60) >> 0;
  return [hoursResult, minutesResult, secondsResult];
}

function outputAnswer() {
  var times = calculateTime();
  var hours = times[0];
  var minutes = times[1];
  var seconds = times[2];
  var hoursOutput = document.querySelector('#hours');
  var minutesOutput = document.querySelector('#minutes');
  var secondsOutput = document.querySelector('#seconds');
  hoursOutput.innerHTML = hours;
  minutesOutput.innerHTML = minutes;
  secondsOutput.innerHTML = seconds;
};

outputAnswer();

// http://stackoverflow.com/questions/19674992/javascript-using-a-return-value-in-another-function
// http://stackoverflow.com/questions/4228356/integer-division-in-javascript
// http://stackoverflow.com/questions/4090491/first-element-in-array-jquery

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.