Weather app - units toggle and background image issues

Weather app - units toggle and background image issues
0

#1

Hi everyone,

I can’t work out why my unit toggle function and my background images aren’t working. I’ve written all the code that I think should work but I must be missing something fundamental.

For the toggle function I’ve written a basic true/false click function. For the background image changes I’ve written some ifs based on the weather API icon codes.

I’ve learned SO much by working through issues up to this point (and it’s been excruciating) but I’m really banging my head against a wall on these last bits. Any help is much appreciated!

Thanks
Amelie


#2

Unfortunately I didn’t have time to check on your background issue, but I can tell you the issue with your button. You’ve accidentally given it two ids. Your html shows:
<button id="button" id="clicker">Show me Fahrenheit</button>

Following you’ve styled the button with the #button selector, but your jQuery on line 38 targets #clicker

If you remove the button id, and change the css selector to #clicker instead it works.

Great job on the app so far! :slight_smile:


#3

Or change your html to be

<button id="clicker" class="button">

It’s best practice to style with classes and not ids. This has been a very hard habit for me to break!


#4

Where are the background images hosted?


#5

@doug20000 - 20000 THANK YOUS!!! That’s a good lesson to learn because I was probably focussing too much attention on the jQuery. Really appreciate it!!

And hey @transmothra I’m currently hosting them locally because ultimately I plan to make a github page out of this and already have the images on my laptop. Is it better practice to use images hosted online? I just passed in a couple of links and now I can actually see the background images change which I’m SURE wasn’t happening before :confused: but it still doesn’t work when I open my page up locally using my own files, I’m not sure why.


#6

@transmothra So it seems I moved the images into my css folder when I was testing why it didn’t work and didn’t move them back into the parent folder. The issue is solved. :slight_smile: Thanks for getting me thinking about where the images are!!


#7

That’s precisely the result i was aiming for! Good for you!!

Very nice weather app, btw!