Learn to code this Christmas countdown

December 22, 2017

in General Talk

No Comments

3937

It’s only three days until Christmas, and the days are approaching as this calendar counts it down. Today, we’ll show you how to code it in HTML, CSS, and JavaScript.

Insert this HTML code in an index.html file:

<canvas></canvas>
<div class=”loop”></div>
<div class=”no” id=”no”>X</div>
<div class=”days” id=”days”>DAYS</div>
<div class=”line”></div>
<div class=”text” id=”text”>UNTIL CHRISTMAS</div>

Next, add this CSS in a stylesheet.css file:

body{
margin: 0;
padding: 0;
background: #100d04;
overflow: hidden;
}

canvas{
-webkit-filter: blur(8px);
}

div.no{
position: absolute;
top: -webkit-calc(50% – 100px);
left: -webkit-calc(50% – 50px);
background: rgb(163,114,46); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(163,114,46,1) 0%, rgba(208,157,47,1) 0%, rgba(255,254,170,1) 67%, rgba(254,218,79,1) 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(163,114,46,1)), color-stop(0%,rgba(208,157,47,1)), color-stop(67%,rgba(255,254,170,1)), color-stop(99%,rgba(254,218,79,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* IE10+ */
background: linear-gradient(135deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#a3722e’, endColorstr=’#feda4f’,GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border: 2px solid #e1c15c;
border-radius: 5px;
font-family: Arial Black;
font-size: 72px;
width: 130px;
height: 100px;
text-align: center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

div.days{
position: absolute;
top: -webkit-calc(50% – 10px);
left: -webkit-calc(50% – 95px);
background: rgb(163,114,46); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(163,114,46,1) 0%, rgba(208,157,47,1) 0%, rgba(255,254,170,1) 67%, rgba(254,218,79,1) 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(163,114,46,1)), color-stop(0%,rgba(208,157,47,1)), color-stop(67%,rgba(255,254,170,1)), color-stop(99%,rgba(254,218,79,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* IE10+ */
background: linear-gradient(135deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#a3722e’, endColorstr=’#feda4f’,GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: Arial Black;
font-size: 82px;
}

div.line{
position: absolute;
top: -webkit-calc(50% + 90px);
left: -webkit-calc(50% – 140px);
background: rgb(163,114,46); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(163,114,46,1) 0%, rgba(208,157,47,1) 0%, rgba(255,254,170,1) 67%, rgba(254,218,79,1) 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(163,114,46,1)), color-stop(0%,rgba(208,157,47,1)), color-stop(67%,rgba(255,254,170,1)), color-stop(99%,rgba(254,218,79,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* IE10+ */
background: linear-gradient(135deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#a3722e’, endColorstr=’#feda4f’,GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
width: 350px;
height: 1px;
}

div.text{
position: absolute;
top: -webkit-calc(50% + 100px);
left: -webkit-calc(50% – 110px);
background: rgb(163,114,46); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(163,114,46,1) 0%, rgba(208,157,47,1) 0%, rgba(255,254,170,1) 67%, rgba(254,218,79,1) 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(163,114,46,1)), color-stop(0%,rgba(208,157,47,1)), color-stop(67%,rgba(255,254,170,1)), color-stop(99%,rgba(254,218,79,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* IE10+ */
background: linear-gradient(135deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#a3722e’, endColorstr=’#feda4f’,GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: Arial;
font-size: 32px;
}

div.loop{
position: absolute;
top: -webkit-calc(50% – 134px);
left: -webkit-calc(50% + 12px);
border: 2px solid #e1c15c;
border-radius: 0 50px 50px 50px;
width: 30px;
height: 30px;
-webkit-transform: rotate(265deg);
}

div.loop:after{
content: ”;
position: absolute;
top: -31px;
left: 0px;
border: 2px solid #e1c15c;
border-radius: 0 50px 50px 50px;
width: 30px;
height: 30px;
-webkit-transform: rotate(280deg);
}

div.loop:before{
content: ”;
position: absolute;
top: -8px;
left: -16px;
border-left: 2px solid #e1c15c;
border-bottom: 2px solid #e1c15c;
width: 10px;
height: 10px;
-webkit-transform: rotate(230deg);
}

Now, for the most important part: the JavaScript. This will automatically count down the days so that you don’t have to edit it every day.

window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();

var canvas = document.getElementsByTagName(“canvas”)[0];
var ctx = canvas.getContext(“2d”);

var w = window.innerWidth, h = window.outerHeight;
canvas.width = w;
canvas.height = h;

var circles = 60;
var circle_array = [];

function init(){
ctx.fillStyle = “#100d04”;
ctx.rect(this.x,this.y,w,h);
ctx.fill();
for(var i=0;i<circles;i++){
var c = new circle();
circle_array.push(c);
}
var d = new Date();
var day = d.getDate();
var days_to_go = 25 – day;
if(d.getMonth() != 11){
days_to_go = -1;
}
if(days_to_go == 0){
// IT’S CHRISTMAS
document.getElementById(“no”).innerHTML = “X”;
document.getElementById(“days”).innerHTML = “CHRISTMAS”;
document.getElementById(“days”).style.left = “-webkit-calc(50% – 240px)”;
document.getElementById(“text”).innerHTML = “IS HERE”;
document.getElementById(“text”).style.left = “-webkit-calc(50% – 40px)”;
}
else if(days_to_go < 0){
// IT’S CHRISTMAS
document.getElementById(“no”).innerHTML = “X”;
document.getElementById(“days”).innerHTML = “CHRISTMAS”;
document.getElementById(“days”).style.left = “-webkit-calc(50% – 240px)”;
document.getElementById(“text”).innerHTML = “HAS PAST, COME BACK NEXT YEAR”;
document.getElementById(“text”).style.left = “-webkit-calc(50% – 240px)”;
}
else{
document.getElementById(“no”).innerHTML = “”+days_to_go+””;
}
}

function circle(){
this.x = Math.random()*w;
this.y = Math.random()*h;
this.r = 0;
this.r_max = Math.floor(Math.random() * 55)+15;
this.opacity = Math.floor(Math.random() * 1)+0.2;
this.draw = function(){
ctx.fillStyle = “hsla(48,97%,59%,”+this.opacity+”)”;
ctx.beginPath();
ctx.arc(this.x,this.y,this.r, 0, Math.PI*2, false);
ctx.fill();
}
}

function drawscene(){
ctx.fillStyle = “rgba(0,0,0,1)”;
ctx.rect(0,0,w,h);
ctx.fill();
for(var i=0;i<circle_array.length;i++){
if(circle_array[i].r>=circle_array[i].r_max){
if(circle_array[i].opacity<0.01){
circle_array[i] = new circle();
}
else{
circle_array[i].opacity -= 0.01;
}
}
else{
circle_array[i].r += Math.random()*0.3;
}
circle_array[i].draw();
}
}

function animloop() {
drawscene();
requestAnimFrame(animloop);
}
init();
animloop();