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

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

#1

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.



#2

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;
  }
});

Local Weather, don't know why the background images doesn't show up [CLOSED]
#3

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


#4

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.


#5

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.


#6

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: