Weather app? (Vanilla)

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:

and here is my current vanilla one:

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.

Let me take a look at your code and I will respond back in a little bit.

You are not using innerHTML correctly.
Hint: It is not a function, it is a property.

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

I found that error just by looking at the browser’s console. Once you fix the innerHTML issue, you will see another error in the browser’s console related to your use of world.

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?

What are we talking about here?

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

1 Like

Here is the current:

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.

How much bootcamp you have left?

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?

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

You have the following two lines referring to classes which I do not see in your HTML.

let america = document.getElementsByClassName(`america`)
let world = document.getElementsByClassName(`world`)

If you look at your browser’s console, you would see when you try to reference america you get an error message. america and world are empty HTMLCollections.

What is the purpose of america and world variables?