BSIT Quick Advisor

An example of using JSON and dynamic creation of controls

by wooozy

HTML

<h1>
BSIT Quick Class Advisor 
</h1>
<br/>
If you have taken a class in this list - or an equivalent to the course, then click the checkbox. Available courses will automatically be enabled.
<br/>
<div id="box"></div>

CSS

input:enabled + label {
  margin: 20px auto;
  background: rgb(255, 255, 0);
}

input:disabled + label {
  opacity: 0.5;
  background: rgb(255, 0, 0);
}

input[type="checkbox"]:checked + label {
  background: rgb(153, 204, 102);
  font-weight: bold;
}

JavaScript

$(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready
  createList();
});

var courselist = [{
  "Course": "PGY1101",
  "Name": "Photography as an Art Form"
}, {
  "Course": "PGY1115",
  "Name": "Color Theory and Processes",
  "PreReq": ["PGY1101"]
}, {
  "Course": "PGY1201",
  "Name": "Introduction to Studio and Location Photography",
  "PreReq": ["PGY1101","PGY1800"]
}, {
  "Course": "PGY2210",
  "Name": "Professional Studio Portraiture",
  "PreReq": ["PGY1115", "PGY1201"]
}, {
  "Course": "PGY2806",
  "Name": "Fine Arts Digital Photography",
  "PreReq": ["PGY1800"]
}, {
  "Course": "PGY1800",
  "Name": "Photography and Image Making"
}, {
  "Course": "PGY2750",
  "Name": "Introduction to Video Production",
  "PreReq": ["PGY1800"]
}, {
  "Course": "CTS3348",
  "Name": "Linux Administration",
  "PreReq": ["COP1000"]
}, {
  "Course": "CET3116",
  "Name": "Digital Technology",
  "PreReq": ["MAC1105"]
}, {
  "Course": "EET3086",
  "Name": "Electrical Circuits",
  "PreReq": [ "MAC1114"]
}, {
  "Course": "ENC1101",
  "Name": "Composition",
}, {
  "Course": "GEB3213",
  "Name": "Business Writing",
  "PreReq": ["ENC1101"]
}, {
  "Course": "CIS4250",
  "Name": "Ethics in Computing",
  "PreReq": ["GEB3213"]
}, {
  "Course": "COP3530",
  "Name": "Data Structures",
  "PreReq": ["COT3100", "COP2800"]
}, {
  "Course": "CEN3722",
  "Name": "Human Computer Interfaces",
  "PreReq": ["COP2800"]
}, {
  "Course": "COP4708",
  "Name": "Applied Database",
  "PreReq": ["COP2800"]
}, {
  "Course": "COP4610",
  "Name": "Operating Systems",
  "PreReq": ["CTS3348"]
}, {
  "Course": "CIS4360",
  "Name": "Applied Cybersecurity",
  "PreReq": ["CTS3348"]
}, {
  "Course": "CNT3104",
  "Name": "Introduction to Telecom",
  "PreReq": ["EET3086"]
}, {
  "Course": "CNT4007",
  "Name": "Data Communications",
  "PreReq": ["CNT3104"]
}, {
  "Course": "CNT4703",
  "Name": "Voice/Data Networks",
  "PreReq": ["CNT4007"]
}, {
  "Course": "CDA4101",
  "Name": "Computer...