BSIT Quick Advisor
An example of using JSON and dynamic creation of controls
by SHELDON PASCIAK
November 05, 2016
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/><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": "MAC1105",
"Name": "College Algebra"
}, {
"Course": "MAC1114",
"Name": "Trigonometry",
"ORPreReq": ["COP1000", "ENC1101"]
}, {
"Course": "MAC1140",
"Name": "PreCalculus",
"PreReq": ["MAC1105","ENC1101"]
}, {
"Course": "MAC2311",
"Name": "Calculus",
"PreReq": ["MAC1105", "MAC1140"],
"ORPreReq": ["ABC123", "XYZ567"]
}, {
"Course": "ABC123",
"Name": "Discrete",
}, {
"Course": "XYZ567",
"Name": "Analaysis",
}, {
"Course": "COP1000",
"Name": "Principles of Programming"
}, {
"Course": "ENC1101",
"Name": "Composition",
}];
var TESTDATA = [{
"Course": "MAC1105",
"Name": "College Algebra"
}, {
"Course": "MAC1114",
"Name": "Trigonometry",
"ORPreReq": ["COP1000", "ENC1101"]
}, {
"Course": "MAC1140",
"Name": "PreCalculus",
"PreReq": ["MAC1105","ENC1101"]
}, {
"Course": "MAC2311",
"Name": "Calculus",
"PreReq": ["MAC1105", "MAC1114"],
"ORPreReq": ["ABC123", "XYZ567"]
}, {
"Course": "ABC123",
"Name": "Discrete",
}, {
"Course": "XYZ567",
"Name": "Analaysis",
}, {
"Course": "COP1000",
"Name": "Principles of Programming"
}, {
"Course": "ENC1101",
"Name": "Composition",
}];
courselist = [{
"Course": "CET1600",
"Name": "NETWORK PLUS"
}, {
"Course": "COP2220",
"Name": "Unlisted no longer offered Course"
}, {
"Course": "COP2001",
"Name": "Unlisted no longer offered Course"
}, {
"Course": "CTS1851",
"Name": "Internet Web Foundations (HTML, CSS)"
}, {
"Course": "COP2700",
"Name": "Introduction to Database Management"
}, {
"Course": "CTS2431C",
"Name": "Data Organization and Management and Lab"
}, {
"Course": "COP1000",
"Name": "Principles of Computer Programming"
}, {
"Course": "COP2360",
"Name": "C# Programming",
"PreReq": ["COP1000"]
}, {
"Course": "COP2800",
"Name": "Computer Programming 'Java'",
"PreReq":...