Countdown code

[Dave]

Once again I have messed about with various snippets of code from the web and come up with this countdown code for portal blocks.

I should add at this point is works without errors    and I'm very please with myself for getting this far with it.

I'm using it to count down to New Year and the Quiz and Arcade reset on the site.

I'm only posting it here so you can look at it and tell me if I should have done anything differently

Code Select Expand

<h1 style="text-align: center; color:red; font-size: 35px; font-family: serif;"><b>New Year 2025</b></h1>
<h1 style="text-align: center; color:red; font-size: 10px; font-family:serif;">and</h1>
<h1><b>Quiz and Arcade Reset</b></h1>
<div id="clockdiv">
  <div>
    <span class="days"></span>
    <div class="smalltext">Days</div>
  </div>
  <div>
    <span class="hours"></span>
    <div class="smalltext">Hours</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div>
    <span class="seconds";; style="color: red;">></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>

<style>
h1{
 font-family: serif;
  text-align: center;
  color: #44C21C;
  font-weight: 60;
  font-size: 35px;
  margin: 10px 0px 10px;
}

#clockdiv{
  font-family: sans-serif;
  color: blue;
  /*display: inline-block;*/
  font-weight: 100;
  text-align: center;
  font-size: 60px;
}

#clockdiv > div{
  padding: 10px;
  border-radius: 3px;
  background: transparent;
  display: inline-block;
align-content: center;
}

#clockdiv div > span{
  padding: 15px;
  border-radius: 3px;
  background: transparent;
 display: inline-block;
}

.smalltext{
  padding-top: 5px;
  font-size: 16px;
}
</style>
<script>

function getTimeRemaining(endtime) {
  const total = Date.parse(endtime) - Date.parse(new Date());
  const seconds = Math.floor((total / 1000) % 60);
  const minutes = Math.floor((total / 1000 / 60) % 60);
  const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
  const days = Math.floor(total / (1000 * 60 * 60 * 24));
 
  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}

function initializeClock(id, endtime) {
  const clock = document.getElementById(id);
  const daysSpan = clock.querySelector('.days');
  const hoursSpan = clock.querySelector('.hours');
  const minutesSpan = clock.querySelector('.minutes');
  const secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    const t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  const timeinterval = setInterval(updateClock, 1000);
}

const deadline ='2025-01-01';
initializeClock('clockdiv', deadline);

</script>


[Dave]

Ok I take that back.

It seems that I still don't understand coding as it's messed up some of the existing text on the site. So I've removed it for the time being.

Probably the <styles> bit again, but I still can't understand how to do to code within the block, even trying to add bits from your visitor counter code

[Chen Zhen]

I'll give you some tips to attempt it on your own instead of doing it for you since you seem to want to learn javascript & html page markup.

css code belongs in the head of the document else you will flag W3C errors.
It may work but it's not the proper way to do it.

In your CSS, you have attempted to alter all h1 HTML tags & also the smalltext class which is used in many SMF themes including the default. So by using those you will likely affect other HTML on all your forum pages (this is called cascading). The clock ID's in the css are likely unique to your block code but I'm not sure without looking at it. What you need to do is make sure all the classes & ID's are unique plus use a class for your h1 tags instead of the actual tag in the CSS.

For much of the JavaScipt I suggest using JQuery when possible because it will ensure that you see the same behavior for all browsers. The thing about JavaScript is that various mainstream browsers do not always use the exact same syntax but JQuery is designed to take that into account to work on all browsers. This was more so in the past as newer versions of browsers now use the same syntax but still not in all cases so it's best to use the JQuery library that is already available for SMF.

Also JQuery provides predefined functions making it shorter for you by enabling you to use less code for the same effect.
It's a mix though.. sometimes you still use vanilla javascript where JQuery functions/syntax are not necessary.

What I showed you in the last block was using JQuery to alter the CSS of your containers & I suggest you use it.
You can also create a css file & have JQuery load that file if you find it easier that way.
If you do this then it might be easier to use a PHP block to get the global paths & then use echo for the HTML/JavaScript output.

Here is a starter... add a unique class to your h1 tags, unique class for the smalltext & might as well go with unique ids for the rest of it to avoid conflicts from other page css/output.

Code Select Expand

<h1 class="mytimecounter_title" style="text-align: center; color:red; font-size: 35px; font-family: serif;"><b>New Year 2025</b></h1>
<h1 class="mytimecounter_title" style="text-align: center; color:red; font-size: 10px; font-family:serif;">and</h1>
<h1 class="mytimecounter_title"><b>Quiz and Arcade Reset</b></h1>
<div id="mytimecounter_clockdiv">
  <div>
    <span class="mytimecounter_days"></span>
    <div class="mytimecounter_smalltext">Days</div>
  </div>
  <div>
    <span class="mytimecounter_hours"></span>
    <div class="mytimecounter_smalltext">Hours</div>
  </div>
  <div>
    <span class="mytimecounter_minutes"></span>
    <div class="mytimecounter_smalltext">Minutes</div>
  </div>
  <div>
    <span class="mytimecounter_seconds" style="color: red;">></span>
    <div class="mytimecounter_smalltext">Seconds</div>
  </div>
</div>

... change those in your CSS but try to use JQuery for your CSS & the maybe the selectors.

In your CSS it's...

Code Select Expand

.unique_class {
    color: white;
    background: black;
}

#unique_id {
    color: white;
    background: black;
}

To do the same internal css changes using JQuery it's like this (just examples):

Code Select Expand

$(".unique_class").css({"color":"white", "background-color":"black"});
$("#unique_id").css({"color":"white", "background-color":"black"});

Alternately for individual internal css changes (one thing at a time): 

Code Select Expand

$(".unique_class").css("color", "white");
$(".unique_class").css("background-color", "black");
$("#unique_id").css("color", "white");
$("#unique_id").css("background-color", "black");


To affect the document & properly apply your changes to the DOM via JavaScript/JQuery, you need to ensure your code is executed after the page loads.
To do this you can use the JQuery document ready syntax. Your JavaScript functions don't need to be within the document ready function but executing your initializeClock() function & the css changes do need to be within it.

These need to be executed after the doucment loads (put your other functione before it & add your proper css classes, ids & styles to the example below):

Code Select Expand

$(document).ready(function() {
    $(".unique_class").css({"color":"white", "background-color":"black"});
    $("#unique_id").css({"color":"white", "background-color":"black"});
    initializeClock('mytimecounter_clockdiv', '2025-01-01');
});

You don't really need to use so many constants or really use them at all if you declare all variables at the start of the JavaScript but we'll get into that later after you attempt to fix up your code.
Adjust it with the tips I gave you & post the results so I can see if you grasp what I explained.

[Dave]

OK thanks Chen, I'll look at it later