Front-end courses

For example: CSCI courses (courses.html?department_code=CSCI)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Departments</title>
  <link rel="stylesheet" href="styles/site.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>
    let dataUrl = './json-courses.php';
    let urlParams = new URLSearchParams(window.location.search);
    console.log(urlParams.get('department_code'));
    let department_code = urlParams.get('department_code');
    document.addEventListener('DOMContentLoaded', function () {
      fetch(dataUrl + '?department_code=' + department_code)
        .then(response => response.json())
        .then(data => {
          console.log(data);
          let mysource = document.getElementById('courses-list-template').innerHTML;
          let mytemplate = Handlebars.compile(mysource);
          let myresult = mytemplate(data)
          document.getElementById('courses-list').innerHTML = myresult;
        });
    });
  </script>

</head>

<body>
  <h1>Harvard Extension School</h1>
  <p><a href="departments.html">Return to Department List</a></p>

  <div id="courses-list">

  </div>

  <div id="courses-list-template" class="handlebars">
    <h2>{{ department_name }}</h2>
    <p>{{ courses.length }} courses</p>
    <div>
      {{#courses}}
      <section class="course">
        <h2 class="abbrev">{{ short_title }}</h2>
        <div>
          <p class="term">{{ term }} {{ academic_year_display }}</p>
          <p class="title">{{ title }}</p>
          <p class="faculty">{{ faculty_description }}</p>
          <p class="description">{{{ description }}}</p>
        </div>
      </section>
      {{/courses}}
    </div>

    <footer>
      <p><a href="./">PHP/mysql example list</a></p>
      <p>This is a learning example to demonstrate PHP and mysql for the courses CSCI E-12 and CSCI S-12 taught by David
        Heitmeyer. <br />
        The real <a href="https://courses.dce.harvard.edu/">Harvard Extension School course search</a> is at: <a
          href="https://courses.dce.harvard.edu/">courses.dce.harvard.edu</a>
      </p>
    </footer>

</body>

</html>