Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Geolocation</title>
    <meta name="viewport" content="width=device-width">
    <style>
        #output{
            width: 300px;
            height: 300px;
            padding: 2rem;
            font-size: 2rem;
            line-height: 1.5;
        }
        .miss{
            background-color: crimson;
            color: white;
        }
        .targetting{
            background-color: gold;
            color:firebrick;
        }
        .hit{
            background-color: greenyellow;
            color: darkgreen;
        }
    </style>
</head>
<body>
    <h1>Geolocation</h1>
    <h2>Instructions</h2>
    <ol>
        <li>Check to see if the browser supports Geolocation</li>
        <li>Set the timeout to 15 seconds</li>
        <li>Try to get the user's current latitude and longitude</li>
        <li>If successful within the allotted time set the CSS class on the output DIV to "hit"</li>
        <li>If permission is denied to get coordinates set the CSS class on the output DIV to "targetting"</li>
        <li>If there is a failure for any reason other than permissions set the CSS class on the output DIV to "miss"</li>
        <li>If a location was successfully retrieved then display a message about success as well as the latitude and longitude</li>
        <li>If there was any type of error, display a message about the reason for the failure.</li>
    </ol>
    <div id="output">

    </div>
    <script>


        if('geolocation' in navigator){

        let geo = navigator.geolocation;

        if( geo ){
            let options = {
                enableHighAccuracy: true,
                timeout: 15000,

            }
            geo.getCurrentPosition(good, bad, options);
        }


        function good(pos){
            document.getElementById("output").classList.add('hit');
            console.log(pos);
            let div = document.getElementById('output');

            let ts = pos.timestamp;
            let timmy = new Date(ts);
            let str = timmy.toUTCString();
            let str2 = timmy.toLocaleDateString() + " " +
            timmy.toLocaleTimeString();


            div.textContent = `SUCCESS, we have your Geolocation! You are at
            ${pos.coords.latitude},
            ${pos.coords.longitude}
            `;
        }

        function bad(err){
            document.getElementById("output").classList.add('targetting');
            console.log(err);

            document.getElementById('output').textContent =
            err.message;

            switch(err.code){
                case 1:


                    break;
                case 2:


                    break;
                case 3:
                    let p = document.createElement('p');
                    p.textContent = "Failed to find geolocation, error"
                    document.body.appendChild(p);


            let div = document.getElementById('output');


            div.textContent = "Error, user took to long. Timeout exceeded";

                    break;
            }
        }

        }else{
            document.getElementById("output").classList.add('miss');
            div.textContent = "Error, browser doesnt support geolocation";
        }


    </script>
</body>
</html>