Weather description range

Weather description range
0

#1

Hi everyone,

I searched the forums before posting and this documentation was linked in a few posts:

https://openweathermap.org/weather-conditions

However, it is not accurate. It’s foggy where I live today and the description says “Fog” whereas in the link above it is called “Mist”. Do you know where to find the exact list of description? I want to make if/else if statements that add a class named after the description.

Thank you for your help!
Jonathan


#2

I am confused about what you are having problems with. Is this chart not working?

Also, can you provide the JSON data you are getting?


#3

Thank you for your answer!

Basically, I would like to know 100% of the possible outcomes of the weather description coming from this API: https://fcc-weather-api.glitch.me/, this way I could change the background image based on this.

I made a research on the forums, some people were in my situation and were told to check the link I mentioned in my previous post. Unfortunately, the descriptions in this link (I am talking about the first table) do not match the ones available in the API.


#4

Thanks for replying! In the future, when replying to someone, be sure to hit the reply button at the bottom of their post, highlight some of their text and hit the quote button, or tag them like @JonSwish (just one, you don’t have to do all 3 :laughing:). Otherwise, they will not be notified, and they will have no idea that you replied to them unless they happen to look at the thread again like I did.

I have seen some other people using this api, but I cannot find where it came from or its documentation. Could you show me where you found it?

If the weather codes in this api do not match up with the ones on the OpenWeatherMap site, the api passthrough you are using may be using a different weather api. I checked the api you are using, and the weather descriptions seemed to match up. Could you provide a link to your project?

Also, if you want to be exact with every single code, you can always use the openweathermap api yourself instead of using the passthrough.


Edit: Also, could you be confusing the weather icon with the weather code? You mentioned the first table and mist and fog. Your api output is probably something like this:

// 20171107195133
// https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139

{
  "coord": {
    "lon": 139,
    "lat": 35
  },
  "weather": [
    {
      "id": 520,
      "main": "Rain",
      "description": "light intensity shower rain",
      "icon": "https://cdn.glitch.com/6e8889e5-7a72-48f0-a061-863548450de5%2F09d.png?1499366021170"
    }
  ],
  "base": "stations",
  "main": {
    "temp": 17.25,
    "pressure": 1019,
    "humidity": 71,
    "temp_min": 14,
    "temp_max": 20
  },
  "visibility": 10000,
  "wind": {
    "speed": 5.1,
    "deg": 230,
    "gust": 10.3
  },
  "clouds": {
    "all": 75
  },
  "dt": 1510103820,
  "sys": {
    "type": 1,
    "id": 7512,
    "message": 0.0084,
    "country": "JP",
    "sunrise": 1510089082,
    "sunset": 1510127017
  },
  "id": 1851632,
  "name": "Shuzenji",
  "cod": 200
}

the weather.id key-value, in this case 520, is referring to the weather condition code not the weather icon code. Don’t look at the first table on your first link; these are the image codes you can use. Under the first table are the various weather id codes that you could pattern your if/else (or switch) after.


#5

It comes from the challenge page actually: https://www.freecodecamp.org/challenges/show-the-local-weather

I have to run to work now, I’ll check again this evening and put my project on codepen :slight_smile: Thank you for your help!


#7

Here is my pen (work in progress): https://codepen.io/JonathanBnn/pen/dZOrXK

I am getting the description information from there:

      var weatherDetails = JSON.parse(weatherRequest.responseText);
      [...]
      weatherDescription = weatherDetails.weather[0].description;

Basically, I would like to know the possible outcomes of this part of the JSON element. Then I will use if/else statements to add a class for which the background is set to be a landscape reflecting the description.

Thank you, Issac :slight_smile:


#8

Thanks for the codepen link! What you are looking for is the weather ID. You can find this on your weatherDetails object:

iconURL = weatherDetails.weather[0].icon;      
weatherId = weatherDetails.weather[0].id; // ex: 800

Now, on your first website you mentioned, https://openweathermap.org/weather-conditions, look under “weather condition codes”. I’ll go ahead and take a picture of it, but it should look like below.






Obviously, you won’t want to write a statement for each code, because there are so many. I would suggest doing something like this:

if (weatherId >= 500 && weatherId < 600) doSomething(); // tut tut it looks like rain!
else if (weatherId >= 600 && weatherId < 700) doSomethingElse(); // a winter wonderland

Does that help?


#9

Yes, it helps a lot! I’ll create a function called ‘pickBackground()’ to do that and call in in my main function. Thank you @IsaacAbrahamson (I used all 3 in the end :sunglasses:)


#10

I feel that my project is submittable now! Thank you very much!

https://codepen.io/JonathanBnn/pen/dZOrXK

The background changes dynamically depending on the weather (but not depending on the time of the day, it could have been done by nesting an if/else statement for each category). All pictures are copyright free and there’s a link to the author’s Unsplash page :slight_smile:

I didn’t set a background for the special cases, there are like 15 of them and I feel like it’s not adding much value; if I can do something 7 times I can do it 15 times.