CODEWITHSUNDEEP
javascripthtml
Jorge Gutierrez Marco
Jorge Gutierrez Marco

Reputation: 29

What is wrong with this code that changes the content of a div throught different hours of the day?

Here is a weird question that came up with a problem I am having. There is a GIF that changes it's "src" for different hours of the day. The timeframe is as follows: 7-18pm (gif1), 18-21(gif2), 21-21:30 (gif3), 21:30-5 (gif4), 5-7(gif5). The problem comes when the code swaps from 21:30 to 5. It does it properly, but at 22:00 it changes again.

Here is the code:

<script>
var date = new Date();
var hour = date.getHours();

var minutes = date.getMinutes();

if(hour >=7 && hour < 18) {
console.log(hour)
    //the hour is between 7am to 17:59pm
    document.getElementById("gif").src = "gif1";
     
} else if (hour >= 18 && hour < 21) {
console.log(hour)
  //the hour is between 18pm to 3am (2:59am)
    document.getElementById("gif").src = "gif2";
 
} else if ((hour >= 21 && hour <= 21) || (minutes >= 0 && minutes <= 30)) {
console.log(hour)
   document.getElementById("gif").src = "gif3";
  
} else if ((minutes >= 30 && minutes <= 59) || (hour >= 21 && hour < 5)) {
console.log(hour)
   document.getElementById("gif").src = "gif4";
} else if (hour >= 5 && hour < 7) {
console.log(hour)
   document.getElementById("gif").src = "gif5";

}
</script>

Any idea regarding why that happens? I thought the code was right but since I am pretty new to JS, I am afraid it's not :/

EDIT: Added new code as of 22:40

<script>
var date = new Date();
var hour = date.getHours();

var minutes = date.getMinutes();
const e = document.querySelector(".viewport-div");



if(hour >=7 && hour < 18) {
console.log(hour)
    document.getElementById("gif").src = "gif1";
     e.style.backgroundImage =
       "url(BGgif1)";

} else if (hour >= 18 && hour < 21) {
console.log(hour)
    document.getElementById("gif").src = "gif2";
    e.style.backgroundImage =
      "url(BGgif2)";

} else if ((hour >= 21 && hour <= 21) && (minutes >= 0 && minutes <= 30)) {
console.log(hour)
   document.getElementById("gif").src = "gif3";
  e.style.backgroundImage =
    "url(BGgif3)";

} else if ((minutes >= 30 && minutes <= 59) && (hour >= 21 && hour < 5)) {
console.log(hour)
document.getElementById("gif").src = "gif2";
e.style.backgroundImage =
  "url(BGgif4)";

} else if (hour >= 5 && hour < 7) {
console.log(hour)
   document.getElementById("gif").src = "gif2";
e.style.backgroundImage =
  "url(gif5)";

}
</script>

Upvotes: 0

Views: 57

Answers (1)

Erfan Yeganegi
Erfan Yeganegi

Reputation: 311

var hour = 0
var minute = 0

console.log(hour)
console.log(minute)

if (hour >= 7 && hour < 18) {
    console.log(' >= 7 - < 18')
} else if (hour >= 18 && hour < 21) {
    console.log('>= 18 - < 21')
} else if (hour == 21 && minute >= 0 && minute < 30) {
    console.log('>= 21:00 - < 21:30')
} else if (hour == 21 && minute >= 30 && minute < 59) {
    console.log('>= 21:30 - =< 21:59')
} else if ((hour >= 22 && hour <= 23) || (hour >= 0 && hour < 5)) {
    console.log('>= 22 - < 5')
} else if (hour >= 5 && hour < 7) {
    console.log('>= 5 - < 7')
}

change the values of hour and minute and see how code works.

the main problem was with this part: (hour >= 21 && hour < 5) when its lets say 1, it is < 5 buts its not >= 21 :) previously I didn't check it. this should work tho.

Upvotes: 2

Related Questions