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:
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.