Front-end courses
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Departments</title>
<link rel="stylesheet" href="site.css" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js" integrity="sha512-RNLkV3d+aLtfcpEyFG8jRbnWHxUqVZozacROI4J2F1sTaDqo1dPQYs01OMi1t1w9Y2FdbSCDSQ2ZVdAC8bzgAg==" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
let dataUrl = 'json-courses.php'
var urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.get('department_code'));
let department_code = urlParams.get('department_code');
$(document).ready(function(){
$.getJSON(dataUrl,{"department_code": department_code},
function (data) {
console.log(data);
var mysource = $('#courses-list-template').html();
var mytemplate = Handlebars.compile(mysource);
var myresult = mytemplate(data)
$('#courses-list').html(myresult);
});
})
</script>
</head>
<body>
<h1>Faculty of Arts & Sciences</h1>
<div id="courses-list">
</div>
<div id="courses-list-template" class="handlebars">
<h2>{{ department_name }}</h2>
<p>{{ courses.length }} courses</p>
<hr/> <ul>
{{#courses}}
<li>{{course_group_long}} {{num_int}}{{num_char}}
<strong>{{title}}</strong>
<br/>
<span class="faculty">{{faculty_text}}</span>
<p class="description">
{{description}}
</p>
</li>
{{/courses}}
</ul>
</div>
</body>
</html>