Stilize var in css

Bootstrap Studio Help
1

Hey guys,

Today I tryed to create my coming soon webpage but I have a little situation here :smiley:
I would like to have some type of countodown timer to date when I will launch my website, but…
Serching through internet lead me to that timer, and yes It’s work like a charm when I import it to BS but there is a little problem.

eeee

I would like to make text downside from counter, like in picture but… when the minutes gets one more number the mess i starting, numbers goin to one side, text stays to other side…

My question is can I stilize variables which I can finde in .js file in css to make some space between numbers (days / hours / minutes / secounds) ?

If I can not, is there some other way to make a space between them?

p.s sry for my bad English :smiley:

2

It will be easier to help you from your code…

3

@Frenchy i left a code in hiperlink but also I have it here :slight_smile:

   // Set the date we're counting down to
var countDownDate = new Date("Jan 1, 2021 00:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = countDownDate - now;
    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days + " " + hours + " " + minutes + " " + seconds + " ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
4

You can do something like this

5

Flipdown version…

Flipper

1 Like
6

Can you post code? or css file here?

7

This may be of interest also…

Styled JavaScript Countdown Clock

Then add margins…(and media queries)

#clockdiv > div {
  margin-right: 20px;
  margin-left: 20px;
}
8

Here’s one I used on a site a long time ago. Don’t recall where or how I found it, but it worked well enough.

<!-- Display the countdown timer in an element -->
<p id="demo"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("dec 18, 2020 12:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
 var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
 + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>
9

I uploaded it to the online library, search for The Final Countdown
It is a variant of your js file no external js library

10

I believe from the same place as OP :upside_down_face:

11

Maybe you try with this jquery countdown plugin. When you go to “Examples”, you see a version made for Bootstrap.