CODEWITHSUNDEEP
javascriptjquerycsshtml
ondrejm
ondrejm

Reputation: 164

My jQuery countdown timer doesn't display on my website

My HTML:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <title>Event Website</title>
      <link rel="stylesheet" href="main.css">
      <script src="jquery-3.3.1.min.js"></script>
      <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'  type='text/css'>
   </head>
   <body>
      <div class="row" id="horniRow">
         <div class="col-md-6">
            <h3 id="nameH3">
               Event Website
            </h3>
         </div>
         <div class="col-md-6 menu" id="menuDiv">
            <ul id="menuList">
               <li><a href="">HOME</a></li>
               <li><a href="">BLOG</a></li>
               <li><a href="">SPEAKERS</a></li>
               <li><a href="">SCHEDULE</a></li>
               <li><a href="">ATTENDING</a></li>
               <li><a href="">SIGN IN</a></li>
            </ul>
         </div>
      </div>
      <div class="row" id="countdown-row">
         <div class="col-md-2"></div>
         <div class="col-md-8 text-center">
            <p id="countdownTimer"></p>
         </div>
         <div class="col-md-2"></div>
      </div>
      <div class="row" id="dolniRow">
         <div class="col-md-8"></div>
         <div class="col-md-4 id="registerBox">
            <div class="" id="registerBox">
               <h2 style=""><u style="color: #e60000">REGISTER</u></h2>
               <div style=""></div>
            </div>
         </div>
      </div>
      <script src="countdown.js"></script>
   </body>
</html>

My CSS:

 #countdownTimer {
     font-family: 'Open Sans', sans-serif;
     font-size: 700%;
     background-color:rgba(0, 0, 0, 0.3);
     color: red;
}
 body{
     background-image: url("/img/depo.jpg");
     width: 100%;
     margin: 0;
     overflow: hidden;
}
 #menuList{
     display: inline;
}
 #registerBox{
     background-color: #333333;
     position: fixed;
     right: 0px;
     bottom: 0px;
}
 ul {
     list-style-type: none;
     float: right;
     margin-top: 20px;
     margin-right: 20px;
}
 li {
     float: left;
     margin: 5px;
     text-decoration: none;
}
 #menuDiv {
     text-align: right;
}
 div ul li a {
     text-decoration: none;
     color: black;
}
 #nameH3 {
     margin-left: 10px;
}

My JS/jQuery:

var countDownDate = new Date("Sep 12, 2018 12:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an 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"
  $("#countdownTimer").html(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);

The countdown timer from my "countdown.js" file should appear somewhere in the middle of the page, but it is not there. I have both jQuery and the script file linked in my HTML. No idea why it isn't working.

This line is responsible for adding the countdown timer to my #countdownTimer paragraph.

$("#countdownTimer").html(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");

And here is the paragraph:

<p id="countdownTimer"></p>

Upvotes: 2

Views: 873

Answers (3)

goediaz
goediaz

Reputation: 652

Expanding @Arpit answer. The problem here is that you are not linking well enough the Jquery framework. It might be some path error.

In order prevent this kind of issue, I highly suggest you use CND servers to link any framework.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Another tip that I could give is that you might need to add this tag inside your <body>, at the bottom of your HTML.

This will prevent some load time issues.

Here is your exact code working as you expect.

Warning: You have the same id registerBox in two different elements. Remember that IDs should be unique.

var countDownDate = new Date("Sep 12, 2018 12:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an 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"
  $("#countdownTimer").html(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);
 #countdownTimer {
     font-family: 'Open Sans', sans-serif;
     font-size: 700%;
     background-color:rgba(0, 0, 0, 0.3);
     color: red;
}
 body{
     background-image: url("/img/depo.jpg");
     width: 100%;
     margin: 0;
     overflow: hidden;
}
 #menuList{
     display: inline;
}
 #registerBox{
     background-color: #333333;
     position: fixed;
     right: 0px;
     bottom: 0px;
}
 ul {
     list-style-type: none;
     float: right;
     margin-top: 20px;
     margin-right: 20px;
}
 li {
     float: left;
     margin: 5px;
     text-decoration: none;
}
 #menuDiv {
     text-align: right;
}
 div ul li a {
     text-decoration: none;
     color: black;
}
 #nameH3 {
     margin-left: 10px;
}
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <title>Event Website</title>
      <link rel="stylesheet" href="main.css">
      <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'  type='text/css'>
   </head>
   <body>
      <div class="row" id="horniRow">
         <div class="col-md-6">
            <h3 id="nameH3">
               Event Website
            </h3>
         </div>
         <div class="col-md-6 menu" id="menuDiv">
            <ul id="menuList">
               <li><a href="">HOME</a></li>
               <li><a href="">BLOG</a></li>
               <li><a href="">SPEAKERS</a></li>
               <li><a href="">SCHEDULE</a></li>
               <li><a href="">ATTENDING</a></li>
               <li><a href="">SIGN IN</a></li>
            </ul>
         </div>
      </div>
      <div class="row" id="countdown-row">
         <div class="col-md-2"></div>
         <div class="col-md-8 text-center">
            <p id="countdownTimer"></p>
         </div>
         <div class="col-md-2"></div>
      </div>
      <div class="row" id="dolniRow">
         <div class="col-md-8"></div>
         <div class="col-md-4 id="registerBox">
            <div class="" id="registerBox">
               <h2 style=""><u style="color: #e60000">REGISTER</u></h2>
               <div style=""></div>
            </div>
         </div>
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="countdown.js"></script>
   </body>
</html>

Upvotes: 1

Arpit Arya
Arpit Arya

Reputation: 123

include jquery correctly in your head tag as follows

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

instead of

<script src="jquery-3.3.1.min.js"></script>

Upvotes: 1

arjun
arjun

Reputation: 85

You should wrap your code inside document.ready function

$(document).ready(function(){
    var countDownDate = new Date("Sep 12, 2018 12:00:00").getTime();

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

        // Get todays date and time
       var now = new Date().getTime();

        // Find the distance between now an 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"
        $("#countdownTimer").html(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);

});

Upvotes: -1

Related Questions