Pizza Clock

FEATURED

In this example below you will see how to do a Pizza Clock with some HTML / CSS and Javascript

Designed for use with Chrome. hover them :)

Thumbnail
This awesome code was written by Cliff Wilks, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Cliff Wilks ©
  • HTML
  • CSS
  • JavaScript
    <div class="pizzaTime"><span class="pizza">Pizza</span> <span class="lunch">Lunch</span></div>
	
	
<div class="clockbox">
<p id="countdown1" style="display:none"></p>
<p class="colon" style="display:none"> :</p>
<p id="countdown2" style="display:none"></p>
<p class="colon" style="display:none"> :</p>
<p id="countdown3" style="display:none"></p>
<p class="colon" style="display:none"> :</p>
<p id="countdown4" style="display:none"></p>
</div>

/*Downloaded from https://www.codeseek.co/catalyst_red/pizza-clock-LryOzZ */
    
body {
	background-color: #000;
}

p {
  text-align: center;
  font-size: 60px;
}

#countdown1,
#countdown2,
#countdown3,
#countdown4 {
	color: white;
	width: 130px;
	margin: 0 auto;
	padding: 20px;
	display: inline-block;
}

.clockbox {
	width: 900px;
	margin: 0 auto;
	display: block;
	text-align: center;
	font-family: 'Monoton', cursive;
  -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  -moz-animation: neon1 1.5s ease-in-out infinite alternate;
  animation: neon1 1.5s ease-in-out infinite alternate;
}

.colon
{
	width: 20px;
	display: inline-block;
	padding-left: 15px;
}

.pizzaTime {
	text-align: center;
  	font-size: 7em;
  	margin: 50px 0 30px 0;
	color: #fff;
  font-family: 'Monoton', cursive;
  -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  -moz-animation: neon1 1s ease-in-out infinite alternate;
  animation: neon1 1s ease-in-out infinite alternate;
}

.pizza {
	position: relative;
	animation: moveinleft 2s linear;
}

.lunch {
	position: relative;
	animation: moveinright 2s linear;
}

@-webkit-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
  }
}

@keyframes moveinleft {
	0% {left: -200px; opacity: 0.0;}
	45% {opacity: 0.2;}
	90% {left: 10px;}
	100% {left: 0px;}
}

@keyframes moveinright {
	0% {left: 200px; opacity: 0.0;}
	45% {opacity: 0.2;}
	90% {left: -10px;}
	100% {left: 0px;}
}


/*Downloaded from https://www.codeseek.co/catalyst_red/pizza-clock-LryOzZ */
    // Set the date we're counting down to
var countDownDate = new Date("July 25, 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);
    
    // Output the result in elements according to measure of time
    document.getElementById("countdown1").innerHTML = days + "d";
	document.getElementById("countdown2").innerHTML = hours + "h";
    document.getElementById("countdown3").innerHTML = minutes + "m";
	document.getElementById("countdown4").innerHTML = seconds + "s";
    
    // If the count down is over, have 00 displayed 
   if (distance < 0) {
        clearInterval(x);
        document.getElementById("countdown1").innerHTML = "00";
    }
	
	if (distance < 0) {
        clearInterval(x);
        document.getElementById("countdown2").innerHTML = "00";
    }
}, 1000);

window.setInterval(function(){

  var current = new Date();
  var reveal  = new Date("July 21, 2017 10:05:00")

if(current.getTime()>reveal.getTime()){
    $('#countdown1').show();
  }
  if(current.getTime()>reveal.getTime()){
    $('#countdown2').show();
  }
  if(current.getTime()>reveal.getTime()){
    $('#countdown3').show();
  }
  if(current.getTime()>reveal.getTime()){
    $('#countdown4').show();
  }
  if(current.getTime()>reveal.getTime()){
    $(".colon").show();
  }
}, 1000);

Comments