upman/colorfultime.js

## colorfultime.js
var foo = setInterval(function(){updateTime()},1000);
function updateTime() {
    var d = new Date();
    var time = d.toTimeString().split(" ")[0];
    var colorhex = time.replace(/:/g,"");

    var container = document.getElementById("container");
    var time_text = document.getElementById("time_text")

    time_text.innerHTML = "#" + time;
    container.style.backgroundColor = "#" + colorhex;

}

function fullScreen(id){
    var element = document.getElementById(id);

    if(element.mozRequestFullScreen){
        element.mozRequestFullScreen();
        //Firefox
    }
    else if(element.webkitRequestFullScreen){
        element.webkitRequestFullScreen();
        //Chrome & Safari
    }
}

## index.html
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="colorfultime.js"> </script>
</head>

<body>

<div id ="container" >

<div id="fullscreen_icon_container" onclick="fullScreen('container')" >
	<img title="Fullscreen" id="fullscreen_icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAABmJLR0QA/wD/AP+gvaeTAAACB0lEQVR4nO3awW6DMBAG4T9V37nXPfat20PuKSnYXjzzSdwIWGS0Ek4SSZIkSZIkSZIkSZK0m0eSn9WL0DofqxegtQwAzgDgDADOAOAMAM4A4D4PnPMYvgqN9HKfxwkAZwBwBgBnAHAGAGcAcAYAZwDnfef5rr3qOG34DQAqfQP48/MGcI2KAeBVDACvYgB4FQPAqxgAXsUA8CoGgFcxALyKAeBVDACvYgB4FQPAqxgAXsUA8CoGgFcxALyKAeBVDACvYgB4FQPAqxgAXsUA8CoGgFcxALyKAeBVDACvYgB4FQPAqxgA3veBc4YH8PXuqjXV8AB+8hxH6mlKAEbQ17QAjKCnqQEYQT/TAzCCXpYEYAR9LAvACHpYGoARrLc8ACNYq0UARrBOmwCMYI1WARjBfO0CMIK5WgZgBPO0DcAI5mgdgBGM1z4AIxjrFgEYwTi3CcAIxrhVAEZwvdsFYATXumUARnCd2wZgBNe4dQBGcN7tAzCCc7YIwAj+b5sAjOB/tgrACN63XQBG8J4tAzCC47YNwAiOefkMPy+4weOCa2iRj9UL0FoGAGcAcAYAZwBwBgBnAHCPHNvs0aacAHAGAGcAcAYAZwBwBgBnAHCE3/LP7nNs/YycAHAGAGcAcAYAZwBwBgBnAHAd3nHp/0dY+h04AeAMAM4A4AwAzgDgDADOAOB+AbGd7gLC/+LuAAAAAElFTkSuQmCC"/>
</div>

<p id="time_text"></p>

<p id="explanation">What's this? </p>

</div>

</body>
</html>

## style.css
#container{
    width: 100%;
    height: auto;
    bottom: 0px;
    top: 0px;
    left: 0;
    position: absolute;
}

#time_text {
	font-family: Helvetica;
	font-size: 10em;
	font-weight: bold;
    	text-align: center;
	vertical-align: middle;
	line-height: 100%;
	color: white;
    	text-shadow: 0 0 5px black;
}

#fullscreen_icon_container {
	position: absolute;
	top: 10px;
	right: 10px;
	height: 55px;
	width: 60px;
    	border: 3px solid black;
    	background-color: white;
}

#fullscreen_icon{
    position: absolute;
    left: 5px;
    top: 1px;
    height: 50px;
    width: 50px;
}

p#explanation{
    font-family: Helvetica;
    font-weight: bold;
    font-size: 1em;
    color: white;
    left: 0px;
    bottom: 0px;
    position: absolute;
    text-shadow: 0 0 2px black;
}

p#explanation::after {
    content: ">  A colorful clock which uses the time of the day as the hexadecimal color code for the background";
    opacity: 0;

    -webkit-transition: all 0.7s;
    transition: all 0.7s;
}

p#explanation:hover:after {
    opacity: 1;
}
	var foo = setInterval(function(){updateTime()},1000);
	function updateTime() {
	var d = new Date();
	var time = d.toTimeString().split(" ")[0];
	var colorhex = time.replace(/:/g,"");

	var container = document.getElementById("container");
	var time_text = document.getElementById("time_text")

	time_text.innerHTML = "#" + time;
	container.style.backgroundColor = "#" + colorhex;

	}

	function fullScreen(id){
	var element = document.getElementById(id);

	if(element.mozRequestFullScreen){
	element.mozRequestFullScreen();
	//Firefox
	}
	else if(element.webkitRequestFullScreen){
	element.webkitRequestFullScreen();
	//Chrome & Safari
	}
	}
	<!DOCTYPE html>
	<html>

	<head>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="colorfultime.js"> </script>
	</head>

	<body>

	<div id ="container" >

	<div id="fullscreen_icon_container" onclick="fullScreen('container')" >
	<img title="Fullscreen" id="fullscreen_icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAABmJLR0QA/wD/AP+gvaeTAAACB0lEQVR4nO3awW6DMBAG4T9V37nXPfat20PuKSnYXjzzSdwIWGS0Ek4SSZIkSZIkSZIkSZK0m0eSn9WL0DofqxegtQwAzgDgDADOAOAMAM4A4D4PnPMYvgqN9HKfxwkAZwBwBgBnAHAGAGcAcAYAZwDnfef5rr3qOG34DQAqfQP48/MGcI2KAeBVDACvYgB4FQPAqxgAXsUA8CoGgFcxALyKAeBVDACvYgB4FQPAqxgAXsUA8CoGgFcxALyKAeBVDACvYgB4FQPAqxgAXsUA8CoGgFcxALyKAeBVDACvYgB4FQPAqxgA3veBc4YH8PXuqjXV8AB+8hxH6mlKAEbQ17QAjKCnqQEYQT/TAzCCXpYEYAR9LAvACHpYGoARrLc8ACNYq0UARrBOmwCMYI1WARjBfO0CMIK5WgZgBPO0DcAI5mgdgBGM1z4AIxjrFgEYwTi3CcAIxrhVAEZwvdsFYATXumUARnCd2wZgBNe4dQBGcN7tAzCCc7YIwAj+b5sAjOB/tgrACN63XQBG8J4tAzCC47YNwAiOefkMPy+4weOCa2iRj9UL0FoGAGcAcAYAZwBwBgBnAHCPHNvs0aacAHAGAGcAcAYAZwBwBgBnAHCE3/LP7nNs/YycAHAGAGcAcAYAZwBwBgBnAHAd3nHp/0dY+h04AeAMAM4A4AwAzgDgDADOAOB+AbGd7gLC/+LuAAAAAElFTkSuQmCC"/>
	</div>

	<p id="time_text"></p>

	<p id="explanation">What's this? </p>

	</div>

	</body>
	</html>
	#container{
	width: 100%;
	height: auto;
	bottom: 0px;
	top: 0px;
	left: 0;
	position: absolute;
	}

	#time_text {
	font-family: Helvetica;
	font-size: 10em;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	line-height: 100%;
	color: white;
	text-shadow: 0 0 5px black;
	}

	#fullscreen_icon_container {
	position: absolute;
	top: 10px;
	right: 10px;
	height: 55px;
	width: 60px;
	border: 3px solid black;
	background-color: white;
	}

	#fullscreen_icon{
	position: absolute;
	left: 5px;
	top: 1px;
	height: 50px;
	width: 50px;
	}

	p#explanation{
	font-family: Helvetica;
	font-weight: bold;
	font-size: 1em;
	color: white;
	left: 0px;
	bottom: 0px;
	position: absolute;
	text-shadow: 0 0 2px black;
	}

	p#explanation::after {
	content: "> A colorful clock which uses the time of the day as the hexadecimal color code for the background";
	opacity: 0;

	-webkit-transition: all 0.7s;
	transition: all 0.7s;
	}

	p#explanation:hover:after {
	opacity: 1;
	}