Weather app? (Vanilla)

https://codepen.io/rstorms/pen/YOvawm

Having a bit of trouble transferring my weather app from using jQuery into Vanilla and also using Axios to get the API’s. What am I doing wrong?

“What am I doing wrong?” is a broad question to ask. You should detail what functionality is not working in the migrated application that was working in the original.

When in doubt, the browser debugger tools can be your friend. If you open the console in Google Chrome and go to your page, you should see something like the image below. I’ve highlighted in the network and console view where a script file is not being found, so you should start with why that is not loading. The other two errors below it may or may not be related to that script not being loaded.

1 Like

I still don’t understand what is going on. I’ve looked over my code and am having issues.

Here is my original: https://codepen.io/rstorms/pen/xjzWbj?editors=0110

and here is my current vanilla one: https://codepen.io/rstorms/pen/YOvawm

Messing around with it and it seems like my css file isn’t connected? But that doesn’t make sense currently.

I think maybe I’ll just have to burn and rebuild.

Thank you, I will have to take a look at it.

I’m sure it’s riddled with problems. Thank you as always.

I don’t understand how I’m using it as a function? I’m using it as a method?

Nevermind, I realized I have to set .innerHTML = ``

1 Like

Here is the current:

https://codepen.io/rstorms/pen/YOvawm

I changed all the innerHTML, and called world by classname instead of ID, but I might have to take a break until tomorrow. Put in so many hours today.

This is the Q1 project due next friday. Only 1 month in out of 6.

Back on it and confused as to what I’m doing with world and why it’s not showing up?

Understand that “world” and “america” are both collections and possibly I have to index them, but I have to do that with every line?

https://codepen.io/rstorms/pen/YOvawm

I decided to delete most of the HTML and just create the elements and append them to the “moreData” div.

I understand, but I’m trying to create the elements and manipulate them all in JS. The purpose is to change from fahrenheit to celsius and back depending on what country you are in. All with KM to MpH and precipitation, etc.

I refactored my code and am just trying to take it in pieces…

https://codepen.io/rstorms/pen/YOvawm

When I toggle the “Show C”, “Show F” button, I can only toggle it twice and then it breaks. Any idea? I’ve tried e.preventDefault()

Nevermind, I solved it with the equals.

What is going on with my setBackground function? I’m trying to make the data change to different pics depending on weather and I can’t console.log(response3) ?? Any help is appreciated.

Thanks, I’m just not sure where I would call the function in order to make it work.

Just redid my code a little bit and am steering away from changing the picture as a background. I want to grab the forecast API and have the next 5 days show up. Any guidance how I can get started?