daily pastebin goal
57%
SHARE
TWEET

Untitled

a guest Feb 13th, 2018 70 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Geolocation</title>
  6.     <meta name="viewport" content="width=device-width">
  7.     <style>
  8.         #output{
  9.             width: 300px;
  10.             height: 300px;
  11.             padding: 2rem;
  12.             font-size: 2rem;
  13.             line-height: 1.5;
  14.         }
  15.         .miss{
  16.             background-color: crimson;
  17.             color: white;
  18.         }
  19.         .targetting{
  20.             background-color: gold;
  21.             color:firebrick;
  22.         }
  23.         .hit{
  24.             background-color: greenyellow;
  25.             color: darkgreen;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <h1>Geolocation</h1>
  31.     <h2>Instructions</h2>
  32.     <ol>
  33.         <li>Check to see if the browser supports Geolocation</li>
  34.         <li>Set the timeout to 15 seconds</li>
  35.         <li>Try to get the user's current latitude and longitude</li>
  36.         <li>If successful within the allotted time set the CSS class on the output DIV to "hit"</li>
  37.         <li>If permission is denied to get coordinates set the CSS class on the output DIV to "targetting"</li>
  38.         <li>If there is a failure for any reason other than permissions set the CSS class on the output DIV to "miss"</li>
  39.         <li>If a location was successfully retrieved then display a message about success as well as the latitude and longitude</li>
  40.         <li>If there was any type of error, display a message about the reason for the failure.</li>
  41.     </ol>
  42.     <div id="output">
  43.        
  44.     </div>
  45.     <script>
  46.    
  47.        
  48.         if('geolocation' in navigator){
  49.        
  50.         let geo = navigator.geolocation;
  51.        
  52.         if( geo ){
  53.             let options = {
  54.                 enableHighAccuracy: true,
  55.                 timeout: 15000,
  56.                
  57.             }
  58.             geo.getCurrentPosition(good, bad, options);
  59.         }
  60.            
  61.        
  62.         function good(pos){
  63.             document.getElementById("output").classList.add('hit');
  64.             console.log(pos);
  65.             let div = document.getElementById('output');
  66.            
  67.             let ts = pos.timestamp;
  68.             let timmy = new Date(ts);
  69.             let str = timmy.toUTCString();
  70.             let str2 = timmy.toLocaleDateString() + " " +
  71.             timmy.toLocaleTimeString();
  72.            
  73.            
  74.            
  75.             div.textContent = `SUCCESS, we have your Geolocation! You are at
  76.             ${pos.coords.latitude},
  77.             ${pos.coords.longitude}
  78.             `;
  79.         }
  80.        
  81.         function bad(err){
  82.             document.getElementById("output").classList.add('targetting');
  83.             console.log(err);
  84.            
  85.             document.getElementById('output').textContent =
  86.             err.message;
  87.            
  88.             switch(err.code){
  89.                 case 1:
  90.                    
  91.                
  92.                     break;
  93.                 case 2:
  94.                    
  95.                    
  96.                     break;
  97.                 case 3:
  98.                     let p = document.createElement('p');
  99.                     p.textContent = "Failed to find geolocation, error"
  100.                     document.body.appendChild(p);
  101.                    
  102.                    
  103.             let div = document.getElementById('output');
  104.            
  105.            
  106.             div.textContent = "Error, user took to long. Timeout exceeded";
  107.                    
  108.                     break;
  109.             }
  110.         }
  111.        
  112.         }else{
  113.             document.getElementById("output").classList.add('miss');
  114.             div.textContent = "Error, browser doesnt support geolocation";
  115.         }
  116.        
  117.            
  118.        
  119.        
  120.        
  121.     </script>
  122. </body>
  123. </html>
RAW Paste Data
Top