Permalink
Browse files

Fully implimented the time and color javascript and started styling t…

…he page
  • Loading branch information...
1 parent b6a79cd commit 5538f52364a072c41569e424f2af16bc668f5da2 @PHLAK committed Mar 15, 2011
Showing with 152 additions and 31 deletions.
  1. +1 −0 css/rebase-min.css
  2. +58 −0 css/style.css
  3. BIN images/bg.png
  4. +16 −6 index.html
  5. +16 −0 js/jquery-min.js
  6. +61 −0 js/jsClock.js
  7. +0 −25 jsClock.js
View
@@ -0,0 +1 @@
+html{color:#333;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}h1{font-size:138.5%;}h2{font-size:123.1%;}h3{font-size:108%;}h1,h2,h3{margin:1em 0;}h1,h2,h3,h4,h5,h6,strong{font-weight:bold;}abbr,acronym{border-bottom:1px dotted #000;cursor:help;}em{font-style:italic;}blockquote,ul,ol,dl{margin:1em;}ol,ul,dl{margin-left:2em;}ol li{list-style:decimal outside;}ul li{list-style:disc outside;}dl dd{margin-left:1em;}th,td{padding:.5em;}th{font-weight:bold;text-align:center;}caption{margin-bottom:.5em;text-align:center;}p,fieldset,table{margin-bottom:1em;}.hidden{display:none;}.left{float:left;width:auto;}.right{float:right;width:auto;}.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}* html .clearfix{zoom:1;}*:first-child+html .clearfix{zoom:1;}
View
@@ -0,0 +1,58 @@
+/* -------------------------------------------------------------------- */
+/* -----| GENERAL |---------------------------------------------------- */
+/* -------------------------------------------------------------------- */
+
+html {
+ background-image: url(../images/bg.png);
+ font-size: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+body {
+ color: #FFF;
+ font-family: Arial, Helvetica, sans-serif;
+ height: 100%;
+}
+
+
+a {
+ color: #FFF;
+ text-decoration: underline;
+}
+
+a:hover {
+ color: #FFF;
+ text-decoration: underline;
+}
+
+/* -------------------------------------------------------------------- */
+/* -----| BODY |------------------------------------------------------- */
+/* -------------------------------------------------------------------- */
+
+
+#pageWrap {
+ height: 100%;
+ padding: 10px;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+}
+
+#borderBox {
+ height: 100%;
+ border: 1px solid #FFF;
+ position: relative;
+}
+
+#clockWrapper {
+ position: absolute;
+ text-align: center;
+ top: 50%;
+}
+
+#clock {
+ font-family: 'Droid Sans Mono', Arial, Helvetica, sans-serif;
+ font-size: 7.5em;
+ margin-top: -50%;
+ text-shadow: 1px 1px 3px #333;
+}
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -3,17 +3,27 @@
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-
<title>jColorClock</title>
+
+ <link rel="stylesheet" type="text/css" href="css/rebase-min.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans+Mono:regular" />
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
- <script type="text/javascript" src="jsClock.js"></script>
+ <script type="text/javascript" src="js/jquery-min.js"></script>
+ <script type="text/javascript" src="js/jsClock.js"></script>
+
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
- <div id="clock"></div>
-
<body>
+
+ <div id="pageWrap">
+ <div id="borderBox">
+ <div id="clockWrapper">
+ <span id="clock"></span>
+ </div>
+ </div>
+ </div>
</body>
</html>
View
View
@@ -0,0 +1,61 @@
+$(document).ready(function(){
+
+ // Set interval for ever 0.1 seconds
+ setInterval(function() {
+
+ // Set the variables
+ var time = getTime();
+ var color = getColor();
+
+ // Update the time
+ $('#clock').text(time);
+
+ // Change the background color
+ $('html').css('background-color', '#' + color);
+ // console.log(color);
+
+ }, 100);
+
+});
+
+function getTime() {
+ // Instantiate the date object
+ var currentTime = new Date();
+
+ // Set the hours, minutes and seconds to variables
+ var hours = currentTime.getHours();
+ var minutes = currentTime.getMinutes();
+ var seconds = currentTime.getSeconds();
+
+ // Fix variables when < 10
+ if (hours < 10) { hours = "0" + hours; }
+ if (minutes < 10){ minutes = "0" + minutes; }
+ if (seconds < 10){ seconds = "0" + seconds; }
+
+ // Construct a string of the current time
+ var time = hours + ':' + minutes + ':' + seconds;
+
+ // Return the time string
+ return time;
+}
+
+function getColor() {
+ // Instantiate the date object
+ var currentTime = new Date();
+
+ // Set the hours, minutes and seconds to variables
+ var hours = Math.round(currentTime.getHours() * 11.09);
+ var minutes = Math.round(currentTime.getMinutes() * 4.32);
+ var seconds = Math.round(currentTime.getSeconds() * 4.32);
+
+ // Convert decimal to hex
+ var r = hours.toString(16);
+ var g = minutes.toString(16);
+ var b = seconds.toString(16);
+
+ // Construct a string of the current time
+ var hex = r + g + b;
+
+ // Return the color string
+ return hex;
+}
View
@@ -1,25 +0,0 @@
-$(document).ready(function(){
-
- setInterval(getTime, 1000);
-
-});
-
-function getTime() {
- // Instantiate the date object
- var currentTime = new Date();
-
- // Set the hours, minutes and seconds to variables
- var hours = currentTime.getHours();
- var minutes = currentTime.getMinutes();
- var seconds = currentTime.getSeconds();
-
- // Fix variables when < 10
- if (hours < 10) { hours = "0" + hours; }
- if (minutes < 10){ minutes = "0" + minutes; }
- if (seconds < 10){ seconds = "0" + seconds; }
-
- // Construct a string of the current time
- var time = hours + ':' + minutes + ':' + seconds;
-
- $('#clock').text(time);
-}

0 comments on commit 5538f52

Please sign in to comment.