mukkachaitanya/Weather App.markdown

## index.html
<body>
  <div class="container-fluid">
  <div id="card" class="jumbotron">

    <div class="row">
      <div id="location">
          <h2>
            <span id="city_name"></span>,
            <span id="country"></span>
            <i id="home-icon" class="fa fa-home"></i>
            <a href="#" id="fc"><span class="pull-right">F|C</span></a>
        </h2>
      </div>
    </div>
    <br />
    <div class="row">
      <div class="col-md-4 text-center">
        <h1>
          <span id="temp"></span>°
        </h1>
      </div>

      <div class="col-md-4">
        <h1 class="text-center">
          <i id="weather-icon"></i>
        </h1>
      </div>

      <div class="col-md-4 text-center">
        <div class="col-s-6">
          <h3>
            <span id="min"></span>° MIN
          </h3>
        </div>
        <div class="col-s-6">
          <h3>
            <span id="max"></span>° MAX
          </h3>
        </div>
      </div>

    </div>

  </div>
  </div>

</body>

## script.js
var lat = "",
  log = "",
  cityName = "",
  country = "",
  temp, minTemp, maxTemp, iconID;
var unit = "metric";

function setVal() {
  $("#city_name").text(cityName);
  $("#country").text(country);
  $("#temp").text(temp);
  $("#min").text(minTemp);
  $("#max").text(maxTemp);

  iconsJSON = "https://gist.githubusercontent.com/tbranyen/62d974681dea8ee0caa1/raw/3405bfb2a76b7cbd90fde33d8536f0cd13706955/icons.json";

  $.getJSON(iconsJSON, function(weatherIcons) {
    console.log(JSON.stringify(weatherIcons));
    var prefix = 'wi wi-';
    var code = iconID;
    var icon = weatherIcons[code].icon;

    // If we are not in the ranges mentioned above, add a day/night prefix.
    if (!(code > 699 && code < 800) && !(code > 899 && code < 1000)) {
      icon = 'day-' + icon;
    }

    // Finally tack on the prefix.
    icon = prefix + icon;
    console.log(icon);
    $("#weather-icon").addClass(icon);

  });

}

function getVal() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      lat = position.coords.latitude.toFixed(1).toString();
      log = position.coords.longitude.toFixed(1).toString();
      console.log(lat);
      console.log(log);
      var apiID = "af0518ddcd38616ad465c1f015fe82e3";

      var apiCall = "http://api.openweathermap.org/data/2.5/weather?"
      apiCall += "lat=" + lat;
      apiCall += "&lon=" + log;
      apiCall += "&units=" + unit;
      apiCall += "&APPID=" + apiID;

      console.log(apiCall);

      $.getJSON(apiCall, function(json) {
        cityName = json.name;
        country = json.sys.country;
        temp = Math.round(json.main.temp);
        minTemp = Math.round(json.main.temp_min);
        maxTemp = Math.round(json.main.temp_max);
        iconID = json.weather[0].id;
        console.log(cityName, country, temp, minTemp, maxTemp, iconID);
        setVal();
      });

    });
  }
}

function changeVal(){

  var exh ;

  if(unit == "metric"){
    unit = "imperial";
    exh = function(val){
      return val* 9 / 5 + 32;
    };
  }
  else{
    unit = "metric";
    exh = function(val){
      return val;
    };
  }


  $("#temp").text(Math.round(exh(temp)));
  $("#min").text(Math.round(exh(minTemp)));
  $("#max").text(Math.round(exh(maxTemp)));
}


$(document).ready(function() {
  getVal();

  $("#fc").on("click", changeVal);

});

## scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

## style.css
body{
  background-color: #37474F;
}

#card{
  background-color: #F5F5F5;
  margin: 5em 7% ;
  color: #37474F;
}

.row{
  padding: 0.5em 1em 1em 1em;
}


## styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />

## Weather App.markdown

      
    Raw
  

              Weather App.markdown
            
          
    Weather App

A Pen by Chaitanya Mukka on CodePen.
License.
	<body>
	<div class="container-fluid">
	<div id="card" class="jumbotron">

	<div class="row">
	<div id="location">
	<h2>
	<span id="city_name"></span>,
	<span id="country"></span>
	<i id="home-icon" class="fa fa-home"></i>
	<a href="#" id="fc"><span class="pull-right">F\|C</span></a>
	</h2>
	</div>
	</div>
	<br />
	<div class="row">
	<div class="col-md-4 text-center">
	<h1>
	<span id="temp"></span>°
	</h1>
	</div>

	<div class="col-md-4">
	<h1 class="text-center">
	<i id="weather-icon"></i>
	</h1>
	</div>

	<div class="col-md-4 text-center">
	<div class="col-s-6">
	<h3>
	<span id="min"></span>° MIN
	</h3>
	</div>
	<div class="col-s-6">
	<h3>
	<span id="max"></span>° MAX
	</h3>
	</div>
	</div>

	</div>

	</div>
	</div>

	</body>
	var lat = "",
	log = "",
	cityName = "",
	country = "",
	temp, minTemp, maxTemp, iconID;
	var unit = "metric";

	function setVal() {
	$("#city_name").text(cityName);
	$("#country").text(country);
	$("#temp").text(temp);
	$("#min").text(minTemp);
	$("#max").text(maxTemp);

	iconsJSON = "https://gist.githubusercontent.com/tbranyen/62d974681dea8ee0caa1/raw/3405bfb2a76b7cbd90fde33d8536f0cd13706955/icons.json";

	$.getJSON(iconsJSON, function(weatherIcons) {
	console.log(JSON.stringify(weatherIcons));
	var prefix = 'wi wi-';
	var code = iconID;
	var icon = weatherIcons[code].icon;

	// If we are not in the ranges mentioned above, add a day/night prefix.
	if (!(code > 699 && code < 800) && !(code > 899 && code < 1000)) {
	icon = 'day-' + icon;
	}

	// Finally tack on the prefix.
	icon = prefix + icon;
	console.log(icon);
	$("#weather-icon").addClass(icon);

	});

	}

	function getVal() {
	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(function(position) {
	lat = position.coords.latitude.toFixed(1).toString();
	log = position.coords.longitude.toFixed(1).toString();
	console.log(lat);
	console.log(log);
	var apiID = "af0518ddcd38616ad465c1f015fe82e3";

	var apiCall = "http://api.openweathermap.org/data/2.5/weather?"
	apiCall += "lat=" + lat;
	apiCall += "&lon=" + log;
	apiCall += "&units=" + unit;
	apiCall += "&APPID=" + apiID;

	console.log(apiCall);

	$.getJSON(apiCall, function(json) {
	cityName = json.name;
	country = json.sys.country;
	temp = Math.round(json.main.temp);
	minTemp = Math.round(json.main.temp_min);
	maxTemp = Math.round(json.main.temp_max);
	iconID = json.weather[0].id;
	console.log(cityName, country, temp, minTemp, maxTemp, iconID);
	setVal();
	});

	});
	}
	}

	function changeVal(){

	var exh ;

	if(unit == "metric"){
	unit = "imperial";
	exh = function(val){
	return val* 9 / 5 + 32;
	};
	}
	else{
	unit = "metric";
	exh = function(val){
	return val;
	};
	}


	$("#temp").text(Math.round(exh(temp)));
	$("#min").text(Math.round(exh(minTemp)));
	$("#max").text(Math.round(exh(maxTemp)));
	}


	$(document).ready(function() {
	getVal();

	$("#fc").on("click", changeVal);

	});
	body{
	background-color: #37474F;
	}

	#card{
	background-color: #F5F5F5;
	margin: 5em 7% ;
	color: #37474F;
	}

	.row{
	padding: 0.5em 1em 1em 1em;
	}
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css" rel="stylesheet" />
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />