Skip to content

Instantly share code, notes, and snippets.

@cannandev

cannandev/index.html

Created April 12, 2020 02:39
Show Gist options
  • Save cannandev/d37905a7ed3fc639311c49dbc6ebc482 to your computer and use it in GitHub Desktop.
Save cannandev/d37905a7ed3fc639311c49dbc6ebc482 to your computer and use it in GitHub Desktop.
Download ZIP
Pace Calculator
Raw
index.html
<body>
<div class="container">
<h1>Pace Calculator</h1>
<h2>JS Foundations - Assignment 3</h2>
<div class="form-inline">
<div class="form-group">
<label for="distance">Distance</label>
<input type="text" id="distance" class="form-control" placeholder="miles"/>
</div>
<div class="form-group">
<label for="hours">Time:</label><input type="text" id="hours" class="form-control" placeholder="hours"/> : <input type="text" id="minutes" class="form-control" placeholder="minutes"/> : <input type="text" id="seconds" class="form-control" placeholder="seconds"/>
</div>
<button id="calculate_btn" class="btn btn-success">Calculate Pace</button>
</div>
<p id="pace" class="h3"/>
<p id="errors"></p>
</div>
</body>
Raw
pace-calculator.markdown
Raw
script.js
var distanceInput = document.getElementById('distance'),
hoursInput = document.getElementById('hours'),
minutesInput = document.getElementById('minutes'),
secondsInput = document.getElementById('seconds'),
calculateBtn = document.getElementById('calculate_btn'),
paceText = document.getElementById('pace'),
errors = document.getElementById('errors');
function validateInput(value, input) {
if (isNaN(value)) {
input.style.borderColor = 'red';
errors.style.display = 'block';
errors.innerHTML += 'Please enter valid ' + input.id +'. </br>';
return false;
}
else {
input.style.borderColor = 'initial';
errors.style.display = 'none';
errors.innerHTML = '';
return true;
}
}
calculateBtn.addEventListener('click', function() {
//convert input strings to decimal values
var miles = parseFloat(distanceInput.value),
hours = parseFloat(hoursInput.value),
mins = parseFloat(minutesInput.value),
secs = parseFloat(secondsInput.value);
//validate fields
if (!validateInput(miles, distanceInput) ||
!validateInput(hours, hoursInput) ||
!validateInput(mins, minutesInput) ||
!validateInput(secs, secondsInput)
) {
return; //quit program if any validation returns false
}
//runners define pace as mins per mile
var totalMinutes = ((hours * 60) + mins + (secs / 60)),
pace = (totalMinutes / miles),
paceMinutes = Math.floor(pace),
paceSeconds = Math.round((pace - paceMinutes) * 60);
if (paceSeconds < 10) {
paceSeconds = '0' + paceSeconds;
}
paceText.innerHTML = 'You need to run ' +
paceMinutes + ':' + paceSeconds + ' minutes per mile';
});
Raw
style.css
#errors {
display: none;
width: 50%;
padding: 1em;
background: #F1C7C7;
}
.form-group {
padding: 1em;
}
label {
margin-right: 1em;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment