## Front-end courses

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

- Use JavaScript `fetch` to get the JSON data
- Use Handlebars to process the data

    <!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>