JSFiddle - React, Tailwind, and code Playground

by vicky081

HTML

<div id="snowingScreen"><img style="float:left;" src="http://s13.postimg.org/3jmerc1zn/santa_2_e0.gif"/><div id="time"></div><img style="float:left;" src="http://s9.postimg.org/n3mnbxl6j/santa_2_e0_59918.gif"/>
</div>

CSS

#time {
    float:left;
    
}
#snowingScreen {
    text-align:center;
    width:auto;
    height:auto;
}
html, body{
	margin:0;
	padding:0;
	overflow:hidden; /* hide the scroll bar */
}

#snowingScreen{
	background:#ccc;
    
    
}

.snow{
	color:white;
	width:10px;
	height:10px;
}
#time_message {
    text-align:center;
  color:green;
    font-family:verdana;
}
#days {
    color:white;
    width:auto;
    height:auto;
    background-color:#7fbb00;
    border-radius:5px;
    text-align:center;
    padding:10px;
    font-size:16px;
    font-family:cursive;
    float:left;
}
#hours {
   color:white;
    width:auto;
 height:auto;
    background-color:#ea0a8e;
    border-radius:5px;
     float:left;
    text-align:center;
    padding:10px;
    font-size:16px;
    font-family:cursive;
}
#minutes {
color:white;
    width:auto;
 height:auto;
    background-color:#ea0a8e;
     float:left;
    border-radius:5px;
    text-align:center;
    padding:10px;
    font-size:16px;
    font-family:cursive;
}
#seconds {
   color:white;
   width:auto;
     height:auto;
    background-color:#7fbb00;
    border-radius:5px;
     float:left;
    text-align:center;
    padding:10px;
    font-size:16px;
    font-family:cursive;
}
#bottom_image {
    position:relative;
    bottom:0px;
}

JavaScript

$(function(){
    var calculate_christmas = setInterval(function(){
        date_future = new Date(new Date('2013/12/25'));
        date_now = new Date();

        seconds = Math.floor((date_future - (date_now))/1000);
        minutes = Math.floor(seconds/60);
        hours = Math.floor(minutes/60);
        days = Math.floor(hours/24);
        
        hours = hours-(days*24);
        minutes = minutes-(days*24*60)-(hours*60);
        seconds = seconds-(days*24*60*60)-(hours*60*60)-(minutes*60);

        $("#time").html("<div id='time_message'>Time until Christmas</div><br/><p id='days'> Days: " + days + " </p><p id='hours'> Hours: " + hours + "</p><p id='minutes'>Minutes: " + minutes + "</p><p id='seconds'> Seconds: " + seconds+ "</p>");
    },1000);
});



	// get the height and width of the browser window
	var windowHeight = $(window).height();
	var windowWidth = $(window).width();

	// set the height and width of the #snowingScreen div equivalent to that of the window's
	$('#snowingScreen').css('height', windowHeight);
	$('#snowingScreen').css('width', windowWidth);	


	// this function is to generate snow randomly scattered around screen
	function generateSnow() {
		
		// generate snow using a for loop
		for(i=0; i<15; i++){
		
			// randomize the top position of the snow
			var snowTop = Math.floor(Math.random()* (windowHeight/2) );		
			
			// randomize the left position of the snow
			var snowLeft = Math.floor(Math.random()* (windowWidth - 10) );	
	
			// appending the snow to the #snowingScreen
			$('body').append(
			
				// generate the div representing the snow and setting properties using various jQuery methods				
				$('<div />')
					.addClass('snow')
					.css('top', snowTop)
					.css('left', snowLeft)
                    .css('position','absolute')
                .html('✸')

			);
		
		}
	
		// repeat the generateSnow() function for each 3000 seconds
        window.setTimeout(generateSnow, 3000);  	
	
	}
	
	// this function is to alter the top...