A Pen by Atanas B Dachenski

Thumbnail
This awesome code was written by adachenski, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright adachenski ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <html>

<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">
  <title>Geolocation</title>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

</head>

<body onload="initialize()">
  <div class="main-container">
    <div id='main-address'>

    </div>
    <div>
      <div id="weather-img">
        <h2>Pleace Accept the conditions above</h2>
      </div>
      <div>
        <button onclick="convertUnits()">Convert Units</button>
      </div>

      <div class="left-info general-info" id='stats-usa'>Tempreture</div>
      <div class="left-info general-info" style="display:none" id="stats-europa">Nothing to see</div>
      <div class="right-info general-info" id='stats-two'>General info</div>
      <div style="clear:both"></div>
    </div>
  </div>

</body>

</html>

/*Downloaded from https://www.codeseek.co/adachenski/a-pen-by-atanas-b-dachenski-EXKgVY */
    body {
        background-image: url('https://lh3.googleusercontent.com/PWL_r_v2760JdZ_w9d5r97yGchDvYisMoeYsJ-1-wzA0hYspRa6sZSwbl6i6JTSl0w=h900');
        background-position: center top;
        background-size: 100% auto;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    
    .main-container {
        text-align: center;
        margin: 7% auto;
        background-color: lightgray;
        opacity: 0.8;
        /* margin: 10%; */
        padding: 3%;
        width: 330px;
    }
    
    @media screen and (max-width: 400px) {
        .main-container {
            width: 280px;
        }
        .general-info {
            font-size: 1em;
            width: 120px !important;
        }
    }
    
    .main-container:hover {
        animation-name: thumbTilt;
        animation-duration: 1s;
        animation-fill-mode: both;
        transition-timing-function: ease-in;
        -webkit-animation-name: thumbTilt;
        -webkit-animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        -webkit-transition-timing-function: ease-in;
    }
    
    @keyframes thumbTilt {
        0% {
            transform: scale(1);
        }
        20% {
            transform: perspective(400px) scale(1.1);
        }
        100% {
            transform: perspective(400px) scale(1.2);
        }
    }
    
    .left-info {
        float: left;
    }
    
    .general-info {
        font-size: 1.1em;
        background-color: lightslategrey;
        color: white;
        padding: 10px;
        width: 140px;
    }
    
    .right-info {
        float: right;
    }
    
    button {
        padding: 5px 10px;
        background-color: darkcyan;
        color: aliceblue;
        font-weight: 500;
        border: 0;
        letter-spacing: 1px;
        border: 1px solid transparent;
        border-radius: 4px;
        white-space: nowrap;
        vertical-align: middle;
        margin-bottom: 10px;
    }
    button:hover{
      cursor:pointer;
    }


/*Downloaded from https://www.codeseek.co/adachenski/a-pen-by-atanas-b-dachenski-EXKgVY */
    var geocoder;

if (navigator.geolocation) {
  //document.getElementById('main-container').style.display = 'none';
  navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
//Get the latitude and the longitude;
function successFunction(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  codeLatLng(lat, lng)
}

function errorFunction() {
   var bodyObj = document.getElementsByTagName("BODY")[0];
  bodyObj.style.backgroundImage = "url('http://hdqwalls.com/wallpapers/404-error-girlfriend-not-found.jpg')";
  alert("Geocoder failed");
}

function initialize() {
  geocoder = new google.maps.Geocoder();

}

function codeLatLng(lat, lng) {

  var latlng = new google.maps.LatLng(lat, lng);
  geocoder.geocode({ 'latLng': latlng }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      console.log(results)
      if (results[1]) {
        //formatted address
        // alert(results[0].formatted_address)
        //find country name
        for (var i = 0; i < results[0].address_components.length; i++) {
          for (var b = 0; b < results[0].address_components[i].types.length; b++) {

            //there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
            if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
              //this is the object you are looking for
              city = results[0].address_components[i];
              break;
            }
          }
        }
        //city data
        document.getElementById('main-address').innerHTML = "<h2>" + results[5].formatted_address + "</h2>";
        asincWether();
        // alert(city.short_name + " " + city.long_name)


      } else {
        alert("No results found");
      }
    } else {
      alert("Geocoder failed due to: " + status);

    }
  });
};

function asincWether() {
  var xhr = new XMLHttpRequest();
  var arr = document.getElementById('main-address').innerText;
  var city = arr.split(',');
  console.log(city);
  xhr.open("GET", "https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?q=" + city[0] + "&APPID=16b7c694b7b650ee8f7ceb88c85afc71", true);
  xhr.onload = function (e) {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        var x = JSON.parse(xhr.responseText);
        var tempToFahrenheit = parseInt(JSON.stringify(x.main.temp) * (9 / 5) - 459.67);
        var tempToCelsius = parseInt(tempToFahrenheit - 32 * (5 / 9));
        var bodyObj = document.getElementsByTagName("BODY")[0];
        if (tempToCelsius > 5 && tempToCelsius < 20) {
          bodyObj.style.backgroundImage = "url('https://s-media-cache-ak0.pinimg.com/originals/bf/4d/09/bf4d0933bf5b3b2b106ba995d25121ff.jpg')";
        }
        else if (tempToCelsius > 20) {
          bodyObj.style.backgroundImage = "url('https://wallpaperscraft.com/image/spring_alpine_valley_mountains_fields_landscape_93132_1920x1080.jpg')";
        }
        else if (tempToCelsius < 5) {
          bodyObj.style.backgroundImage = "url('http://vunature.com/wp-content/uploads/2016/11/mountains-clouds-landscapes-cold-sun-winter-snow-sunlight-forest-sky-seasons-white-trees-nature-pictures-national-geographic-1920x1080.jpg')";
        }
        var humidity = x.main.humidity;
        var windMPH = parseInt(JSON.stringify(x.wind.speed) * 360000 / (5280 * 12 * 2.54));
        var windKPH = parseInt(windMPH * 1.609344);
        var weatherImg = x.weather[0].icon;
        var description = x.weather[0].description;
        console.log(x);
        document.getElementById('weather-img').innerHTML = "<img " + '<img  src="http://openweathermap.org/img/w/' + weatherImg + '.png">';
        document.getElementById('stats-usa').innerHTML = "Temp: " + tempToFahrenheit + " F</br> Wind: " + windMPH + " mph";
        document.getElementById('stats-europa').innerHTML = "Temp: " + tempToCelsius + " C</br> Wind: " + windKPH + " kph";
        document.getElementById('stats-two').innerHTML = "humidity: " + humidity + " % </br>" + description;
      } else {
        console.error(xhr.statusText);
      }
    }
  };
  xhr.onerror = function (e) {
    console.error(xhr.statusText);
  };
  xhr.send(null);
}
function convertUnits() {
  var statsUsa = document.getElementById('stats-usa');
  var statsEuropa = document.getElementById('stats-europa');

  if (statsUsa.style.display == 'none' && statsEuropa.style.display == 'block') {
    statsUsa.style.display = 'block';
    statsEuropa.style.display = 'none'
  }
  else {
    statsUsa.style.display = 'none';
    statsEuropa.style.display = 'block';
  }
}

Comments