HTML


<div class="clock-input">
	<input type="date" name="time-to" class="time-to" id="time-to" value="" onchange="calcTime(this.value)">
  <span>#Zeroillusion</span>
</div>
<div class="container">
	<div class="clock-column">
		<p class="clock-day clock-timer"></p>
		<p class="clock-label">Days</p>
	</div>

	<div class="clock-column">
		<p class="clock-hours clock-timer"></p>
		<p class="clock-label">Hours</p>
	</div>

	<div class="clock-column">
		<p class="clock-minutes clock-timer"></p>
		<p class="clock-label">Minutes</p>
	</div>

	<div class="clock-column">
		<p class="clock-seconds clock-timer"></p>
		<p class="clock-label">Seconds</p>
	</div>
</div>


CSS


html {
	font-size: 62.5%;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	line-height: 1rem;
	letter-spacing: .08rem;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
	font-size: 1.4rem;
	font-weight: inherit;
    text-shadow: 2px -2px white;
	/*background: linear-gradient(to top, cyan, black);*/
  background: repeating-linear-gradient(
	90deg,
	#fff,
	#fff 200px,
	#000 0px,
	#000 500px);
	height: 100vh;
	width: 100vw;
  margin: 0;
}

.container {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 20rem;
	width: 50rem;
  	background-color: transparent;
  /*background-size: 25% 38%;
  background-repeat: repeat-x;
  background-image: linear-gradient(to right, black 35px, transparent 25px);
  background-position: -8.5%;*/
  border-radius: 3px;
  box-shadow: none;
}

.clock-column {
	margin-right: 7rem;
	text-align: center;
	position: relative;

	&::after {
		content: ':';
		display: block;
		height: .25rem;
		width: .25rem;
		font-size: 36px;
		font-weight: 200;
		color: #131313;
		position: absolute;
		top: 60px;
		right: -35px;
	}
	&:last-child {
		&::after {
			display: none;
		}
	}
}

.clock-column:last-child {
	margin-right: 0;
}

.clock-label {
	padding-top: 10px;
	text-transform: uppercase;
	color: #131313;
	font-size: 14px;
	text-align: center;
	border-top: 1px solid rgba(19, 19, 19, 0.5);
}

.clock-timer {
	color: #131313;
	font-size: 36px;
	line-height: 1;
}
.clock-input {
	clear: both;
	text-align: center;
	max-width: 500px;
	width: 100%;
	margin: 0 auto 10px;
}
.clock-input span {
	display: block;
	padding: 70px 0 0;
	font-size: 5rem;
}
input#time-to {
	padding: 5px;
	border: 0;
	border-radius: 3px;
	font-size: 16px;
	font-family: monospace;
	text-align: center;
	color: #010101;
	background-color: #fff;
}
.done {
	color: #fff;
	font-weight: 600;
}


JS


loadEventListeners();

function loadEventListeners() {
	document.addEventListener('DOMContentLoaded', function() { calcTime(); });
}

var timeTo = document.getElementById('time-to').value,
		date,
		now = new Date(),
		newYear = new Date('03,12,2019,21:00').getTime(),
		startTimer = '';

function calcTime(dates) {

	clearInterval(startTimer);

	if(typeof(dates) == 'undefined'){
		date = new Date(newYear).getTime();
	}else {
		date = new Date(dates).getTime();
	}

	function updateTimer(date){

		var now = new Date().getTime();
		var distance = date - now;

		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);

		document.querySelector('.clock-day').innerHTML = days;
		document.querySelector('.clock-hours').innerHTML = hours;
		document.querySelector('.clock-minutes').innerHTML = minutes;
		document.querySelector('.clock-seconds').innerHTML = seconds;

		if(now >= date){
			clearInterval(startTimer);
			document.querySelector('.clock-day').innerHTML = 'D';
			document.querySelector('.clock-hours').innerHTML = 'O';
			document.querySelector('.clock-minutes').innerHTML = 'N';
			document.querySelector('.clock-seconds').innerHTML = 'E';
		}
	}

	startTimer = setInterval(function() { updateTimer(date); }, 1000);

}


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