ashlynnpai/Astronomical-clock.markdown

## Astronomical-clock.markdown

      
    Raw
  

              Astronomical-clock.markdown
            
          
    Astronomical clock

My clock is based on the Astronomical Clock in Prague.
Outer ring --  This is an approximation of old Czech time and show the hours until sunset, with the golden number 24 marking the time of sunset.
Main ring -- This shows the hour according to astronomical time, with noon at 0 degrees.  The golden hand points to the current hour.
Inner ring -- Shows the signs of the Zodiac and the position of the sun on the hand pointer is supposed to identify the current Zodiac sign.
A Pen by Ashlynn Pai on CodePen.
License.

  
## index.html
<head>
	<title></title>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">

</head>
<body>

<ul id="clock">
    <li id="out"></li>
    <li id="zod"></li>
    <li id="sec"></li>
    <li id="hour"></li>
    <li id="min"></li>
</ul>

<!--<footer>Golden Hand image on hour hand -http://commons.wikimedia.org/wiki/File:Guante_Lambayeque.JPG Fotógrafo: © Manuel González Olaechea y Franco, -http://creativecommons.org/licenses/by/3.0/deed.en;
Sun image on hour hand- http://apod.nasa.gov/apod/ap100923.html</footer>-->
	<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>

## script.js
var hours;
var hourDeg;
var totaldays;
var sunDeg;
var months;
var days;
var startDeg;
var seconds;
var mins;

//pulls the time locally and sets the images in motion

$(function() {

      setInterval( function() {
      seconds = new Date().getSeconds();
      var sectick = "rotate(" + seconds * 6 + "deg)";
      $("#sec").css({ "transform": sectick });

      }, 1000 );

      setInterval( function() {
      hours = new Date().getHours();
      astroHours();
      var hourtick = "rotate(" + hourDeg + "deg)";
      $("#hour").css({ "transform": hourtick});

      }, 1000 );

      setInterval( function() {
      mins = new Date().getMinutes();
      var mintick = "rotate(" + mins * 6 + "deg)";

      $("#min").css({ "transform" : mintick });

      }, 1000 );

      setInterval( function() {
      var month = new Date().getMonth();
      months = month + 1;
      days = new Date().getDate();
      sunset();
      zodiac();
      var daytick = "rotate(" + sunDeg + "deg)";

      $("#out").css({ "transform" : daytick });

      }, 1000 );
});


// calculates the hour of day on the astronomical clock, noon is at 0 degrees
function astroHours(){

    if (0 < hours < 12){
        hourDeg = 180 + 15*hours;
    }
    else if (12 < hours <=24){
        hourDeg = 15*hours;
    }
}

//calculates degrees for outer ring estimating old Czech time
function sunset(){

    totaldays = months * 30.5 + days;
    if (totaldays > 349 && totaldays <= 365) {
        sunDeg = 60 + ((totaldays - 349)*.42);
    }
    else if (totaldays >= 0 && totaldays < 206){
        sunDeg = 60 + (totaldays *.42);
    }
    else if (totaldays >= 206 && totaldays <= 349) {
        sunDeg = 139 - (totaldays *.42);
    }
}

//moves the zodiac dial
function zodiac(){
    if (totaldays >= 21 && totaldays < 51) {
        startDeg = 300;
        //aquarius Jan 21
    }
    else if (totaldays >= 51 && totaldays < 81) {
        startDeg = 330;
        //pisces Feb 21
    }
    else if (totaldays >= 81 && totaldays < 111) {
        startDeg = 0;
        //ares March 21
    }
    else if (totaldays >= 111 && totaldays < 141) {
        startDeg = 30;
        //taurus April 20
     }
    else if (totaldays >= 141 && totaldays < 171) {
        startDeg = 60;
        //gemini May 21
     }
    else if (totaldays >= 171 && totaldays < 201) {
        startDeg = 90;
     }
    else if (totaldays >= 201 && totaldays < 231) {
        startDeg = 120;
     }
    else if (totaldays >= 231 && totaldays < 261) {
        startDeg = 150;
     }
    else if (totaldays >= 261 && totaldays < 291) {
        startDeg = 180;
     }
    else if (totaldays >= 291 && totaldays < 321) {
        startDeg = 210;
     }
    else if (totaldays >= 321 && totaldays < 351) {
        startDeg = 240;
     }
    else if (totaldays >= 351 && totaldays < 21){
        startDeg = 270;
     }
var endDeg = (startDeg + hourDeg) - 30;

     var zodtick = "rotate(" + endDeg + "deg)";

      $("#zod").css({ "transform" : zodtick });
}


## style.css
#clock {
    position: relative;
    width: 600px;
    height: 600px;
    margin: 0px auto 0 auto;
    background: url(http://imageshack.com/a/img841/4461/c6am.png);
    background-repeat: no-repeat;
    list-style: none;
}

#out {
    position: absolute;
    width: 640px;
    height: 640px;
    top: -19px;
    left: -22px;
    background: url(http://imageshack.com/a/img842/9079/y0kw.png);
    background-repeat: no-repeat;
    z-index: 1;
}

#zod {
    position: absolute;
    width: 600px;
    height: 600px;
    top: 40px;
    left: -10px;
    background: url(http://imageshack.com/a/img834/8898/47ej.png);
    background-repeat: no-repeat;
    z-index: 2;
}

#sec, #min, #hour {
    position: absolute;
    height: 600px;
    top: 0px;
    left: 289px;
    background-repeat: no-repeat;
}

#sec {
  width: 20px;
  background: url(http://imageshack.com/a/img842/8844/wq6j.png);
  z-index: 5;
}

#min {
  width: 20px;
  background: url(http://imageshack.com/a/img841/6458/4bwa.png);
  z-index: 4;
}

#hour {
  top: 5px;
  width: 60px;
  left: 270px;
  background: url(http://imageshack.com/a/img836/866/87nn.png);
  z-index: 3;
}
	<head>
	<title></title>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">

	</head>
	<body>

	<ul id="clock">
	<li id="out"></li>
	<li id="zod"></li>
	<li id="sec"></li>
	<li id="hour"></li>
	<li id="min"></li>
	</ul>

	<!--<footer>Golden Hand image on hour hand -http://commons.wikimedia.org/wiki/File:Guante_Lambayeque.JPG Fotógrafo: © Manuel González Olaechea y Franco, -http://creativecommons.org/licenses/by/3.0/deed.en;
	Sun image on hour hand- http://apod.nasa.gov/apod/ap100923.html</footer>-->
	<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
	</body>
	var hours;
	var hourDeg;
	var totaldays;
	var sunDeg;
	var months;
	var days;
	var startDeg;
	var seconds;
	var mins;

	//pulls the time locally and sets the images in motion

	$(function() {

	setInterval( function() {
	seconds = new Date().getSeconds();
	var sectick = "rotate(" + seconds * 6 + "deg)";
	$("#sec").css({ "transform": sectick });

	}, 1000 );

	setInterval( function() {
	hours = new Date().getHours();
	astroHours();
	var hourtick = "rotate(" + hourDeg + "deg)";
	$("#hour").css({ "transform": hourtick});

	}, 1000 );

	setInterval( function() {
	mins = new Date().getMinutes();
	var mintick = "rotate(" + mins * 6 + "deg)";

	$("#min").css({ "transform" : mintick });

	}, 1000 );

	setInterval( function() {
	var month = new Date().getMonth();
	months = month + 1;
	days = new Date().getDate();
	sunset();
	zodiac();
	var daytick = "rotate(" + sunDeg + "deg)";

	$("#out").css({ "transform" : daytick });

	}, 1000 );
	});


	// calculates the hour of day on the astronomical clock, noon is at 0 degrees
	function astroHours(){

	if (0 < hours < 12){
	hourDeg = 180 + 15*hours;
	}
	else if (12 < hours <=24){
	hourDeg = 15*hours;
	}
	}

	//calculates degrees for outer ring estimating old Czech time
	function sunset(){

	totaldays = months * 30.5 + days;
	if (totaldays > 349 && totaldays <= 365) {
	sunDeg = 60 + ((totaldays - 349)*.42);
	}
	else if (totaldays >= 0 && totaldays < 206){
	sunDeg = 60 + (totaldays *.42);
	}
	else if (totaldays >= 206 && totaldays <= 349) {
	sunDeg = 139 - (totaldays *.42);
	}
	}

	//moves the zodiac dial
	function zodiac(){
	if (totaldays >= 21 && totaldays < 51) {
	startDeg = 300;
	//aquarius Jan 21
	}
	else if (totaldays >= 51 && totaldays < 81) {
	startDeg = 330;
	//pisces Feb 21
	}
	else if (totaldays >= 81 && totaldays < 111) {
	startDeg = 0;
	//ares March 21
	}
	else if (totaldays >= 111 && totaldays < 141) {
	startDeg = 30;
	//taurus April 20
	}
	else if (totaldays >= 141 && totaldays < 171) {
	startDeg = 60;
	//gemini May 21
	}
	else if (totaldays >= 171 && totaldays < 201) {
	startDeg = 90;
	}
	else if (totaldays >= 201 && totaldays < 231) {
	startDeg = 120;
	}
	else if (totaldays >= 231 && totaldays < 261) {
	startDeg = 150;
	}
	else if (totaldays >= 261 && totaldays < 291) {
	startDeg = 180;
	}
	else if (totaldays >= 291 && totaldays < 321) {
	startDeg = 210;
	}
	else if (totaldays >= 321 && totaldays < 351) {
	startDeg = 240;
	}
	else if (totaldays >= 351 && totaldays < 21){
	startDeg = 270;
	}
	var endDeg = (startDeg + hourDeg) - 30;

	var zodtick = "rotate(" + endDeg + "deg)";

	$("#zod").css({ "transform" : zodtick });
	}
	#clock {
	position: relative;
	width: 600px;
	height: 600px;
	margin: 0px auto 0 auto;
	background: url(http://imageshack.com/a/img841/4461/c6am.png);
	background-repeat: no-repeat;
	list-style: none;
	}

	#out {
	position: absolute;
	width: 640px;
	height: 640px;
	top: -19px;
	left: -22px;
	background: url(http://imageshack.com/a/img842/9079/y0kw.png);
	background-repeat: no-repeat;
	z-index: 1;
	}

	#zod {
	position: absolute;
	width: 600px;
	height: 600px;
	top: 40px;
	left: -10px;
	background: url(http://imageshack.com/a/img834/8898/47ej.png);
	background-repeat: no-repeat;
	z-index: 2;
	}

	#sec, #min, #hour {
	position: absolute;
	height: 600px;
	top: 0px;
	left: 289px;
	background-repeat: no-repeat;
	}

	#sec {
	width: 20px;
	background: url(http://imageshack.com/a/img842/8844/wq6j.png);
	z-index: 5;
	}

	#min {
	width: 20px;
	background: url(http://imageshack.com/a/img841/6458/4bwa.png);
	z-index: 4;
	}

	#hour {
	top: 5px;
	width: 60px;
	left: 270px;
	background: url(http://imageshack.com/a/img836/866/87nn.png);
	z-index: 3;
	}