<h4 dir="auto">Challenge Name</h4>

<p dir="auto"><a href="http://codepen.io/Lihkinrian/pen/evOgVr?editors=0010" rel="nofollow">http://codepen.io/Lihkinrian/pen/evOgVr?editors=0010</a></p>
<h4 dir="auto">Issue Description</h4>

<p dir="auto">When i use <a href="http://codepen.io" rel="nofollow">http://codepen.io</a>  i am getting an error "getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See <a href="https://goo.gl/rStTGz" rel="nofollow">https://goo.gl/rStTGz</a> for more details."  i am using http for both the request url and request origin url. But when i use https for the request origin url i.e the <a href="https://codepen.io//Lihkinrian/pen/evOgVr?editors=0010" rel="nofollow">https://codepen.io//Lihkinrian/pen/evOgVr?editors=0010</a>   and http for the api   i get "Mixed Content: The page at '<a href="https://codepen.io/Lihkinrian/pen/evOgVr?editors=0010" rel="nofollow">https://codepen.io/Lihkinrian/pen/evOgVr?editors=0010</a>' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint '<a href="http://api.openweathermap.org/data/2.5/weather?lat=10.0090639&amp;lon=76.3614448&amp;&amp;appid=39809327b8276ac16891fe71210a0291" rel="nofollow">http://api.openweathermap.org/data/2.5/weather?lat=10.0090639&amp;lon=76.3614448&amp;&amp;appid=39809327b8276ac16891fe71210a0291</a>'. This request has been blocked; the content must be served over HTTPS.".</p>
<h4 dir="auto">Browser Information</h4>

<ul dir="auto">
<li>Browser Name, Version: Chrome v56</li>
<li>Operating System: windows 10</li>
<li>Mobile, Desktop, or Tablet: laptop</li>
</ul>
<h4 dir="auto">Your Code</h4>

<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="
function getWeatherData() {    navigator.geolocation.getCurrentPosition(function(position) {
        var lat = position.coords.latitude,
            lon = position.coords.longitude,
            url = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&amp;lon=' + lon + '&amp;&amp;appid=39809327b8276ac16891fe71210a0291';     
      $.getJSON(url, function(data) {
          console.log(data);
      });    
    });
}

$(document).ready(function() {
    getWeatherData();
});

"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-en">getWeatherData</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>    <span class="pl-s1">navigator</span><span class="pl-kos">.</span><span class="pl-c1">geolocation</span><span class="pl-kos">.</span><span class="pl-en">getCurrentPosition</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">position</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">var</span> <span class="pl-s1">lat</span> <span class="pl-c1">=</span> <span class="pl-s1">position</span><span class="pl-kos">.</span><span class="pl-c1">coords</span><span class="pl-kos">.</span><span class="pl-c1">latitude</span><span class="pl-kos">,</span>
            <span class="pl-s1">lon</span> <span class="pl-c1">=</span> <span class="pl-s1">position</span><span class="pl-kos">.</span><span class="pl-c1">coords</span><span class="pl-kos">.</span><span class="pl-c1">longitude</span><span class="pl-kos">,</span>
            <span class="pl-s1">url</span> <span class="pl-c1">=</span> <span class="pl-s">'http://api.openweathermap.org/data/2.5/weather?lat='</span> <span class="pl-c1">+</span> <span class="pl-s1">lat</span> <span class="pl-c1">+</span> <span class="pl-s">'&amp;lon='</span> <span class="pl-c1">+</span> <span class="pl-s1">lon</span> <span class="pl-c1">+</span> <span class="pl-s">'&amp;&amp;appid=39809327b8276ac16891fe71210a0291'</span><span class="pl-kos">;</span>     
      <span class="pl-s1">$</span><span class="pl-kos">.</span><span class="pl-en">getJSON</span><span class="pl-kos">(</span><span class="pl-s1">url</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
          <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>    
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">ready</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-en">getWeatherData</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
</pre></div>
<h4 dir="auto">Screenshot</h4>
<h4 dir="auto">Show the Local Weather</h4>

<p dir="auto"><a href="https://www.freecodecamp.com/challenges/show-the-local-weather" rel="nofollow">https://www.freecodecamp.com/challenges/show-the-local-weather</a></p>
<h4 dir="auto">Weather App Location issue</h4>

<p dir="auto">I am currently using Google chrome and I have been trying to figure out why my location could not be found when I copied the exact code from FCC and placed it in Codepen.io. After a week of fighting I asked for help and I learn that I had to use https:// so I can find my location. The second issue is that when I tried to pass this location to the Weather API it would not work, so I asked the community again and I learn that the FCC given locator will not work when we pass the location to the weather API. Could you please add a side note to the other codes as a heads up so that they don't end up beating their computer with a baseball bat?</p>
<h4 dir="auto">Browser Information</h4>

<ul dir="auto">
<li>Browser Name, Version: Google Chrome Version 51.0.2704.84 m</li>
<li>Operating System: Windows 10</li>
<li>Mobile, Desktop, or Tablet: Desktop</li>
</ul>
<h4 dir="auto">Your Code</h4>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// If relevant, paste all of your challenge code in here
"><pre class="notranslate"><span class="pl-c">// If relevant, paste all of your challenge code in here</span></pre></div>
<h4 dir="auto">Screenshot</h4>