Weather App

index.html

<div id="container">    
  <div id="content">    
  </div>
  <button id="toggleCelsiusFahrenheit">Celsius</button>   
  <button id="getWeather">Reload</button>
</div>

script.js

// HELPER
remember = o => localStorage.setItem( Object.keys(o)[0], o[Object.keys(o)[0]] ) || o[Object.keys(o)[0]];
recall = o => localStorage.getItem(o) || "" + o;
parseJson = (json, cbs) => cbs.map(cb => cb.call(null, json));
tagName = (definition) => definition.match(/^\w+/)[0];
tag = (def, content) => "<" + def + ">" + content + "</" + tagName(def) + ">";
// END HELPER

// MODEL
url = (lat, lng) => "https://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lng + "&APPID=f32e9003c71b07e9b8718096f8cd2ad3";

getLoc = (cb) => navigator.geolocation.watchPosition(cb);

//getWeather = (cb) => getLoc( (p) => $.getJSON(url(p.coords.latitude, p.coords.longitude), cb));
getWeather = (cb) => $.getJSON(url(20, 52), cb);

celsius = (kelvin) => 12;

fahrenheit = (kelvin) => 12;

// END MODEL

// UI
updateContainer = (json) => parseJson(json, [
  (j) => $("#city").html(remember({city:json.name})),
  (j) => $("#celsius").html(celsius(remember({temp:json.main.temp})) + "C°"),
  (j) => $("#icon").attr("src", "http://openweathermap.org/img/w/" + remember({icon:j.weather[0].icon}) + ".png")
]);

setupContent = () => $("#content").html(
  tag("p id='city'", recall("city")) + 
  tag('img id="icon" src="' + "http://openweathermap.org/img/w/" + recall("icon") + ".png" + '"', "") + 
  tag('p', tag('big id="celsius"', celsius(recall("temp")) + " C°")) +
  tag('p', tag('big id="fahrenheit"',"-") ));

// END UI

// MAIN

$(document).ready(function() {
  setupContent();
  //getWeather(2, -49, updateContainer);
  $("#getWeather").on("click", () => getWeather(updateContainer));
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

style.css

body {
  font-family: Monospace;
}

#container {
  text-align: center;
  width: 300px;
  margin:0 auto;
  margin-top: 200px;
  border: 0px solid grey;
  border-radius: 30px;
  padding: 20px;
  background-color: grey;
  color: white;
  font-size: 1.5em;
}

button {
  margin: 0 auto;
  display: block;
  margin-top: 20px;
  background-color: white;
  border: none;
  border-radius: 5px;
  color: grey;
  font-family: Monospace;
  font-size: 1em;
  padding: 5px;
  text-decoration:none;
}

#fahrenheit {
  display: none;
}

Weather App.markdown

Weather App

A Pen by Matthias Hennemeyer on CodePen.

License.