Weather app problems with farenheit to celsius and icons

Weather app problems with farenheit to celsius and icons
0

#1

Hi campers,

I am stuck in my weather app due two problems, the first is that I cant make that temperature change from farenheit to celsius and I would like that change when I click in the F (but well this point is not really important).

In my code I have a function that convert Kelvin in farenheit, and other that convert kelvin in celsius, and I indicate the code the result of wich of those two I want to appear in screen. I want create a function that change with one click to the other function and in the other way when I click again:

According that my approach was that:

If the function thar appear in screen change kelvin in farenheit when I click the button this return kelvin to celsius and in the other way, so the code is

$("#change").click(function () {{if (weather.temp == K2F){return K2C }else{ return K2C }};

And in the HTML I have this

<div class><button id = "change">change</button></div>

But that dont work and I dont know how to do it :worried:.

The other problem is that my weather app works with the API of OpenWeatherMap and I dont get that the icons appear according to the weather in others devices or computers, actually I only got that the icons appears only in my computer, I know I this is because the location of the icons is my computer, and now I dont know what is the better solution for that.

This is my pen

Thank you for all

Sorry is this post is not clear


#2

The problem you are having with

$("#change").click(function () {
  if (weather.temp == K2F) {return K2C }else{ return K2C }
};

is that weather is only defined within the function update. This is why the console shows the error “Uncaught ReferenceError: weather is not defined”

As for the weather icons, Codepen can not access your local computer files, so the files need to be hosted on a website accessible to the public.

You can also get the weather icon a different way using openweather’s json data. In your following code:

xmlhttp.onreadystatechange = function(){

you have the line:

weather.icon = data.weather[0].id;

Instead of using the id property of data.weather[0], you should use the icon property which contains something like “02d”. This is the name of the weather icon (minus .png extension). All the weather icons are located within the following path:

https://openweathermap.org/img/w/

So to get the icon called “02d”, you would use:

 https://openweathermap.org/img/w/02d.png

#3

Hello,

Thanks you for your answer I have made those changes in my code

This

weather.icon = data.weather[0].id;

Is now

weather.icon = data.weather.icon;

I have changed this
icon.src = "imgs/codes/" + weather.icon + ".png";

for this

icon.src = "https://openweathermap.org/img/w/" + weather.icon;

And in HTML I have changed this

<img id = "icon" width="75px" src ="imgs/codes/200.png"/>

For this

<img id = "icon" width="75px" src ="https://openweathermap.org/img/w/02d.png"/>

But the icons still without works


#4

It does work as the default image that shows, but you have a problem in your code where you

weather.icon = data.weather.icon;

In the last post (shown above), I said to use the icon property of data.weather[0]. You did not do that (you used data.weather.icon which results in undefined. Also, you did not attach the “.png” to it, so later in update function, the following line:

icon.src = "https://openweathermap.org/img/w/" + weather.icon;

icon.src ends up with “https://openweathermap.org/img/w/undefined”, because weather.icon is undefined.


#5

I found the problem with the icons and I have solved it :slightly_smiling_face:

Thank you :slightly_smiling_face:!

Actually I am working in the problem of farenheit to celsius