Weather app changing pictures?

Weather app changing pictures?
0

#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?


#5

I just reviewed your pen and when I uncomment the following section, it displays an image by the current temperature.

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

Was that not what you wanted to do with this code above?


#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


#11

@rstorms - FYI - You should move the following event listeners outside of the for loop, because you are creating duplicate listeners while they are inside the loop. It is just unnecessary creation of extra event listeners.

    // Toggle ºC & ºF (buttons)
    degTypeF.addEventListener(`click`, function(e) {
      temp.innerText = fahrenheit + `º`
      degTypeF.classList.replace(`off`, `on`)
      degTypeC.classList.replace(`on`, `off`)
      hiTemps.innerText = maxF
      lowTemps.innerText = minF
    })

    degTypeC.addEventListener(`click`, function(e) {
      temp.innerText = celsius + `º`
      degTypeF.classList.replace(`on`, `off`)
      degTypeC.classList.replace(`off`, `on`)
      hiTemps.innerText = maxC
      lowTemps.innerText = minC
    })

#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:


#15

I literally did a cut/paste and put them on the line below the closing } of the for loop block. The click event handlers still work, because fahrenheit and celsius variables referenced in the handlers are still within the scope of updateUI function and should not depend on anything in the for loop.

Within in the for loop, everytime you click the C or F, each of them gets called 6 times.

Also, I am not sure what purpose the following lines have in the F click handler

      hiTemps.innerText = maxF
      lowTemps.innerText = minF

or the following in the C click handler

      hiTemps.innerText = maxC
      lowTemps.innerText = minC

I commented them out when I moved the handlers outside the for loop and do not see any difference in what gets displayed to the page. Maybe I am missing something you are seeing?


#16

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


#17

Could you fork the pen with the changes I suggested, so I can take a look? You must be putting them somewhere else or the code has significantly changed since I forked the pen 32 minutes ago.


#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.


#19

Actually. after my last response and before I even look at the pen I requested, I see what those four lines were doing. They were changing from Imperial temp values to metric temp values.

The way to fix that is to create a Boolean variable which keeps track if the current overall temperature unit is Metric or Imperial. You could call it isMetric or isImperial and then toggle the value between true and false in the click handlers. Then create a separate function (i.e. generateForecast) which executes the for loop and updates the values to the applicable unit type.

The click handler functions would look like:

          // Toggle ºC & ºF (buttons)
    degTypeF.addEventListener(`click`, function(e) {
      temp.innerText = fahrenheit + `º`
      degTypeF.classList.replace(`off`, `on`)
      degTypeC.classList.replace(`on`, `off`)
      displayForecast(forecast)
    })

    degTypeC.addEventListener(`click`, function(e) {
      temp.innerText = celsius + `º`
      degTypeF.classList.replace(`on`, `off`)
      degTypeC.classList.replace(`off`, `on`)
      displayForecast(forecast)
    })  

#20

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