Assignment 11

by Ryan Brown

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<br>
<br>
<div style="clear:left;">
  <div class="greenbox">
    Green courses are Draggable indicating pre-requisites are met
    <span class="tooltiptext">If you have met the pre-requisite by taking 
an equivalent class you should drag the associated class into the 
Completed column.</span>
  </div>
    <div class="whitebox">
    <input type="button" value="What Can I Take?" id="allAvailable" class="button" />
    <input type="button" value="Undo" id = "undo" class="button" />
  </div>
  <div class="yellowbox">
    Yellow courses mean pre-requisites are not met.
  </div>

</div>
<br/>
<br/>
<div style="clear:left">
  <table>
    <tr>
      <th>Drag Completed Courses Here</th>
      <th>All Courses</th>
      <th>Drag Semester Plan</th>

    </tr>
    <tr>
      <td valign="top">
        <div id="completed" class="completed">

          <br/>
          <div id="completedclasses" class="completedclasses">
          <b>Completed Courses</b><br/>
          </div>
          
          <br/>
        <div class="hours">

            <div id="CompletedHours"> Hours Completed:</div>
            <div id="ProgramHours">Program Hours (48 required): </div>
          </div>

        </div>
      </td>
      <td valign="top">
        <div id="all">

        </div>
      </td>
      <td valign="top">
        <div id="available"> </div>
        <div id="semester1" class="semester">
                    Semester 1 - Spring 2018

          <div id="semesterclasses1" class="semesterclasses">            
          </div>
          <div id="semester1hours" class="hours">
          </div>

<br/>
        </div>
        <br/>
        <div id="semester2" class="semester">
                    Semester 2 - Summer 2018
          <div id="semesterclasses2" class="semesterclasses">            
          </div>
          <div id="semester2hours" class="hours">
          </div>
          
         ...

CSS

h1 {
  float: left;
  position: relative;
  right: -10%;
  text-align: left;
  margin: 1em 0 0.5em 0;
  color: #343434;
  font-weight: normal;
  font-family: 'Ultra', sans-serif;
  font-size: 36px;
  line-height: 42px;
  text-shadow: 0 2px white, 0 3px #777;
}

h1 .tooltiptext {
  visibility: hidden;
  width: 400px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  font-size: 12px;
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 125%;
  left: 50%;
  margin-left: -60px;
  text-shadow: none;
  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 1s;
}

.button,
.ui-button {
  background-color: lightblue;
  /* Green */
  border: 1;
  border-radius: 10px;
  color: black;
  padding: 5px 3px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.button:hover,
.ui-button:hover {
  background-color: #4CAF50;
  /* Green */
  border-radius: 10px;
  border: none;
  color: black;
  padding: 5px 3px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.classAvailable {
  border-radius: 15px;
  border: solid;
  background: lightgreen;
  padding: 20px;
  width: 300px;
  height: 20px;
}

.classAvailable:hover {
  border-radius: 15px;
  border: double;
  background: green;
  padding: 20px;
  width: 300px;
  height: 20px;
}

.greenbox {
  border-radius: 15px;
  border: solid;
  background: lightgreen;
  padding: 20px;
  width: 300px;
  height: 20px;
  float: left;
}

.yellowbox {
  border-radius: 15px;
  border: solid;
  background: lightyellow;
  padding: 20px;
  width: 300px;
  height: 20px;
  float: left
}

.whitebox {
  border-radius: 15px;
  border: solid;
  background: lightblue;
  padding: 20px;
  width: 300px;
  height: 20px;
  float: left;
  text-align: center
}

.whatcanitake {
  border-radius: 15px;
  border: solid;
  background: white;
  padding: 20px;
  height: 400px;
  width: 600px;
  text-align:...

JavaScript

$(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready
  createListAll();
  setDropTargets();
 decideSpecial();

  //createListAvailable();
});

// taken - has the student taken the course - true/false
// PRMet - Are the pre-requisites met - true/false
// required - Is completion of course required for graduation true/false
// semester - indicates semester course is taken -1 for previous, 1-6 for planned
// program - Is the course  part of the program 48 hours
// offered - Text of proposed semester offerings
// details - Details of the course - displays on hover

var courselist = [{
  "Course": "COP3530",
  "Name": "Data Structures",
  "PRMet": true,
  "taken": false,
  "semester": 0,
  "hours": 3,
  "required": true,
  "program": false,
  "details": "Students should take COP3530 as pre-requisite for the following class(es): CEN4801, CEN4010, and COP4813."
 },
 {
  "Course": "CNT3104",
  "Name": "Introduction to Telecomunications",
  "PRMet": true,
  "taken": false,
  "semester": 0,
  "hours": 2,
  "required": true,
  "program": false,
  "details": "Students should take CNT3104 as pre-requisite for the following classe(es): CEN4007."
 },
 {
  "Course": "GEB3213",
  "Name": "Business Writing",
  "PRMet": true,
  "taken": false,
  "semester": 0,
  "hours": 3,
  "required": true,
  "program": false,
  "details": "Students should take GEB3213 as pre-requisite for the following classe(es): CIS4250."
 },
 {
  "Course": "MAC1114",
  "Name": "College Trigonometry",
  "PRMet": true,
  "taken": false,
  "semester": 0,
  "hours": 3,
  "required": true,
  "program": false,
  "details": "Students should take MAC1114 as pre-requisite for the following classes: MAC1140 and MAC2311C"
 },
  {
  "Course": "COP4610",
  "Name": "Operating Systems",
  "PRMet": true,
  "taken": false,
  "semester": 0,
  "hours": 3,
  "required": true,
  "program": false,
  "details": "Once the student has entered the program, this class is indepednent." 
 },
  {
 ...