Having many troubles with weather project

So this has to be one of the most challenging projects I have ever done on this website. So far I am able to show the weather and the city but the problems I am having are:

  1. Getting icons and having them be able to show up during the different types of weather.
  2. Creating a button functionality that allows me to be able to switch from Fahrenheit to Celsius.

Like I am able to get the degree in Celsius but my main problem is creating a button that changes the type of units. I feel as if the project would’ve been better if there were an API we could use instead of search throughout the internet trying to find one.

BTW here is a link to my project:


Isn’t the OpenWeatherMap API suggested sufficient for both 1 & 2?

I used simple weather to get my weather data

I’m on the project as well, and no open weather isn’t sufficient as chrome won’t allow navigator anymore, so you can either use http and have openweather work but no navigator, or https and have the opposite (openweather requires payment for https). Which means you either use a proxy, none of which seem to work on codepen or use an api for your location, all of the ones I’ve found think I’m in a different country or miles away in a different city (I’m UK based).

To say it’s frustrating is an understatement!! Been driving me mental all evening…

Just get lat and long normally through https then proxy OpenWeather…

see link: https://codepen.io/RadDog25/pen/vmBvLd?editors=0010

Or better yet take the opportunity to move away from codepen.

What you’ve linked is exactly what I wanted to achieve, I tried your Codepen, but the console unfortunately just threw up a load of errors (below). I got the same every time I used a proxy. In theory it’s a great workaround though. I ended up using http for openweather and nesting the AJAX call in the success of an AJAX call to an IP Location site/API.

I’m keen to move away from using Codepen and just star using a text-editor (probably sublime), but presumably you would end up still uploading your code to Codepen to complete the challenge for FCC?

“reject is not defined” has probably to do with promises, are you sure you are using the latest technologies for promises or deferred (in jquery that’s their name)

Uhh, I used a promise to handle the event of the AJAX call failing, that is an artifact from my code, you can replace that with ‘console.log(error)’ or something. But that has nothing to do with why the AJAX call is failing - Will it looks like you didn’t insert your APPID key as I left that as “key goes here”.

Regarding using a text editor - you don’t need to upload to codepen, you could deploy to Github pages instead. I’ve also read that Surge is a good alternative.

Another thought regarding the degrees - you are already displaying the temperature in Fahrenheit. Earlier in FreeCodeCamp’s curriculum you completed a challenge to convert from Fahrenheit to Celsius and back again.

You can take that same approach but add a button on the page which takes care of the conversion for you - either reloading the data when the button is clicked but using a different algorithm to return the temperature, or (better, I think as it does not require another AJAX call), taking whatever data has already been returned and converting that, then replacing it on the page.

You have

var cel = (weather.temp -32) * 5/9;

in your JS code, so you already have what’s required. You could even load both and keep one hidden through CSS, then simply switch it on click.

As for the icons - once your API call to open weather map is successful, you may as well include a variable to grab OpenWeatherMap’s icons. Here’s some code to set an icon variable based on the AJAX call in JS, which you can then push to the appropriate HTML element:

var weatherIcon = ("<img src='http://openweathermap.org/img/w/" + weather.weather[0].icon + ".png'>"

Where weather.weather[0].icon will be the icon number that they would use and the link is where the image file is stored. It should work on any background.

Finally - my biggest suggestion whenever trying to deal with any of FreeCodeCamp’s AJAX challenges (or anything dealing with JSON) is to add the Chrome extension JSONView to your browser. You put the URL of your AJAX call into your navigation bar and it returns the full object in an organized view which makes it a lot easier to see what the subcategories of the JSON object are. There are so many compatibility difficulties between FCC, CodePen, https/http etc., that the first thing to ever check is whether you are even getting the right information in the first place.

Hope that helps!