Skip to content

Instantly share code, notes, and snippets.

@harunpehlivan

harunpehlivan/index.html

Created May 28, 2021 20:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save harunpehlivan/10ef0a90bbac546ed523782c53fc340a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save harunpehlivan/10ef0a90bbac546ed523782c53fc340a to your computer and use it in GitHub Desktop.
Download ZIP
Running Pace Calculator
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/css/reset.css">
<link rel="stylesheet" href="/css/style.css">
<title>Running Pace Calculator</title>
</head>
<body>
<div class="container">
<div class="wrapper">
<h2>Running Pace Calculator</h2>
<div class="row radio-wrapper">
<form id="paceForm">
<fieldset id ="distanceRadioFields">
<legend>Select A Distance:</legend>
<label><input class="form-radio" type="radio" name="distance" value="13.1" id="halfmarathon">13.1</label>
<label><input class="form-radio" type="radio" name="distance" value="26.2" id="marathon" checked="checked" >26.2</label>
<label><input class="form-radio" type="radio" name="distance" value="31.1" id="fiftyk">50K</label>
<label><input class="form-radio" type="radio" name="distance" value="50" id="fiftymiler">50M</label>
<label><input class="form-radio" type="radio" name="distance" value="100" id="hundredmiler">100M</label>
</fieldset>
</div>
<div class="row">
<div class="slider-wrapper">
<label>Hours: <input type="range" min="0" max="40" value="0" class="slider" id="hourSlide" step="1"></label>
<label>Minutes: <input type="range" min="0" max="59" value="0" class="slider" id="minuteSlide" step="1"></label>
<label>Seconds: <input type="range" min="0" max="59" value="0" class="slider" id="secondSlide" step="1" ></label>
</div>
</div>
</form>
<div class="row time-wrapper"><h1>Total Time</h1>
<div class="output"> <span id="hourSliderValue">0</span><span>:</span><span id="minuteSliderValue">00</span><span>:</span><span id="secondSliderValue">00</span>
</div>
</div>
<div class="row pace-wrapper">
<h1>Your Pace</h1>
<h3 class="output" id="PaceValue"></h3>
<h3 class="output" id="PaceValue-km"></h3>
</div>
<script src="app.js"></script>
</div>
</div>
</body>
</html>
Raw
script.js
calcPace();
loadEventListeners();
//
//
//
function loadEventListeners(){
document.getElementById('hourSlide').addEventListener('input', calcPace);
document.getElementById('minuteSlide').addEventListener('input', calcPace);
document.getElementById('secondSlide').addEventListener('input', calcPace);
document.getElementById('distanceRadioFields').addEventListener('click', calcPace);
}
//
//
//
function calcPace() {
function getRaceDistance() {
let radios = document.getElementsByName('distance');
let val;
for (var i = 0; i < radios.length; i++) {
if (radios[i].type === 'radio' && radios[i].checked) {
// get value, set checked flag or do whatever you need to
val = radios[i].value;
}
}
return val; // return value of checked radio or undefined if none checked
}
//
//
//
function getHours() {
let myValue = document.getElementById('hourSlide').value;
document.getElementById('hourSliderValue').innerHTML = myValue;
return parseFloat(myValue*60);
}
//
//
//
function getMinutes() {
let myValue = document.getElementById('minuteSlide').value;
if(myValue >= 10){
document.getElementById('minuteSliderValue').innerHTML = myValue;
} else if(myValue <= 9) {
document.getElementById('minuteSliderValue').innerHTML = '0' + myValue;
}
return parseFloat(myValue);
}
//
//
//
function getSeconds() {
let myValue = document.getElementById('secondSlide').value;
if(myValue >= 10){
document.getElementById('secondSliderValue').innerHTML = myValue;
} else if(myValue <= 9) {
document.getElementById('secondSliderValue').innerHTML = '0' + myValue;
}
return parseFloat(myValue / 60);
}
//
//
//
let totalMinutes = getHours() + getMinutes() + getSeconds();
let justSeconds = Math.round(((totalMinutes % getRaceDistance())/getRaceDistance())*60);
let wholeMinute = Math.round((totalMinutes / getRaceDistance()) - ((totalMinutes % getRaceDistance())/getRaceDistance()));
//
//
//
function justSecondsFormatted() {
if (justSeconds > 9 ){
return justSeconds;
}else if (justSeconds < 10 ) {
return '0' + justSeconds;
}
};
//
//
//
function finalPace(){
if (justSecondsFormatted() == 60) {
let setPace = wholeMinute + 1 + ':00';
return setPace;
}else {
let setPace = wholeMinute + ':' + justSecondsFormatted();
return setPace;
}
}
//
// convert min/mile to min/km --> 0.62137119223733
//
function finalPaceKm(){
let pace = justSeconds;
console.log("pace: "+pace);
pace = pace * 0.62137119223733
return pace;
}
document.getElementById('PaceValue').innerHTML = finalPace() + '<span> Min/Mi</span>';
document.getElementById('PaceValue-km').innerHTML = finalPaceKm() + '<span> Min/Km</span>';
}
Raw
style.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0em;
padding: 0.1em;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
background-color:#616482;
color: #f7f7f7;
font-family: arial;
font-size:1em;
}
h1 {
font-size: 2.8rem;
font-weight: 600;
margin: 0 0 10px 0;
text-transform: uppercase;
}
h2 {
font-size: 2rem;
font-weight: 100;
text-transform: uppercase;
}
.slider-wrapper label {
display: block;
margin:10px auto;
}
#distanceRadioFields {
padding: 10px 15px 20px;
}
#distanceRadioFields label{
font-size: 1.1rem;
}
.slider {
}
.output {
border: 2px solid #ccc;
border-radius:30px;
display: inline-block;
font-size: 2.5rem;
padding: 10px 20px;
}
.container{
padding: 50px 0;
}
.wrapper{
margin: 0 auto;
max-width: 70%;
}
.row {
margin:20px 0 0 0;
}
.slider-wrapper{
}
/*INPUT SLIDERS
***********************************/
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 8.35px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 23.3px;
cursor: pointer;
box-shadow: 0px 0px 0px #1df000, 0px 0px 0px #28ff0b;
background: #dedcde;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0.9px 0.9px 1px #d7d7ff, 0px 0px 0.9px #f1f1ff;
border: 2.3px solid #b4b9b9;
height: 40px;
width: 24px;
border-radius: 50px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -8.55px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #eae9ea;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 23.3px;
cursor: pointer;
border: 2.3px solid #b4b9b9;
background: #dedcde;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0.9px 0.9px 1px #d7d7ff, 0px 0px 0.9px #f1f1ff;
border: 2.3px solid #b4b9b9;
height: 40px;
width: 24px;
border-radius: 50px;
background: #ffffff;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 23.3px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #d2cfd2;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 0px 0px 0px #1df000, 0px 0px 0px #28ff0b;
}
input[type=range]::-ms-fill-upper {
background: #dedcde;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 0px 0px 0px #1df000, 0px 0px 0px #28ff0b;
}
input[type=range]::-ms-thumb {
box-shadow: 0.9px 0.9px 1px #d7d7ff, 0px 0px 0.9px #f1f1ff;
border: 2.3px solid #b4b9b9;
height: 40px;
width: 24px;
border-radius: 50px;
background: #ffffff;
cursor: pointer;
height: 23.3px;
}
input[type=range]:focus::-ms-fill-lower {
background: #dedcde;
}
input[type=range]:focus::-ms-fill-upper {
background: #eae9ea;
}
/*radio buttons*/
.form-radio
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
position: relative;
background-color: #f1f1f1;
color: #666;
top: 10px;
height: 30px;
width: 30px;
border: 0;
border-radius: 50px;
cursor: pointer;
margin-right: 7px;
outline: none;
}
.form-radio:checked::before
{
position: absolute;
font: 13px/1 'Open Sans', sans-serif;
left: 11px;
top: 7px;
content: '\02143';
transform: rotate(40deg);
}
.form-radio:hover
{
background-color: #f7f7f7;
}
.form-radio:checked
{
background-color: #f1f1f1;
}
label
{
font: 300 16px/1.7 'Open Sans', sans-serif;
color: f7f7f7;
cursor: pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment