cmac4603/fCC: Show the Local Weather.markdown

## fCC: Show the Local Weather.markdown

      
    Raw
  

              fCC: Show the Local Weather.markdown
            
          
    fCC: Show the Local Weather

Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/bELoPJ.
Rule #1: Don't look at the example project's code. Figure it out for yourself.
Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.
User Story: I can click a button to show me a new random quote.
User Story: I can press a button to tweet out a quote.
Remember to use Read-Search-Ask if you get stuck.
When you are finished, click the "I've completed this challenge" button and include a link to your CodePen. 
You can get feedback on your project from fellow campers by sharing it in our Code Review Chatroom. You can also share it on Twitter and your city's Campsite (on Facebook).

A Pen by Colin MacRae on CodePen.
License.

  
## index.html
<body>

  <div class="main">
    <div class="container">

      <div class="header">
        <h1>My Weather App</h1>
      </div>

      <div class="info">
        <div class="container-fluid">
        <div class="row">

          <div class="col-md-4 col-xs-4">
            <div id="city">
            </div>
          </div>

          <div class="col-md-4 col-xs-4">
            <div id="weather">
              <div id="wx-icon">
              </div>
              <div id="wx">
              </div>
            </div>
          </div>

          <div class="col-md-4 col-xs-4">
            <div id="temp">
            <button id="tempchange"></button>
            </div>
            <div id="clickme">
              <p><img src="http://drumbum.com/drumtabs/images/sidebar_arrow.png">click me!<p>
            </div>
          </div>

        </div>
        </div>
      </div>

      <div class="byauthor">
        <p>Brought to you by <a href="https://www.github.com/cmac4603">cmac4603</a></p>
      </div>

    </div>
  </div>

</body>

## script.js
$(document).ready(function(){
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var url = "http://api.openweathermap.org/data/2.5/weather?lat="
      + position.coords.latitude + "&lon="
      + position.coords.longitude
      + "&apikey=fa7813518ed203b759f116a3bac9bcce";

      $.getJSON(url, function(json) {
          $(function() {
          $("#city").html((JSON.stringify(json.name + ", "
                                        + json.sys.country).replace(/\"/g, "")))

          $("#wx").html(JSON.stringify((json.weather[0].main)).replace(/\"/g, ""));
          $("#wx-icon").html("<img style='height:80px;' src='http://openweathermap.org/img/w/"
                        + json.weather[0].icon + ".png'/>")


      var tempC = json.main.temp-273.15;
      var tempF = json.main.temp * (9/5) - 459.67;

      $("#tempchange").html(JSON.stringify((tempC).toFixed(1)).replace(/\"/g, "") + "&deg;C")

      $('#tempchange').click(function() {
        if ($(this).text().charAt(5) == "C") {
          $(this).html(JSON.stringify((tempF).toFixed(1)).replace(/\"/g, "") + "&degF");
        }
        else {
          $(this).html(JSON.stringify((tempC).toFixed(1)).replace(/\"/g, "") + "&deg;C");
        };
      });
    });
  });
});
};
});

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

## style.css
body {
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #34495E;
  color: white;
  font-family: 'Raleway', sans-serif;
}

h1 {
  font-size: 60px;
}

.row {
  padding: 30px 0;
}

.col-md-4,
.col-xs-4 {
  min-width: 230px;
  padding: 10px 0;
}

#city,
#weather,
#temp {
  height: 200px;
  width: 200px;
  margin: 0 auto;
  border: 5px solid white;
  border-radius: 50%;
  font-size: 25px
}

#city {
  background-color: #27AE61;
  padding-top: 80px;
}

#weather {
  background-color: #96A6A6;
}

#wx-icon {
  padding-top: 40px;
}

#wx {
  margin-top: -20px;
}

#temp {
  background-color: #E77E23;
  padding-top: 65px;
  font-size: 40px;
}

#tempchange {
  background-color: transparent;
  border: none;
}

#clickme {
  padding-left: 150px;
}

p img {
  height:20px;
}

## styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway:600" rel="stylesheet" />
	<body>

	<div class="main">
	<div class="container">

	<div class="header">
	<h1>My Weather App</h1>
	</div>

	<div class="info">
	<div class="container-fluid">
	<div class="row">

	<div class="col-md-4 col-xs-4">
	<div id="city">
	</div>
	</div>

	<div class="col-md-4 col-xs-4">
	<div id="weather">
	<div id="wx-icon">
	</div>
	<div id="wx">
	</div>
	</div>
	</div>

	<div class="col-md-4 col-xs-4">
	<div id="temp">
	<button id="tempchange"></button>
	</div>
	<div id="clickme">
	<p><img src="http://drumbum.com/drumtabs/images/sidebar_arrow.png">click me!<p>
	</div>
	</div>

	</div>
	</div>
	</div>

	<div class="byauthor">
	<p>Brought to you by <a href="https://www.github.com/cmac4603">cmac4603</a></p>
	</div>

	</div>
	</div>

	</body>
	$(document).ready(function(){
	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(function(position) {
	var url = "http://api.openweathermap.org/data/2.5/weather?lat="
	+ position.coords.latitude + "&lon="
	+ position.coords.longitude
	+ "&apikey=fa7813518ed203b759f116a3bac9bcce";

	$.getJSON(url, function(json) {
	$(function() {
	$("#city").html((JSON.stringify(json.name + ", "
	+ json.sys.country).replace(/\"/g, "")))

	$("#wx").html(JSON.stringify((json.weather[0].main)).replace(/\"/g, ""));
	$("#wx-icon").html("<img style='height:80px;' src='http://openweathermap.org/img/w/"
	+ json.weather[0].icon + ".png'/>")


	var tempC = json.main.temp-273.15;
	var tempF = json.main.temp * (9/5) - 459.67;

	$("#tempchange").html(JSON.stringify((tempC).toFixed(1)).replace(/\"/g, "") + "°C")

	$('#tempchange').click(function() {
	if ($(this).text().charAt(5) == "C") {
	$(this).html(JSON.stringify((tempF).toFixed(1)).replace(/\"/g, "") + "&degF");
	}
	else {
	$(this).html(JSON.stringify((tempC).toFixed(1)).replace(/\"/g, "") + "°C");
	};
	});
	});
	});
	});
	};
	});
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
	body {
	margin: 0;
	padding: 0;
	text-align: center;
	background-color: #34495E;
	color: white;
	font-family: 'Raleway', sans-serif;
	}

	h1 {
	font-size: 60px;
	}

	.row {
	padding: 30px 0;
	}

	.col-md-4,
	.col-xs-4 {
	min-width: 230px;
	padding: 10px 0;
	}

	#city,
	#weather,
	#temp {
	height: 200px;
	width: 200px;
	margin: 0 auto;
	border: 5px solid white;
	border-radius: 50%;
	font-size: 25px
	}

	#city {
	background-color: #27AE61;
	padding-top: 80px;
	}

	#weather {
	background-color: #96A6A6;
	}

	#wx-icon {
	padding-top: 40px;
	}

	#wx {
	margin-top: -20px;
	}

	#temp {
	background-color: #E77E23;
	padding-top: 65px;
	font-size: 40px;
	}

	#tempchange {
	background-color: transparent;
	border: none;
	}

	#clickme {
	padding-left: 150px;
	}

	p img {
	height:20px;
	}
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
	<link href="https://fonts.googleapis.com/css?family=Raleway:600" rel="stylesheet" />