Course Advisor

by ClarenceDowns

HTML

<div id="container">
	<div id="courseList">
	  <h2>Course List</h2>
    <table id="courseTable">
      <tr><th>Taken</th><th>Term</th><th>Year</th><th>Course</th><th>Name</th></tr>
    </table>
	</div>
	
	<div id="schedule">
	  <h2>Schedule</h2>
		<label for="startYear">Start Year</label>
		<input id="startYear" type="text" size="3" value="" />
		<!-- <button onclick="openWin()">Popout</button>
		<button onclick="closeWin()">Dock</button> -->
		
		<div class="year">
			<div id="fallYear1"></div>
			<div id="springYear2"></div>
			<div id="summerYear2"></div>
		</div>
		<div class="year">
			<div id="fallYear2"></div>
			<div id="springYear3"></div>
			<div id="summerYear3"></div>
		</div>
		<div class="year">
			<div id="fallYear3"></div>
			<div id="springYear4"></div>
			<div id="summerYear4"></div>
		</div>
		<div class="year">
			<div id="fallYear4"></div>
			<div id="springYear5"></div>
			<div id="summerYear5"></div>
		</div>
	</div>
</div>

CSS

#container {
	width: 100%;
	max-width: 960px;
	margin: auto;
} 

#courseList, #schedule {
	float: left;
	margin: 10px;
}

#courseTable tr {
  white-space: nowrap;
}

#courseTable th {
  background-color: lightBlue;
}

#courseTable th, #courseTable td {
  padding: 1px 7px;
}

.year > div {
	display: inline-block;
	width: 100px;
	height: 150px;
	border: 1px solid;
	margin: 2px;}

.year {
	white-space: nowrap;
}

.year:after {
	content: "";
	display: table;
	clear: both;
}

#startYear {
	padding-left: 7px;
}

.year table {
	text-align: left;
}

.year th {
	width: 150px;
	background-color: lightBlue;
}

.courseTaken {
	margin-left: 15px;
}

/************************* Tool Tips *************************/
.tooltip {
    position: relative;
    display: inline-block;
    /* border-bottom: 1px dotted black; */
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: auto;
    background-color: grey;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 2px 5px;

    /* Position the tooltip */
    position: absolute;
		margin-left: -150px;
		margin-top: -40px;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

JavaScript

var date = new Date();
var year1 = date.getFullYear();
var year2 = year1 + 1;
var year3 = year1 + 2;
var year4 = year1 + 3;
var year5 = year1 + 4;
var objCourseList = [];

// Initialize
$(init);
function init() {
	// display course list and schedule
	getCourseList();
	displayCourseList();
	
	// start year
	$("#startYear").val(year1);
  $("#startYear").on("change paste keyup", function() {
  	startYear();
		addCourse();
  });
	
	// clear semesters
	clearSemesters();
	
	// has course been taken?
	$('.courseTaken').change(function() {
		var courseId = $(this).parents('tr').attr('id');

		for (var i in objCourseList.courseList) {
			if (objCourseList.courseList[i].course == courseId) {
				if(this.checked) {
					objCourseList.courseList[i].planned = "Taken";
					$('#' + courseId + ' select:eq(0) option:eq(0)').prop('selected', true); // if course taken, reset Term option to 'Select'
					$('#' + courseId + ' select:eq(1) option:eq(0)').prop('selected', true); // if course taken, reset Year option to 'Select'
				} else {
					objCourseList.courseList[i].planned = "";
				}
			}
		}

		addCourse();
	});
	
	// add course to schedule
	$('select').change(function() {
		addPlanned(this);
	});
}

// Start Year
function startYear() {
	year1 = Number($("#startYear").val());
	year2 = year1 + 1;
	year3 = year1 + 2;
	year4 = year1 + 3;
	year5 = year1 + 4;
	$('option[value="Year1"]').html(year1);
	$('option[value="Year2"]').html(year2);
	$('option[value="Year3"]').html(year3);
	$('option[value="Year4"]').html(year4);
	$('option[value="Year5"]').html(year5);
}

// Clear Semesters
function clearSemesters() {
	$('#fallYear1').html('<table><tr><th>Fall ' + year1 + '</th></tr></table>');
	$('#springYear2').html('<table><tr><th>Spring ' + year2 + '</th></tr></table>');
	$('#summerYear2').html('<table><tr><th>Summer ' + year2 + '</th></tr></table>');
	$('#fallYear2').html('<table><tr><th>Fall ' + year2 + '</th></tr></table>');
	$('#springYear3').html('<table><tr><th>Spring ' + year3...