<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.