JSFiddle - React, Tailwind, and code Playground

by leiperte

HTML

<!--Assignment 11 - Class Advisor-->

<head>
<h1>
Bachelor of Science in Information Technology
Self-Help Advisor
</h1>
<p>
Use this self help list to determine what classes you still need to take to complete your degree. 
Simple check the box of the class or class equivalent you have taken, then based on pre-requististes the list will highlight the classes that are still needed and your are eligible to complete. 
</p>
<div id="box">
</div>
<style type="text/css" media = "screen">
input:enabled + label {
  margin: 20px auto;
  background: #00FFFF;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

input:disabled + label {
  opacity: 0.5;
  background: #A9A9A9;
}

input[type="checkbox"]:checked + label {
  background: #9932CC;
  font-weight: normal;
}

</style>
</head>

<body>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(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",
  "PreReq": ["MAC1105"]
}, {
  "Course": "MAC1140",
  "Name": "PreCalculus",
  "PreReq": ["MAC1105"]
}, {
  "Course": "MAC2311",
  "Name": "Calculus",
  "PreReq": ["MAC1140", "MAC1114"]
}, {
  "Course": "COT3100",
  "Name": "Discrete Analaysis",
  "PreReq": ["MAC1105"]
}, {
  "Course": "COP1000",
  "Name": "Principles of Programming"
}, {
  "Course": "COP2800",
  "Name": "Java Programming",
  "PreReq": ["COP1000"]
}, {
  "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",
 ...