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

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