Need help with weather App

1

hello guys, I’m kind of stuck and need your help, my issue is with jquery attr method. I’m trying to change icon depending on icon value I get from weather api…( I do get a proper value) here is a function which should change img src according to icon argument:

function changeIcon(icon){
var iconClear_Sky = “https://res.cloudinary.com/dviy2q8nb/image”;
var iconClear_Sky_Night = “https://res.cloudinary.com/dviy2q8nb/image”;
var iconRain = “https://res.cloudinary.com/dviy2q8nb/image”;
var iconSnow = “https://res.cloudinary.com/dviy2q8nb/image”;
var iconSleet = “https://res.cloudinary.com/dviy2q8nb/image”;
var iconWind = “https://res.cloudinary.com/dviy2q8nb/image”;
var iconFog = “https://res.cloudinary.com/dviy2q8nb/image”;
var iconCloudy = “https://res.cloudinary.com/dviy2q8nb/image”;
console.log(“func: " + icon);
switch(icon){
case “clear-day”:
$(”#icon").attr(“src”,iconClear_Sky);
break;
case “clear-night”:
$(“#icon”).attr(“src”,iconClear_Sky_Night);
break;
case “rain”:
$(“#icon”).attr(“src”,iconRain)
break;
case “snow”:
$(“#icon”).attr(“src”,iconSnow);
break;
case “sleet”:
$(“#icon”).attr(“src”,iconSleet);
break;
case “wind”:
$(“#icon”).attr(“src”,iconWind);
break;
case “fog”:
$(“#icon”).attr(“src”,iconFog);
break;
case “cloudy”:
case “partly-cloudy-day”:
case “partly-cloudy-night”:
$(“#icon”).attr(‘src’,iconCloudy);
console.log(“got here, src: " + iconCloudy);
break;
default:
$(”#icon").attr(“src”,iconClear_Sky_Night);
break;
}
}

Links are simplified I provide proper links in my app, values are set properly… switch also works and I get to proper case $(“#icon”).attr('src", NewLink) also doesn’t returns any error but icon isn’t changed.

Link to my codepen
https://codepen.io/gmdivani/pen/weYBam?editors=1001

Edit!.. Fixed issue with changing id selector to img selector… but if anyone can explain why id selector didn’t worked I will be really thankful (obviously I checked id name dozen times and it was set correctly).

2

first of all, beautiful work and excellent work overall.

I am confused about your JavaScript code so here is my confusion:

$(document).ready is only used when you want all this taking place when your document (HTML (document structure)) is ready, yet you do not want to wait that long. You need to break your code into functions like you have…and only put certain stuff in .ready https://www.w3schools.com/jquery/event_ready.asp

read the link. You want maybe certain things to be available,
why not use onload (not saying you need to use it)

https://www.w3schools.com/jsref/event_onload.asp

You can say when certain data is avaialbe GO AT IT, that is where onload is WAY more appropriate.

Also, even if your code has absolutely no errors and is logical, and you take all the stuff out of $(document).ready function because it does not need to live inside it, because its too long to wait, and you can use some of theses variables as globals :slight_smile: , it will be way better.
Howerver you will still see no results…that is because first of all, I see absolutely no code in your html that links your javascript or jquery file with html,

< script src="./pathToYourfile/yourFilename.js" > < / script > or simply ./yourFilename.js if all your stuff are in same directory.

this script linking that I am showing you is essential if you want to touch absolutely nothing and leave your javascript file as is. However if you want it to be more robust, you might want to use $(document).onload and do it with certaain element not necessarily the body but say weather element, because you do not want to wait for HTML structure and css and all images to load before you finally hit the javascript (makes your weather thing slow), that is why I told you to take your code inside $(document).ready OUT. FREE it, and use $(document).onload instead if you really need to use it. I would do the following.

Use the script tags like I showed you and do this:
If you passing values from html then like this:
< ELEMENT onload = “someFunction(‘value’,‘value2’,‘value3’)”>

or

the onload will run when THIS specific element Object is loaded.

Read here again:
https://www.w3schools.com/tags/ev_onload.asp

3

Also congrats on fixing the issue you had a hard time with. :slight_smile:

4

first of all thanks for the replay and interesting suggestions, I was also thinking removing some of the code from document.ready and putting it inside onload event, but before that I wanted to complete challenge and be sure that every function works properly. Also about linking javascript to html file, I’m doing it on codepen and as I know I don’t need to link my js file, codepen does it automatically, doesn’t it?

5

Honestly, I never used it, so you might have taught me something new, that is why even though its expressive platform its sucky if the developer does not know how to link the files if he had simply a folder and a js file and .php file and .css file if you catch where I am going with this…for learning purposes.

6

yes I agree on this, fortunately I know how to do it since I’m not a total beginner but sometimes even if you know something if you don’t do it routinely its easy to forget and then spend hours thinking whats wrong with your code.