added animation

smitch88 · Mar 13, 2014 · dbbd60c · dbbd60c
1 parent 96ab3c9
commit dbbd60c
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 14 deletions.
diff --git a/calendar.css b/calendar.css
@@ -99,6 +99,21 @@
 	display: inline-block;
 }
 
+.alertBox {
+	border: 1px solid black;
+	position: absolute;
+	height: 200px;
+	width: 200px;
+	margin-left: 60px;
+	margin-top: 60px;
+	background-color: #625D5D;
+	opacity: .9;
+	color: white;
+	text-align: center;
+	font-family: 'avenir';
+	display: none;
+}
+
 footer {
 	text-align: center;
 	font-family: 'avenir';

diff --git a/calendar.js b/calendar.js
@@ -4,9 +4,8 @@ $().ready( function () {
 
 var Calendar = (function() {
 	var months = ['January', 'February', 'March', 'April', 
-			'May', 'June', 'July', 'August', 
-			'September', 'October', 'November', 'December'
-				];
+	'May', 'June', 'July', 'August', 
+	'September', 'October', 'November', 'December'];
 
 	var today = new Date();
 	var startingYear = today.getFullYear();
@@ -69,8 +68,13 @@ var Calendar = (function() {
 		}
 		//startDay is used here to determine how many blank Divs are necessary
 		//when displaying the calendar
-		displayMonth(thisMonth, month, year, startDay)
-		highlightDay(month, year)
+		displayMonth(thisMonth, month, year, startDay);
+
+		//highlighting today
+		highlightDay(month, year);
+
+		//passing the current month info to the alert function
+		showPopUpsOnClick(thisMonth);
 	}
 
 	var displayMonth = function(month, name, year, blankDivTotal) {
@@ -107,7 +111,8 @@ var Calendar = (function() {
 				monthIndex = 11
 				startingYear--;
 			}
-			generateNewYear(startingYear)
+			generateNewYear(startingYear);
+			$('.alertBox').slideUp();
 		})
 
 		arrowRight.on('click', function() {
@@ -119,7 +124,8 @@ var Calendar = (function() {
 				monthIndex = 0
 				startingYear++
 			}
-			generateNewYear(startingYear)
+			generateNewYear(startingYear);
+			$('.alertBox').slideUp();
 		})
 	}
 
@@ -140,19 +146,33 @@ var Calendar = (function() {
 	var checkForLeapYear = function(year) {
 		var isLeapYear = false;
 
-		if (year % 4 === 0 && year % 100 != 0) {
-			//leap year
-			isLeapYear = true;
-		}
-
-		else if (year % 4 && year % 400 === 0) {
+		if (year % 4 === 0 && (year % 100 != 0 || year % 400 != 0) ){
 			//leap year
 			isLeapYear = true;
 		}
 
 		return isLeapYear
 	}
 
+	var showPopUpsOnClick = function(month) {
+		var day = $('.dayBox');
+		var alertBox = $('.alertBox')
+
+		day.on('click', function(e) {
+			var id = e.target.id;
+			var day = id.slice(3); //removes 'day' from ID tag
+			var dayObject = month[day-1] //0 indexed
+
+			alertBox.text(dayObject.day + ', ' + dayObject.date)
+			alertBox.slideDown();
+		})
+
+		alertBox.on('click', function() {
+			alertBox.slideUp();
+		})
+
+	}
+
 	return {
 		'init': init
 	}

diff --git a/index.html b/index.html
@@ -2,12 +2,13 @@
 <head>
 <title>Calendar</title>
 <link rel='stylesheet' type ='text/css' href='calendar.css'>
-<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
 <script type="text/javascript" src='calendar.js'></script>	
 </head>
 <body>
 	<div class='container'>
 		 <div class='calendarBox'>
+		 	<div class='alertBox'></div>
 
 		 	<div class='headerHolder'>
 			 	<div id='arrowLeft'></div>