Here's a look at 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>
Take a look at the CSS I'm using:
#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;
}
This is the JavaScript/jQuery code in use:
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 should be displayed in the middle of my page, as stated in my "countdown.js" file. However, it doesn't seem to be showing up. Both jQuery and the script file are correctly linked within my HTML structure, so I'm unsure why it's not working.
The following line should render the countdown timer inside the paragraph with the ID #countdownTimer:
$("#countdownTimer").html(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");
And here is where the countdown timer should appear:
<p id="countdownTimer"></p>