Local Weather

index.html

<div class="container-fluid text-center">
  &nbsp;
  <h1 id="title" style="color: #ffffff;">Yer Locil Wethr</h1>
  <div class="white">
<h3>
  <span id='icon'><img src="https://cdn.glitch.com/6e8889e5-7a72-48f0-a061-863548450de5%2F10n.png?1499366021399"></span>
    <h2><span id="city">Somewhere,</span><span id="country"> OT</span></h2>
  <h3><span id="temp">100</span>&nbsp;<button id="metr-toggle" class="btn btn-secondary">C</button>&nbsp;&nbsp;|&nbsp;&nbsp;<span id="desc">Rain</span><span id="tempfar"></span>
    </h3>
    </div></div>
  <p class="text-center">Click on the letter next to the temperature to switch from celsius to farenheit and back!</p>
    </div>

local-weather.markdown

Local Weather

Gets the local weather info - ol' school style!

A Pen by Jacob / Yaakov Shore on CodePen.

License.

script.js

var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

function success(pos) {
  var crd = pos.coords;
  lat = Math.round(crd.latitude * 100) / 100;
  lon = Math.round(crd.longitude * 100) / 100;
  var url = `https://fcc-weather-api.glitch.me/api/current?lat=${lat}&lon=${lon}`;

console.log(url);
  $.ajax({
    url: url, success: function (result) {
      $("#city").text(result.name + ", ");
      $("#country").text(result.sys.country);
      currentTempCelsius = Math.round(result.main.temp * 10) / 10;
      currentTempFarenheit = Math.round((result.main.temp * (9/5) + 32) * 10) / 10;
      $("#temp").text(currentTempCelsius + String.fromCharCode(176));
      $("#desc").text(result.weather[0].main);
      $("#icon").html("<img src='" + result.weather[0].icon + "' alt='" + result.weather[0].description +"'>");
      var clvr;
    switch(result.weather[0].main){
      case "Clouds":
        clvr = "A chance of meatballs!";
        break;
      case "Rain":
        clvr = "Yikes! It's rainin' out thair!";
        break;
      case "Drizzle":
        clvr = "Kinda wet out.";
        break;
      case "Snow":
        clvr = "Let's make a snow man!";
        break;
      case "Thunderstorm":
        clvr = "Don't go standin' under no trees! ZZZAP!";
        break;
      case "Mist":
        clvr = "To find truth, one must traverse a dense fog.";
        break;
      case "Clear":
        clvr = "Nice wethr wir gettin', eh?";
        break;
      case "Cold":
        clvr = "Brrr! I caint feel mi fingers!";
        break;
    }
       $("#title").text(clvr);
    }
         
  });  
  
  $("#metr-toggle").click(function(){
    if($('#temp').text() == currentTempCelsius + String.fromCharCode(176)){
    $("#temp").text(currentTempFarenheit + String.fromCharCode(176));
    $(this).text("F")
    } else {
      $("#temp").text(currentTempCelsius + String.fromCharCode(176));
      $(this).text("C")
    }
    ;
  });
  
 

};

function error(err) {
  console.warn(`ERROR(${err.code}): ${err.message}`);
  
 
};

navigator.geolocation.getCurrentPosition(success, error, options);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&subset=cyrillic,cyrillic-ext,greek,latin-ext');
*{
  font-family: 'Press Start 2P', 'Courier';
}

img {
  image-rendering: pixelated;
  width: 150px;
}

body {
  background-color: #1AA701;
}

.white {
  margin: 20px;
padding: 50px;
background-color: black;
  color: white;
  border-radius: 10px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />