## 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 &amp; 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>