Tower Countdown

by Devilin Pixy

HTML

<!-- Display the countdown timer in an element -->
<div id=timerOne>
  <h1>Project Skyscraper</h1>
  <hr>
  <h2 id=title>Tower Countdown</h2>
  <div id="timer1" class="timer">
    <table>
      <tr>
        <th class="emptyHeader"></th>
        <th>Days</th>
        <th>Hours</th>
        <th>Minutes</th>
        <th>Seconds</th>
      </tr>
      <tr>
        <td id="startend">Starts in</td>
        <td id="days"></td>
        <td id="hours"></td>
        <td id="mins"></td>
        <td id="secs"></td>
      </tr>
    </table>
    <span id="date">date</span>
  </div>
</div>

CSS

body {
  background-color: #222222;
  color: #c8c8c8;
}

#timerOne {
  width: 100%;
  text-align: center;
}

h1 {
  font-size: 2.4em;
  color: #008888;
}

h2 {
  font-size: 2em;
  color: #eeeeee;
}

h1, h2 {
  margin: 0;
}

.emptyHeader {
  border-style: none;
}

table {
  margin: 0 auto 0 auto;
}

th {
  /* border: 1px solid black; */
  font-size: 1.6em;
  font-weight: normal;
}

td {
  width: 100px;
  font-size: 1.6em;
  font-weight: bold;
  color: #00ffff;
}

.expired {
  font-size: 1.6em;
  font-weight: bold;
  color: red;
}

JavaScript

var startTime = 1783268176;
var endTime = 1783480789;
var startDate = new Date(startTime * 1000).toUTCString();
var endDate = new Date(endTime * 1000).toUTCString();
document.getElementById("date").innerHTML = startDate;
var currentExp = 0;
// Start ==========================
var x1Start = setInterval(function(){
  var now = new Date().getTime(); // now in ms
  var diff = startTime - (now / 1000); // diff in s
  var days = Math.floor(diff / (3600 * 24));
  var hours = Math.floor(diff % (3600 * 24) / 3600);
  var minutes = Math.floor(diff % 3600 / 60);
  var seconds = Math.floor(diff % 60);
  document.getElementById("days").innerHTML = days;
  document.getElementById("hours").innerHTML = hours;
  document.getElementById("mins").innerHTML = minutes;
  document.getElementById("secs").innerHTML = seconds;
  if(diff < 0){
    clearInterval(x1Start);
    document.getElementById("startend").innerHTML = "Ends in";
		document.getElementById("date").innerHTML = endDate;
    currentExp = 1;
  }
},1000)
var x1End = setInterval(function(){
	if(currentExp >= 1){
    var now = new Date().getTime(); // now in ms
    var diff = endTime - (now / 1000); // diff in s
    var days = Math.floor(diff / (3600 * 24));
    var hours = Math.floor(diff % (3600 * 24) / 3600);
    var minutes = Math.floor(diff % 3600 / 60);
    var seconds = Math.floor(diff % 60);
    document.getElementById("days").innerHTML = days;
    document.getElementById("hours").innerHTML = hours;
    document.getElementById("mins").innerHTML = minutes;
    document.getElementById("secs").innerHTML = seconds;

    if(diff < 0){
      clearInterval(x1End);
      document.getElementById("timer1").innerHTML = "EXPIRED"; //EXPIRED or SOON™
      document.getElementById("timer1").className = "expired";
    }
	}
},1000)