<!DOCTYPE html>
<html>
    <head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

		<meta charset="UTF-8" />
		<title> Lexical Clock</title>
		<link type="text/css" rel="stylesheet" href="style.css" />
		<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="script.js"></script>
	</head>

	<body>
		<div id="main">
			<div class="row">
				<div id="its">It is</div> <div id="half">  half</div> <div id="tenMod">ten</div> 
			</div>

			<div class="row">
				<div id="quarter">quarter</div> <div id="twenty">twenty</div>
			</div>
	
			<div class="row">
				<div id="fiveMod">five</div> <div id="minutes">minutes</div> <div id="to">to</div>
			</div>
		
			<div class="row">
				<div id="past">past</div> <div id="one">one</div> <div id="three">three</div>
			</div>
			
			<div class="row">
				<div id="two">two</div> <div id="four">four</div> <div id="five">five</div>
			</div>

			<div class="row">
				<div id="six">six</div> <div id="seven">seven</div> <div id="eight">eight</div>
			</div>
			
			<div class="row">
				<div id="nine">nine</div> <div id="ten">ten</div> <div id="eleven">eleven</div>
			</div>
			
			<div class="row">
				<div id="twelve">twelve</div> <div id="oclock">o'clock</div>
			</div>
		</div>
	</body>
</html>
#main{
    margin:auto;
	width:460px;
	height:520px;
	border: 5px solid gray;
	background-color:black;
	color:#303030;
	padding:20px;
	font-family:"Arial","Sans";
	text-transform:uppercase;
}

.row>div{
	display:inline-block;
	margin: 10px 20px;
	font-size:40px;
	text-align:center;
}

.row>div:first-child{
	float:left;
	text-align:left;
}

.row>div:last-child{
	float:right;
	text-align:right;
}

.on{
	color:white;
}


var update = function() {
    
	// initialise screen
	// selects all elements with class on and removes it
	$('.on').removeClass("on");
	$("#its").addClass('on');

	// initialise date variables
	current = new Date();
	var hour = current.getHours();
	if (hour > 12) {hour -= 12};
	var minutes = current.getMinutes();
	
	// set modifier
	if (minutes < 3){
		$("#oclock").addClass('on');
	}else if (minutes < 33){
		$("#past").addClass('on');
		$("#minutes").addClass('on');
	}else if (minutes <= 57){
		$("#to").addClass('on');
		$("#minutes").addClass('on');
		hour === 12 ? hour = 1: hour += 1;
		minutes = 60 - minutes;
	}else{
		$("#oclock").addClass('on');
		hour === 12 ? hour = 1: hour += 1;
		minutes = 60 - minutes;
	}

	//set minutes
	if (minutes >= 3){
	       if(minutes < 7){
			$("#fiveMod").addClass('on');
		}else if (minutes < 13){
			$("#tenMod").addClass('on');
		}else if (minutes < 17){
			$("#quarter").addClass('on');
			$("#minutes").removeClass('on');
		}else if (minutes < 23){
			$("#twenty").addClass('on');
		}else if (minutes < 27){
			$("#twenty").addClass('on');
			$("#fiveMod").addClass('on');
		}else if (minutes < 33){
			$("#half").addClass('on');
			$("#minutes").removeClass('on');
		}
	}

	//set hours
	switch (hour){
		case 1 :
			$("#one").addClass('on');
			break;
		case 2 :
			$("#two").addClass('on');
			break;
		case 3 :
			$("#three").addClass('on');
			break;
		case 4 :
			$("#four").addClass('on');
			break;
		case 5 :
			$("#five").addClass('on');
			break;
		case 6 :
			$("#six").addClass('on');
			break;
		case 7 :
			$("#seven").addClass('on');
			break;
		case 8 :
			$("#eight").addClass('on');
			break;
		case 9 :
			$("#nine").addClass('on');
			break;
		case 10 :
			$("#ten").addClass('on');
			break;
		case 11 :
			$("#eleven").addClass('on');
			break;
		case 12 :
			$("#twelve").addClass('on');
			break;
	}

}

// run update on load and repeat every 30 seconds afterwards
$(document).ready(function(){
	update();
	setInterval(update,30000);
});
Created from scratch
743 forks
38125 views

Browse more Codebits