WeatherAPI background problem


Hi guys, I have a lot of question about the way that my background response to the specific icon range I have setup but someway it doesn’t get it, the site just get the default case which is the last else in my loop, could you guys take a look at my code to check if what’s wrong, Thank you guys so much.

I have a lot of questions about the way that my background response to the specific icon range

Let them out or that won’t fasten your process of learning.


First, I see you’re trying to use regular expressions to solve your problem by converting your number to a string then using a strict equality check against your regex. You got 2 errors to start with:

Your Regex format:

/[801-804]/g

Is not doing what you think it does. Regex in a sense, cannot count integers.
Always treat regex as if you’re checking for string characters, not any other data type.

Therefore, in order to check for characters "801", "802", "803", and "804":

/(80[1-4])/

Breakdown =>
  (...) = Anything inside parentheses will be treated as one.
  [a-b] = From character code range  "a" to "b".

Use test() for Regex equality:

Next, JavaScript is not that nice to let you check regex on the go using a strict equality.

To check a regex and have a boolean returned to you, use the test method:


let regex = /(80[1-4])/;

regex.test(weatherData.weather[0].id.toString());
// => Will return true or false depending on the ID value.

So that’s it for what went wrong.


Doing it with a better practice:

You got an integer data type, which “understands” numbers. Therefore, there is no need to convert it to a string and use Regex in your current situation. Instead, why not use a comparison operator such as greater than (>) or less than (<)?

What is:

let regex = /(80[1-4])/;
let id = weatherData.weather[0].id.toString();
if (regex.test(id)) {}

Can be:

if (id>800 && id<805) {}

In most situations it will be faster, and more readable.


Further reading:

1 Like

Oh wow, thank you so much. Man this regex thing is really hard to master it. I though it was just simple that you just declare it in certain range such like my code [801 - 804] it will know exactly what to do.

and U-man might I ask is that why I cannot apply my google fonts into my pen?

Why I cannot apply my google fonts into my pen?

Codepen.io works a bit differently than other editors. You should not include the <head> tag and its content inside your HTML panel and you should not include the <body> tag. Whatever inside your HTML panel is treated as if it’s inside your <body> tag.

Everything necessary inside your <head> should be moved to the settings option panel.
After doing that, the issue you’re experiencing should be resolved.

Learn more about Adding External Resources in codepen.