Local Weather, background image is not changing based in the weather desc using the switch statement [CLOSED]

Hello Guys,

I don’t know why the background image is not changing based in the weather desc using the switch statement.
Also, how can I select the celcius & fahrenheit html code with css?
Any help is very appreciated.


1 Like

Hey. For the animated icon you could just have a div that covers your page until you got the position and weather data. So, for example, create a spinner (I took this one from loading.io and adapted it a bit):

CSS

.lds-eclipse {
  position: fixed;
  background-color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  top:0;
  bottom:0;
  right:0;
  left:0;
  opacity:0;
  pointer-events:none; /* Click-through the div, otherwise it'll cover the page - Not supported < IE 11 */
  transition:opacity .2s .5s ease-out; /* what to animate - duration - delay - animation easing */
}
.lds-eclipse.active {
  opacity:1;
}
.lds-eclipse div {
  -webkit-animation: lds-eclipse 0.5s linear infinite;
  animation: lds-eclipse 0.5s linear infinite;
  width: 80px;
  height: 80px;
  top: 60px;
  left: 60px;
  border-radius: 50%;
  box-shadow: 0 6px 0 0 #28292f;
  -webkit-transform-origin: 40px 43px;
  transform-origin: 40px 43px;
}
@keyframes lds-eclipse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes lds-eclipse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

HTML

<div class="lds-eclipse active">
  <div></div>
</div>

And then you just remove its “active” class when your operations are done:

  fetch(api)
    .then(blob => blob.json())
    .then(data => {
      // Data stuff
      document.querySelector(".lds-eclipse").classList.remove("active");
    }).catch(err => alert(err));

Instead of having a background covering your stuff, you could also do the same thing (but in reverse) for your container div as well and using z-index(es) instead of the pointer-events; or even append the spinner through JS and then remove it completely; but that’s up to you.

Your switch statement isn’t working 'cause to set a background you’ll have to wrap the image in url(), like:

querySelector('body').style.background = 'url(image_url)';

Finally, to select your fahrenheit and celsius you would probably be better off creating another span with a class\id for them, and then select that:

HTML

<span id="temp"></span><span id="metric"></span><br>

CSS

#metric {
  font-weight: bold;
}

JS

let temp = querySelector("#temp");
let metric = querySelector("#metric");
temp.innerHTML = cTemp;
metric.innerHTML =  " &#8451;";

// Other stuff

temp.addEventListener("click", function() {
  if (toggleCF === false) {
    temp.innerHTML = fTemp;
    metric.innerHTML = " &#8457;";
    toggleCF = true;
  } else {
    temp.innerHTML = cTemp;
    metric.innerHTML = " &#8451;";
   toggleCF = false;
  }
});
1 Like

@noyb Thanks for taking the time to write such a long answer.

I removed all the previous javascript code

document.onreadystatechange = function () {
  let state = document.readyState;
if (state == 'interactive') {
       document.getElementById('contents').style.visibility="hidden";
  } else if (state == 'complete') {
      setTimeout(function(){
         document.getElementById('interactive');
         document.getElementById('load').style.visibility="hidden";
         document.getElementById('contents').style.visibility="visible";
      }, 950);
  }
}

and just added this line of code to my js

querySelector('.load').classList.remove('load');

:+1:

Hey @noyb, what can I do to remove this alert that pops up from the removed class…
It pops up when I want to forecast the weather for the searched city.

You are removing the class in your getWeather function, therefore you can’t use querySelector('.load') because that class isn’t there anymore.

Add another class to your div:

<div class="spinner load"></div>

Then add the .load class before calling getWeather when changing place:

searchBox.addListener("place_changed", function() {
  // Stuff
  querySelector('.spinner').classList.add('load'); // Add the class again
  getWeather(lat, lon);
});

and leave the rest as it is (you can change the class in the querySelector inside the getWeather function as well, if you want). It should work as intended.

1 Like

I tried the same thing but I didn’t add another class to HTML (that was the issue)… Now it works well. Thank you very much @noyb.

Only the backgrounds and the css left for tomorrow for this version I of local weather. :grinning:

1 Like