HTML


<div id="countdown">
    <h1>Welcome #2k18</h1>
    <div id="clock"></div>
    <div id="units">
        <span>Days</span>
        <span>Hours</span>
        <span>Minutes</span>
        <span>Seconds</span>
    </div>
</div>


CSS


/*
** Happy New Year / #2k18
** @webbeloz
*/
html, body {
	height: 100%;
}
* {
	margin: 0;
  	padding: 0;
}
body {
	background-color: #1c383d;
	font-family: Tahoma;
}
h1 {
	display: block;
	color: #fff;
	text-align: center;
	font-size: 5rem;
	letter-spacing: 10px;
}
#countdown {
  position: relative;
  width: 100%;
  z-index: 999
}
#countdown #clock {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}
#countdown #clock span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  flex-basis: 20%;
  font-size: 9.0rem;
  margin:  0 2.5%;
  color: white;
  letter-spacing: 0.005rem;
  border-radius: 20px;
  box-sizing: border-box;
}
#countdown #clock span:nth-child(1) {
	background: #DA3B36;
}
#countdown #clock span:nth-child(2) {
	background: #2e6da4;
}
#countdown #clock span:nth-child(3) {
	background: #f6bc58;
}
#countdown #clock span:nth-child(4) {
	background: #5CB85C;
}
#countdown #clock:after {
	content: ".";
	display: block;
	clear: both;
}
#countdown #units span {
  float: left;
  display: block;
  width: 25%;
  text-align: center;
  margin-top: 10px;
  color: #ddd;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 2px;
  text-shadow: 1px 1px 1px 1px rgba(10,10,10,0.7);
}
/*#countdown div spann.turn {
  -webkit-animation: turn 222ms ease forwards;
  animation: turn 222ms ease forwards;
}*/
@-webkit-keyframes turn {
	0%{transform: rotatex(0deg)}
	100%{transform: rotatex(360deg)}
}
@keyframes turn {
	0%{transform: rotatex(0deg)}
	100%{transform: rotatex(360deg)}
}



JS


function updateTimer(deadline){
	var time = deadline - new Date();
	return{
		'days': Math.floor( time/(1000*60*60*24) ),
		'hours': Math.floor( (time/(1000*60*60)) % 24),
		'minutes': Math.floor( (time/1000/60) %60 ),
		'seconds': Math.floor( (time/1000) %60 ),
		'total': time
	};
}

/*function  animateClock(span){
	span.className = "turn";
	setTimeout(function(){
		span.className = "";
	},950);
}*/

function startTimer(id,deadline){
	var timerInterval = setInterval(function() {
	  var clock = document.getElementById(id);
	  var timer = updateTimer(deadline);
	  clock.innerHTML =
		'<span class"t-time">' + timer.days    + '</span>'
		+'<span class"t-time">' + timer.hours   + '</span>'
		+'<span class"t-time">' + timer.minutes + '</span>'
		+'<span class"t-time">' + timer.seconds + '</span>';
		
		var spans = clock.getElementsByTagName("span");
		//animateClock(spans[3]);
		//if(timer.seconds == 59) animateClock(spans[2]);
		//if(timer.minutes == 59 && timer.seconds == 59) animateClock(spans[1]);
		//if(timer.hours == 23 && timer.minutes == 59 && timer.seconds == 59) animateClock(spans[0]);
		
		if(timer.total < 1){
			clearInterval(timerInterval);
			clock.innerHTML ='<span>0</span><span>0</span><span>0</span><span>0</span>';
		}
	},1000);
}
window.onload = function(){
	var deadline = new Date("January 1, 2018 00:00:00");
	startTimer("clock",deadline);
};





CodePlay Playground as you play with the keyboard:

Console

The CodePlay Code Box Editors Playground is very simple to use, anyone can directly interact with a minimum of knowledge of HTML experience, live an idea or a project. We believe that only 5% of the developers has the full capacity and knowledge of each key on the keyboard. Therefore we decided to put together a single command from the Key [Esc] == 27.
For every need and every situation the keyboard [Esc] key fixes and puts in place the Original Initial Code Box Editors.
All this without losing the contents of each Box Editors .
!Enjoy your CodePlay.


CodePlay Playground is a project based on WordPress entirely revised to have a clean and dynamic HTML output.

Editor:

- [Esc] To reset the Box Editors and the closure of any open window overlay, including the Output (FULL) Preview.

New! - Double Click to Expand /Open & Close All Box Editors

New! - Ctrl + Up/Down to Show /Hide the Footer Bar. This allows hide footer bar when you want, + ESC to Back.

New! - Preview in Full page is now also possible via dblClick on the Vertical Drag-bar. Each keyboard action can be Reset via the ESC button.


Ex.
- Close this? [Esc], or a Click outside.


Front End User - New /Save Post is Now Open, Register *required.
New Play Now