On-air script

Joined
Jun 14, 2018
Messages
101
Reaction score
1
I know I've got this rite but could someone please
check it over for me please

JavaScript:
(function( d ) {
   'use strict';
function onair(){
 
   var dj = d.querySelector('#dj'),
       nd = new Date(),
       dy = nd.getDay(),
       hr = nd.getHours(),                                 
       mn = nd.getMinutes();
else {
if(( dy === 1 && hr === 21 && mn <=00 )||
   ( dy === 1 && hr === 8 && mn <=15 )) {
     dj.src='images/billy.png';
 }
 else {
if(( dy === 2 && hr === 8 && mn <=00 )||
   ( dy === 2 && hr === 8 && mn <=15 )) {
     dj.src='images/kayley.png';
 }
 else {
if(( dy === 3 && hr === 8 && mn <=00 )||
   ( dy === 3 && hr === 8 && mn <=15 )) {
     dj.src='images/off-air.png';
 }
if ( dy === 4 && hr === 21 && mn <=12 ) {
     'Thursday at 9 PM<br>Request<br>With Strawbs'dj.src='images/strawbs.png';
 }
else {
if(( dy === 5 && hr === 13 && mn <=59 )||
   ( dy === 5 && hr === 14 && mn <=59 )) {
     'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
 }
else {
if(( dy === 6 && hr === 8 && mn <=14 )||
   ( dy === 6 && hr === 9 && mn <=15 )) {
     'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
 }
if
   ( dy === 7 && hr === 21 && mn <=00 )) {
     'Sundayday at 9 PM<br>Request<br>with Strawbs'dj.src='images/strawbs.png';
 }
 
else {
     dj.src='images/off-air.png';
 
    }
   }
  }
 }

setInterval( function(){ onair();}, 1000 );
}
}( document )) ;
 
Joined
Jul 4, 2023
Messages
341
Reaction score
39
Check this

HTML:
<img id="dj">
<div id="txt"></div>

<script>
  (function(d) {
    function onair() {
      const dj = d.querySelector('#dj'),
            tx = d.querySelector('#txt'),
            nd = new Date(),
            dy = nd.getDay(),
            hr = nd.getHours(),                                 
            mn = nd.getMinutes();

      switch (dy) {
        case 1: // Monday
          if ((hr === 21 && mn <=59) || (hr === 8 && mn <=15))
            dj.src = 'images/billy.png';
          break;
        case 2: // Tuesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'images/kayley.png';
          break;
        case 3: // Wednesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'images/off-air.png';
          break;
        case 4: // Thursday
          if (hr === 21 && mn <=12) {
            dj.src = 'images/strawbs.png';
            tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
          }
          break;
        case 5: // Friday
          if ((hr === 13 && mn <=59) || (hr === 14 && mn <=59))
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 6: // Saturday
          if ((hr === 8 && mn <=14) || (hr === 9 && mn <=15))
            tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 0: // Sunday
          if (hr === 21 && mn <=59) {
            dj.src = 'images/strawbs.png';
            tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
          }
          break;
        default:
          dj.src='images/off-air.png';
          break;
      }
    }
    
    setInterval(function() { onair(); }, 1000);
  })(document); 
</script>
 
Joined
Jun 14, 2018
Messages
101
Reaction score
1
Check this

HTML:
<img id="dj">
<div id="txt"></div>

<script>
  (function(d) {
    function onair() {
      const dj = d.querySelector('#dj'),
            tx = d.querySelector('#txt'),
            nd = new Date(),
            dy = nd.getDay(),
            hr = nd.getHours(),                                 
            mn = nd.getMinutes();

      switch (dy) {
        case 1: // Monday
          if ((hr === 21 && mn <=59) || (hr === 8 && mn <=15))
            dj.src = 'images/billy.png';
          break;
        case 2: // Tuesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'images/kayley.png';
          break;
        case 3: // Wednesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'images/off-air.png';
          break;
        case 4: // Thursday
          if (hr === 21 && mn <=12) {
            dj.src = 'images/strawbs.png';
            tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
          }
          break;
        case 5: // Friday
          if ((hr === 13 && mn <=59) || (hr === 14 && mn <=59))
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 6: // Saturday
          if ((hr === 8 && mn <=14) || (hr === 9 && mn <=15))
            tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 0: // Sunday
          if (hr === 21 && mn <=59) {
            dj.src = 'images/strawbs.png';
            tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
          }
          break;
        default:
          dj.src='images/off-air.png';
          break;
      }
    }
    
    setInterval(function() { onair(); }, 1000);
  })(document); 
</script>
Thank you I'll update my js file
 
Joined
Jun 14, 2018
Messages
101
Reaction score
1
Check this

HTML:
<img id="dj">
<div id="txt"></div>

<script>
  (function(d) {
    function onair() {
      const dj = d.querySelector('#dj'),
            tx = d.querySelector('#txt'),
            nd = new Date(),
            dy = nd.getDay(),
            hr = nd.getHours(),                                
            mn = nd.getMinutes();

      switch (dy) {
        case 1: // Monday
          if ((hr === 21 && mn <=59) || (hr === 8 && mn <=15))
            dj.src = 'images/billy.png';
          break;
        case 2: // Tuesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'images/kayley.png';
          break;
        case 3: // Wednesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'images/off-air.png';
          break;
        case 4: // Thursday
          if (hr === 21 && mn <=12) {
            dj.src = 'images/strawbs.png';
            tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
          }
          break;
        case 5: // Friday
          if ((hr === 13 && mn <=59) || (hr === 14 && mn <=59))
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 6: // Saturday
          if ((hr === 8 && mn <=14) || (hr === 9 && mn <=15))
            tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 0: // Sunday
          if (hr === 21 && mn <=59) {
            dj.src = 'images/strawbs.png';
            tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
          }
          break;
        default:
          dj.src='images/off-air.png';
          break;
      }
    }
   
    setInterval(function() { onair(); }, 1000);
  })(document);
</script>
you've given me html NOT js i wanted someone to check see if had my js rite?
 
Joined
Jul 4, 2023
Messages
341
Reaction score
39
JavaScript:
(function(d) {
    function onair() {
      const dj = d.querySelector('#dj'), // <img id="dj">
            tx = d.querySelector('#txt'), // <div id="txt"></div>
            nd = new Date(),
            dy = nd.getDay(),
            hr = nd.getHours(),                            
            mn = nd.getMinutes();

      switch (dy) {
        case 1: // Monday
          if ((hr === 21 && mn <=59) || (hr === 8 && mn <=15))
            dj.src = 'images/billy.png';
          break;
        case 2: // Tuesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'images/kayley.png';
          break;
        case 3: // Wednesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'images/off-air.png';
          break;
        case 4: // Thursday
          if (hr === 21 && mn <=12) {
            dj.src = 'images/strawbs.png';
            tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
          }
          break;
        case 5: // Friday
          if ((hr === 13 && mn <=59) || (hr === 14 && mn <=59))
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 6: // Saturday
          if ((hr === 8 && mn <=14) || (hr === 9 && mn <=15))
            tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 0: // Sunday
          if (hr === 21 && mn <=59) {
            dj.src = 'images/strawbs.png';
            tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
          }
          break;
        default:
          dj.src='images/off-air.png';
          break;
      }
    }
 
    setInterval(function() { onair(); }, 1000);
  })(document);

this html code only for demo purpose

HTML:
<img id="dj">
<div id="txt"></div>
 
Joined
Jun 14, 2018
Messages
101
Reaction score
1
JavaScript:
(function(d) {
    function onair() {
      const dj = d.querySelector('#dj'), // <img id="dj">
            tx = d.querySelector('#txt'), // <div id="txt"></div>
            nd = new Date(),
            dy = nd.getDay(),
            hr = nd.getHours(),                           
            mn = nd.getMinutes();

      switch (dy) {
        case 1: // Monday
          if ((hr === 21 && mn <=59) || (hr === 8 && mn <=15))
            dj.src = 'images/billy.png';
          break;
        case 2: // Tuesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'images/kayley.png';
          break;
        case 3: // Wednesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'images/off-air.png';
          break;
        case 4: // Thursday
          if (hr === 21 && mn <=12) {
            dj.src = 'images/strawbs.png';
            tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
          }
          break;
        case 5: // Friday
          if ((hr === 13 && mn <=59) || (hr === 14 && mn <=59))
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 6: // Saturday
          if ((hr === 8 && mn <=14) || (hr === 9 && mn <=15))
            tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 0: // Sunday
          if (hr === 21 && mn <=59) {
            dj.src = 'images/strawbs.png';
            tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
          }
          break;
        default:
          dj.src='images/off-air.png';
          break;
      }
    }
 
    setInterval(function() { onair(); }, 1000);
  })(document);

this html code only for demo purpose

HTML:
<img id="dj">
<div id="txt"></div>
this script isn't working as you see over here https://coolvibes-reloaded.com where it says off-air
the script isn't working


Code:
<script>
  (function(d) {
    function onair() {
      const dj = d.querySelector('#dj'),
            tx = d.querySelector('#txt'),
            nd = new Date(),
            dy = nd.getDay(),
            hr = nd.getHours(),                               
            mn = nd.getMinutes();

      switch (dy) {
        case 1: // Monday
          if ((hr === 21 && mn <=59) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/billy.png';
          break;
        case 2: // Tuesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/kayley.png';
          break;
        case 3: // Wednesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/off-air.png';
          break;
        case 4: // Thursday
          if (hr === 21 && mn <=00) {
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/strawbs.png';
            tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
          }
          break;
        case 5: // Friday
          if ((hr === 13 && mn <=59) || (hr === 14 && mn <=59))
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 6: // Saturday
          if ((hr === 8 && mn <=14) || (hr === 9 && mn <=15))
            tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 0: // Sunday
          if (hr === 21 && mn <=00) {
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/strawbs.png';
            tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
          }
          break;
        default:
          dj.src='images/off-air.png';
          break;
      }
    }
  
    setInterval(function() { onair(); }, 1000);
  })(document);
</script>
 
Joined
Jul 4, 2023
Messages
341
Reaction score
39
Try this
JavaScript:
  (function(d) {
    function onair() {
      const dj = d.querySelector('#dj'),
            tx = document.createElement('div'),
            nd = new Date(),
            dy = nd.getDay(),
            hr = nd.getHours(),                               
            mn = nd.getMinutes();
        
      tx.style.color = 'white';
      dj.insertAdjacentElement('afterend', tx);

      switch (dy) {
        case 1: // Monday
          if ((hr === 21 && mn <=59) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/billy.png';
          break;
        case 2: // Tuesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/kayley.png';
          break;
        case 3: // Wednesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/off-air.png';
          break;
        case 4: // Thursday
          if (hr === 21 && mn >=0) {
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/strawbs.png';
            tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
          }
          break;
        case 5: // Friday
          if ((hr === 13 && mn <=59) || (hr === 14 && mn <=59))
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 6: // Saturday
          if ((hr === 8 && mn <=14) || (hr === 9 && mn <=15))
            tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 0: // Sunday
          if (hr === 21 && mn >=0) {
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/strawbs.png';
            tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
          }
          break;
        default:
          dj.src='images/off-air.png';
          break;
      }
    }
 
    setInterval(function() { onair(); }, 1000);
  })(document);
 
Joined
Jun 14, 2018
Messages
101
Reaction score
1
Try this
JavaScript:
  (function(d) {
    function onair() {
      const dj = d.querySelector('#dj'),
            tx = document.createElement('div'),
            nd = new Date(),
            dy = nd.getDay(),
            hr = nd.getHours(),                              
            mn = nd.getMinutes();
       
      tx.style.color = 'white';
      dj.insertAdjacentElement('afterend', tx);

      switch (dy) {
        case 1: // Monday
          if ((hr === 21 && mn <=59) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/billy.png';
          break;
        case 2: // Tuesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/kayley.png';
          break;
        case 3: // Wednesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/off-air.png';
          break;
        case 4: // Thursday
          if (hr === 21 && mn >=0) {
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/strawbs.png';
            tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
          }
          break;
        case 5: // Friday
          if ((hr === 13 && mn <=59) || (hr === 14 && mn <=59))
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 6: // Saturday
          if ((hr === 8 && mn <=14) || (hr === 9 && mn <=15))
            tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 0: // Sunday
          if (hr === 21 && mn >=0) {
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/strawbs.png';
            tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
          }
          break;
        default:
          dj.src='images/off-air.png';
          break;
      }
    }
 
    setInterval(function() { onair(); }, 1000);
  })(document);
can i just ask, when it says if ((hr === 10 && mn <=00) || (hr === 23 && mn <=59)) 10:00 23:59 is that from 10am till 11:59?
 
Joined
Jun 14, 2018
Messages
101
Reaction score
1
00 meaning 0 any way ;)
ok so the txt isn't showing up as of who's on air

see here
JavaScript:
}
          break;
        case 5: // Friday
          if ((hr === 10 && mn <=0) || (hr === 23 && mn <=0))
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
 
Joined
Jul 4, 2023
Messages
341
Reaction score
39
10am to 11:59pm (from 10 morning to midnight minus one minute)
My mistake, it's late and my brain works slowly ;)

((hr === 10 && mn <=0) || (hr === 23 && mn <=0))
this === meaning exactly 10

for from10:00am to 23:59pm should be
JavaScript:
if (hr >= 10 && hr <= 23)

actually, minutes are irrelevant, because
10:00, 10:01, 10:10 still meaning hr is 10
23:00, 23:02, 23:59 still meaning hr is 23

JavaScript:
        case 5: // Friday
          if (hr >= 10 && hr <= 23)
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
 
Last edited:
Joined
Jun 14, 2018
Messages
101
Reaction score
1
My mistake, it's late and my brain works slowly ;)


this === meaning exactly 10
for from10:00am to 23:59pm should be

JavaScript:
if (hr >= 10 && hr <= 23)

actually, minutes are irrelevant, because
10:00, 10:01, 10:10 still meaning hr is 10
23:00, 23:02, 23:59 still meaning hr is 23

JavaScript:
        case 5: // Friday
          if (hr >= 10 && hr <= 23)
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
rite i'v copied and pasted
case 5: // Friday
if (hr >= 10 && hr <= 23)
tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
break;
 
Joined
Jun 14, 2018
Messages
101
Reaction score
1
My mistake, it's late and my brain works slowly ;)


this === meaning exactly 10

for from10:00am to 23:59pm should be
JavaScript:
if (hr >= 10 && hr <= 23)

actually, minutes are irrelevant, because
10:00, 10:01, 10:10 still meaning hr is 10
23:00, 23:02, 23:59 still meaning hr is 23

JavaScript:
        case 5: // Friday
          if (hr >= 10 && hr <= 23)
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
why isn't this script working?


html

Code:
<!DOCTYPE HTML>
<html lang="en">
<html>

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

  <title>Who is on air</title>

  <link rel="stylesheet" href="https://github.com/strawbs1989/coolvibes-reloaded/blob/main/css/screen.css" media="screen">

</head>

<body>

  <noscript>
    <p>JavaScipt need to be enabled for this page to function correctly</p>
  </noscript>

  <h1>Who is on air</h1>

  <img id="dj" src="https://github.com/strawbs1989/coolvibes-reloaded/blob/main/images/off-air.png" alt="Off-line">

  <script src="https://github.com/strawbs1989/coolvibes-reloaded/blob/main/scripts/showdj.js"></script>

</body>

</html>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

CSS:

Code:
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em  sans-serif;
 }
 noscript {
    font-weight: bold;
    text-align: center;
 }
 h1{
    text-align: center;
    color: white;
 }
#dj {
   display: block;
   width: 100%;
   max-width: 30em;
   height: auto;
   margin: auto;
   border:  1px solid #000;
   box-shadow: 0.4em 0.4em 0.4em rgba(0, 0, 0, 0.3);
 }
 #dj[src="https://github.com/strawbs1989/coolvibes-reloaded/blob/main/images/off-air.png"] {
   animation: fade  4s ease-in-out infinite;
 }
 @keyframes fade {
  0% { opacity: 1; 
       border-radius: 0;
       max-width: 30em;
     }
 50% { opacity: 0.2;
       border-radius: 50%;
       max-width: 20em;
     }
100% { opacity: 1;
       border-radius: 0;
       max-width: 30em;
     }
 }

finally showdj.js

Code:
(function(d) {
    function onair() {
      const dj = d.querySelector('#dj'),
            tx = document.createElement('div'),
            nd = new Date(),
            dy = nd.getDay(),
            hr = nd.getHours(),                              
            mn = nd.getMinutes();
       
      tx.style.color = 'white';
      dj.insertAdjacentElement('afterend', tx);

      switch (dy) {
        case 1: // Monday
          if ((hr === 21 && mn <=59) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/billy.png';
          break;
        case 2: // Tuesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/kayley.png';
          break;
        case 3: // Wednesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/off-air.png';
          break;
        case 4: // Thursday
          if (hr === 21 && mn >=0) {
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/strawbs.png';
            tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
          }
          break;
        case 5: // Friday
          if ((hr === 13 && mn <=59) || (hr === 14 && mn <=59))
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 6: // Saturday
          if ((hr === 2 && mn <=03) {
            https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/off-air.png'
            tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 0: // Sunday
          if (hr === 21 && mn >=0) {
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/strawbs.png';
            tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
          }
          break;
        default:
          dj.src='images/off-air.png';
          break;
      }
    }
 
    setInterval(function() { onair(); }, 1000);
  })(document);


this is what i'm seeing in black and no image

Who is on air
Off-line


sorry if i'm a pain lol but i have looked all over the dam script

website: https://coolvibes-reloaded.com
 
Joined
Jul 4, 2023
Messages
341
Reaction score
39
</body> </html> <!-- partial --> <script src="./script.js"></script> </body> </html>
You have </body></html> before <script> and again </body> </html>

See the difference
HTML:
<!DOCTYPE HTML>
<html lang="en">
<html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

    <title>Who is on air</title>
    <link rel="stylesheet" href="https://github.com/strawbs1989/coolvibes-reloaded/blob/main/css/screen.css" media="screen">
  </head>
  <body>
    <noscript>
      <p>JavaScipt need to be enabled for this page to function correctly</p>
    </noscript>

    <h1>Who is on air</h1>
    <img id="dj" src="https://github.com/strawbs1989/coolvibes-reloaded/blob/main/images/off-air.png" alt="Off-line">
    <script src="https://github.com/strawbs1989/coolvibes-reloaded/blob/main/scripts/showdj.js"></script>
    <!-- partial -->
    <script  src="./script.js"></script>
  </body>
</html>

according to this

[attribute^=value]a[href^="https"]Selects every <a> element whose href attribute value begins with "https"
[attribute$=value]a[href$=".pdf"]Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value]a[href*="w3schools"]Selects every <a> element whose href attribute value contains the substring "w3schools"

you can change this
CSS:
 #dj[src="https://github.com/strawbs1989/coolvibes-reloaded/blob/main/images/off-air.png"] {
   animation: fade  4s ease-in-out infinite;
 }

to this
CSS:
 #dj[src$="off-air.png"] {
   animation: fade  4s ease-in-out infinite;
 }

another ... this meaning
JavaScript:
case 6: // Saturday
  if ((hr === 2 && mn <=03)

only 2:00am, 2:01am, 2:02am, 2:03am. hr exactly 2 (===) and minutes in range from 0 to 3
 
Joined
Jul 4, 2023
Messages
341
Reaction score
39
and the javascript code form the link above looks like this

JavaScript:
(function(d) {
  function onair() {
    const dj = d.querySelector('#dj'),
          tx = document.createElement('div'),
          nd = new Date(),
          dy = nd.getDay(),
          hr = nd.getHours(),                           
          mn = nd.getMinutes();
  
    tx.style.color = 'white';
    dj.insertAdjacentElement('afterend', tx);

    switch (dy) {
      case 1: // Monday
        if ((hr === 8 && mn <=0) {
          dj.src = 'https://drive.google.com/file/d/1K6Ki9fxFxVo3UBlA0fjPzLv6D_EpKwIX/view?usp=drive_link';
        break;
      case 2: // Tuesday
        if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
          dj.src = 'https://drive.google.com/file/d/17QW0zuz_PDgUZgXvCz7ybvK9acYraK4K/view?usp=drive_link';
        break;
      case 3: // Wednesday
        if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
          dj.src = 'https://drive.google.com/file/d/1D77ONt7JnNX1rTpNZd6lLYzfTCrXEAcJ/view?usp=drive_link';
        break;
      case 4: // Thursday
        if (hr === 21 && mn >=0) {
          dj.src = 'https://drive.google.com/file/d/1SaYUrmEwalwxXwygXP0ZthYLKW7aji_H/view?usp=drive_link';
          tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
        }
        break;
      case 5: // Friday
        if ((hr === 13 && mn <=59) || (hr === 14 && mn <=59))
          tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
        break;
      case 6: // Saturday
        if ((hr === 2 && mn <=03)) {
          dj.src = 'https://drive.google.com/file/d/1D77ONt7JnNX1rTpNZd6lLYzfTCrXEAcJ/view?usp=drive_link';
          tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
        }
        break;
      case 0: // Sunday
        if (hr === 21 && mn >=0) {
          dj.src = 'https://drive.google.com/file/d/1SaYUrmEwalwxXwygXP0ZthYLKW7aji_H/view?usp=drive_link';
          tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
        }
        break;
      default:
        dj.src='https://drive.google.com/file/d/1D77ONt7JnNX1rTpNZd6lLYzfTCrXEAcJ/view?usp=drive_link';
        break;
    }
  }

  setInterval(function() { onair(); }, 1000);
})(document);

this meaning only 8:00am - 1 minute only till 8:01am
JavaScript:
case 1: // Monday
  if ((hr === 8 && mn <=0)

if mn should be 0 (zero) just left only hr
JavaScript:
if (hr === 8)

that meanig 8:00am, 8:01am, 8:02am, ... 8:10am, 8:11am, ...8:30am, ..., 8:45am, ..., 8:58am and 8:59am - 1 hour


My proposed changes to the code
JavaScript:
(function(d) {
  function onair() {
    const dj = d.querySelector('#dj'),
          tx = document.createElement('div'),
          nd = new Date(),
          dy = nd.getDay(),
          hr = nd.getHours(),                            
          mn = nd.getMinutes();
   
    tx.style.color = 'white';
    dj.insertAdjacentElement('afterend', tx);

    switch (dy) {
      case 1: // Monday
        if ((hr === 8) { // 8:00 - 8:59 - 60 minutes - 1 hour
          dj.src = 'https://drive.google.com/file/d/1K6Ki9fxFxVo3UBlA0fjPzLv6D_EpKwIX/view?usp=drive_link';
        break;
      case 2: // Tuesday
        if (hr === 8 && (mn >= 0 && mn <= 15)) // 8:00 - 8:15 - 15 minutes
          dj.src = 'https://drive.google.com/file/d/17QW0zuz_PDgUZgXvCz7ybvK9acYraK4K/view?usp=drive_link';
        break;
      case 3: // Wednesday
        if (hr === 8 && (mn >= 0 && mn <= 15)) // 8:00 - 8:15 - 15 minutes
          dj.src = 'https://drive.google.com/file/d/1D77ONt7JnNX1rTpNZd6lLYzfTCrXEAcJ/view?usp=drive_link';
        break;
      case 4: // Thursday
        if (hr === 21) { // 21:00 - 21:59 - 60 minutes - 1 hour
          dj.src = 'https://drive.google.com/file/d/1SaYUrmEwalwxXwygXP0ZthYLKW7aji_H/view?usp=drive_link';
          tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
        }
        break;
      case 5: // Friday
                if (hr === 13 || hr === 14) // 13:00 - 14:59 - 2 hours
          tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
        break;
      case 6: // Saturday
        if (hr === 2 && mn >=03) { // 2:03 - 2:59 - 57 minutes
          dj.src = 'https://drive.google.com/file/d/1D77ONt7JnNX1rTpNZd6lLYzfTCrXEAcJ/view?usp=drive_link';
          tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
        }
        break;
      case 0: // Sunday
        if (hr === 21) { // 21:00 - 21:59 - 60 minutes - 1 hour
          dj.src = 'https://drive.google.com/file/d/1SaYUrmEwalwxXwygXP0ZthYLKW7aji_H/view?usp=drive_link';
          tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
        }
        break;
      default:
        dj.src='https://drive.google.com/file/d/1D77ONt7JnNX1rTpNZd6lLYzfTCrXEAcJ/view?usp=drive_link';
        break;
    }
  }

  setInterval(function() { onair(); }, 1000);
})(document);
 
Last edited:
Joined
Jul 4, 2023
Messages
341
Reaction score
39
another issue, all of those links, are blocked, you need to change accessibility to those links in your google drive for e.g.

JavaScript:
dj.src = 'https://drive.google.com/file/d/1K6Ki9fxFxVo3UBlA0fjPzLv6D_EpKwIX/view?usp=drive_link';
dj.src = 'https://drive.google.com/file/d/17QW0zuz_PDgUZgXvCz7ybvK9acYraK4K/view?usp=drive_link';
dj.src = 'https://drive.google.com/file/d/1SaYUrmEwalwxXwygXP0ZthYLKW7aji_H/view?usp=drive_link';
dj.src = 'https://drive.google.com/file/d/1D77ONt7JnNX1rTpNZd6lLYzfTCrXEAcJ/view?usp=drive_link';
dj.src = 'https://drive.google.com/file/d/1SaYUrmEwalwxXwygXP0ZthYLKW7aji_H/view?usp=drive_link';
dj.src = 'https://drive.google.com/file/d/1D77ONt7JnNX1rTpNZd6lLYzfTCrXEAcJ/view?usp=drive_link';

Share files from Google Drive
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,717
Messages
2,569,381
Members
44,698
Latest member
MicheleDel

Latest Threads

Top