Zipcode

Zipcode html5 with fallback

HTML

<div class="spinner"></div>
<div class="wrapper">
    <div id="zipcode"></div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Allerta+Stencil);
 .wrapper {
    margin-top:100px;
    width:100%;
    text-align: center
}
#zipcode {
    font-size:64px;
    font-family:'Allerta Stencil', sans-serif;
    background-color: #fff;
    color: rgba(0, 174, 239, .8);
}
.spinner {
    height:60px;
    width:60px;
    margin:0px auto;
    margin-top:100px;
    position:relative;
    -webkit-animation: rotation .6s infinite linear;
    -moz-animation: rotation .6s infinite linear;
    -o-animation: rotation .6s infinite linear;
    animation: rotation .6s infinite linear;
    border-left:16px solid rgba(0, 174, 239, .15);
    border-right:16px solid rgba(0, 174, 239, .15);
    border-bottom:16px solid rgba(0, 174, 239, .15);
    border-top:16px solid rgba(0, 174, 239, .8);
    border-radius:100%;
}
@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}
@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(359deg);
    }
}
@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(359deg);
    }
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

JavaScript

$(function () {
    //set timeout in case the user does not deny or accept
    var timeoutVal = 5000;
    timer = setTimeout(ip2loc, timeoutVal);

    function html5loc() {
        if (navigator.geolocation) {
            // Try HTML5 based geolocation
            navigator.geolocation.getCurrentPosition(function (pos) {
                var lat = pos.coords.latitude;
                var lon = pos.coords.longitude;
                loc2zip(lat, lon);
                console.log("html5loc: success");
                window.clearTimeout(timer);
            }, function (err) {
                // On error try IP location based?
                ip2loc();
                console.log("html5loc: not allowed error");
            }, {
                enableHighAccuracy: true,
                timeout: timeoutVal,
                maximumAge: 0
            });
        } else {
            // Do something else, like IP location based?
            ip2loc();
            console.log("html5loc: browser no html5 geolocation");
        }
    }

    function ip2loc() {
        window.clearTimeout(timer);
        $.get("http://ipinfo.io", function (response) {
            var location = response.loc.split(",");
            var lat = location[0];
            var lon = location[1];
            loc2zip(lat, lon);
        }, "jsonp")
            .done(function () {
            console.log("ip2loc: success");
        })
            .fail(function () {
            console.log("ip2loc: error");
        });
    }

    function loc2zip(lat, lon) {
        $.get("https://nominatim.openstreetmap.org/reverse?format=json&lat=" + lat + "&lon=" + lon + "&details=1nse", function (response) {
            var zip = response.address.postcode.replace(/"/g, "");
            $("#zipcode").html('Zipcode: ' + zip);
            $(".spinner").hide();
        }, "json")
            .done(function () {
            console.log("loc2zip: success");
        })
            .fail(function () {
           ...