Weather app changing pictures?

JavaScript
1

Little confused how I can go about changing the placeholder picture to the current weather. The data comes with certain images, but perhaps I was thinking of adding an array of my own. Any idea how I can go about this? Thank you!

2

As i can see from the response, the image is at response.data.current.condition.icon

So in the updateUI function simply update the icons placeholder:
document.getElementById(“icons”).src = response2.data.current.condition.icon;

Now if you want to use your own images, i suggest using an object and using the current.condition.text property:

const ICONS = {
    "Clear": "path/to/clear/image",
    "Cloudy": "path/to/cloudy/image"
}

From that you simply use the response’s data.condition.current.text proprty to map to the image:

const text = response2.data.current.condition.text;
document.getElementById("icons").src = ICONS[text];
3

It doesn’t work if I try document.getElementById(“icons”).src = response2.data.current.condition.icon;

I get an error

4

What does the error says?

6

Oh i think i know
If you copied the line

document.getElementById(“icons").src = response2.data.current.condition.icon;

Directly from here, then replace the quatation marks manually or just copy this one instead

document.getElementById("icons").src = response2.data.current.condition.icon;

Sorry, new to the forum and still getting the hang of this editor

7

For some reason it wasn’t working for me and confused the hell out of me haha

8

Ahh… that’s one of the common states of a programmer:
It’s not working and i have no idea why OR it is working and i really don’t have any idea why

9

Hahaha! I feel great once I solve something for a good 3 seconds and then the next problem arises.

10

Sounds about right >:D

12

Absolutely understandable, but I couldn’t figure out how to change the forecast temperature from F to C while I am referencing let date = forecast[i].date inside the for loop. I’m still a huge noobie and it’s working, so I’m leaving it for now.

13

Would like to refer you to line 47

if (country = `United States of America`) {

This if condition will always evaluate as true since you made an assignement instead of comparison

It should be

if (country === `United States of America`) {

This is a lesson that needs to be taught early on when learning programming (i know i have :sweat_smile:)

14

Thank you…fixed. :slight_smile:

16

I do exactly what you are doing and it breaks all of the forecast toggling from F to C and back.

18

My next problem I am working on currently is changing the background and hr color line to change to the background. I can get it to work and change the colors, but right when I throw it in the if statement at the bottom it doesn’t appear to work.

20

Honestly, these directions are too confusing for me at this point in the day, hahaha! Sorry, will definitely try to tackle that tomorrow.

21

Few things in regard to the background change:

  • line 174 (the last else if) sould have an opening and closing curly brackets
  • your comparison of temp in the if statements is wrong and causes an error (which is why the placeholder image is not changing => it was never reached)

When you compare temp, the variable temp is a

element and it cannot be compared in such a way

What you can do (and there are other ways as well) is to parse the temp value and compare against a constant integer:

const tempValue = parseInt(temp.innerHTML, 10);
if (tempValue < 60) {
.....
}
22

The curly braces fixed it, man. Thank you.

23

Also, but confused how I can get the images to work…

24

Making the following changes worked for me:

  let hr = document.getElementsByClassName(`hr`)[0]
  let body = document.getElementById(`background`)
  let tempValue = parseInt(temp.innerHTML, 10)
  if (tempValue >= 80) {
    body.style.backgroundColor = `#800000`
    hr.style.backgroundImage = `-webkit-linear-gradient(left, #800000, white, #800000)`
  } else if (tempValue < 80) {
    body.style.backgroundColor = `#ffcc00`
    hr.style.backgroundImage = `-webkit-linear-gradient(left, #ffcc00, white, #ffcc00)`
  } else if (tempValue <= 70) {
    body.style.backgroundColor = `#5a97f2`
    hr.style.backgroundImage = `-webkit-linear-gradient(left, #5a97f2, white, #5a97f2)`
  } else if (tempValue < 60) {
    body.style.backgroundColor = `#0D47A1`
    hr.style.backgroundImage = `-webkit-linear-gradient(left, #0D47A1, white, #0D47A1)`
  }

  //Changing weather pictures
  let icon = response2.data.current.condition.icon
  let iconsPH = document.getElementById(`icons`)
  iconsPH.setAttribute(`src`, icon)
25

That makes the pics work for you?!

EDIT:

I get this:

46%20PM
46%20PM950Ă—866 63.2 KB