Time+Dist Finder

by Max B.

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<div id="container">
    <div id="form">
        <h5>City 1</h5>
        <h4>(Default: Googleplex, Mountain View, CA)</h4>
        <h2>Latitude:</h2>
        <br>
        <input type="text" id="lat" value="37.422461">
        <h2>Longitude:</h2>
        <br>
        <input type="text" id="lon" value="-122.084201">
    </div>
    <div id="form">
        <h5>City 2</h5>
        <h4>(Default: Fossasia 2015, Singapore, China)</h4>
        <h2>Latitude:</h2>
        <br>
        <input type="text" id="lat2" value="1.296956">
        <h2>Longitude:</h2>
        <br>
        <input type="text" id="lon2" value="103.786631">
    </div>
    <hr>
    <button type="button" id="submit" class="btn waves-effect waves-light">Find Distance + Time Change</button>
</div>
<hr class="hr-dashed">
<h3>Result</h3>
<p id="result"></p>

CSS

body {
    text-align: center;
    background-color: #292929;
}

hr {
    margin-left: 6rem;
    margin-right: 6rem;
    border-style: solid;
    border-width: 3px;
    border-color: #00acc1;
    margin-top: 15px;
    margin-bottom: 15px;
}

.hr-dashed {
    border-style: dashed;
    border-width: 1px;
    border-color: #696969;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 0;
    margin-right: 0;
}

#form {
    background-color: #FFCC6E;
    box-shadow: 6px 6px 2px #1F1F1F;
}

#container {
    margin: 4rem;
    margin-bottom: 0px;
    margin-top: 10px;
}

p {
    color: white;
    height: 5rem;
    background-color: #353535;
}

h3 {
    color: #ee6e73;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 2rem;
}

h5 {
    background-color: #F5F5F5;
    font-size: 16px;
    font-weight: bold;
    line-height: 25px;
    margin: 0;
}

h2 {
    background-color: #FFB834;
    font-size: 16px;
    font-weight: bold;
    line-height: 25px;
    margin: 0;
}

input[type="text"] {
    background-color: #FFE4B2;
}

#locate {
    background-color: #FFB834;
}

h4 {
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 0px;
    font-size: 12px;
    color: white;
}

JavaScript

// First Default Location: Googleplex, Mountain View, CA
// Second Default Location: Singapore, China

/* https://www.wikiwand.com/en/Haversine_formula */
function calcDist(lat1, lon1, lat2, lon2) {
    var radius = 6371000; // earth's radius
    var r_lat1 = lat1 * (Math.PI / 180);
    var r_lat2 = lat2 * (Math.PI / 180);
    var r_deltaLat = (lat2 - lat1) * (Math.PI / 180);
    var r_deltaLon = (lon2 - lon1) * (Math.PI / 180);

    var a = Math.sin(r_deltaLat / 2) * Math.sin(r_deltaLat / 2) +
        Math.cos(r_lat1) * Math.cos(r_lat2) *
        Math.sin(r_deltaLon / 2) * Math.sin(r_deltaLon / 2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

    return Math.ceil(radius * c);
}

/* 360 degrees (longitude) in a full day, 
24 hours in a day, for every (24/360)=15 degrees longitude, 
time change is one hour */
function calcTime(lon1, lon2) {
    var t1 = lon1 * 24 / 360;
    var t2 = lon2 * 24 / 360;
    return Math.ceil((t2 - t1));
}

function error(msg) {
    $("#result").text(msg);
}

function submit() {
    if (Number.isNaN(parseFloat($("#lat").val()))) {
        error("Latitude must be a number!");
        return;
    }
    if (Number.isNaN(parseFloat($("#lon").val()))) {
        error("Longitude must be a number!");
        return;
    }
    if (Number.isNaN(parseFloat($("#lat2").val()))) {
        error("Latitude #2 must be a number!");
        return;
    }
    if (Number.isNaN(parseFloat($("#lon2").val()))) {
        error("Longitude #2 must be a number!");
        return;
    }

    var lat = parseFloat($("#lat").val());
    var lon = parseFloat($("#lon").val());
    var lat2 = parseFloat($("#lat2").val());
    var lon2 = parseFloat($("#lon2").val());

    var distance = calcDist(lat, lon, lat2, lon2);
    var timeChange = calcTime(lon, lon2);

    $("#result").html("<b>Distance: </b>" + distance + " Kilometers<br/><b>Time Change: </b>" + (timeChange > 0 ? '+' : '') + timeChange + " Hours");
}

$("#submit").click(submit);