JSFiddle - React, Tailwind, and code Playground

by raviolicode

HTML

<body>
     <h1>Timetable</h1>

    <div id='controls'>Enter Module:
        <input value='SET08101' id='module' />
        <button id='getModule'>Go</button>
        <button id='getClear'>Clear</button>
    </div>
    <table id='fixedDetails'>
        <caption>Fixed Details</caption>
        <tr>
            <th>Module Code:</th>
            <td id='moduleCode'></td>
        </tr>
        <tr>
            <th>Module Name:</th>
            <td id='moduleName'></td>
        </tr>
        <tr>
            <th>Module Leader:</th>
            <td id='moduleLeader'></td>
        </tr>
        <tr>
            <th>Credit Value:</th>
            <td id='credit'></td>
        </tr>
        <tr>
            <th>School:</th>
            <td id='school'></td>
        </tr>
    </table>
    <table id='schedule'>
        <caption>Schedule</caption>
        <tr>
            <th></th>
            <th>09</th>
            <th>10</th>
            <th>11</th>
            <th>12</th>
            <th>13</th>
            <th>14</th>
            <th>15</th>
            <th>16</th>
        </tr>
        <tr>
            <th>Mon</th>
            <td id='mon09'></td>
            <td id='mon10'></td>
            <td id='mon11'></td>
            <td id='mon12'></td>
            <td id='mon13'></td>
            <td id='mon14'></td>
            <td id='mon15'></td>
            <td id='mon16'></td>
        </tr>
        <tr>
            <th>Tue</th>
            <td id='tue09'></td>
            <td id='tue10'></td>
            <td id='tue11'></td>
            <td id='tue12'></td>
            <td id='tue13'></td>
            <td id='tue14'></td>
            <td id='tue15'></td>
            <td id='tue16'></td>
        </tr>
        <tr>
            <th>Wed</th>
            <td id='wed09'></td>
            <td id='wed10'></td>
            <td id='wed11'></td>
            <td id='wed12'></td>
            <td id='wed13'></td>
            <td id='wed14'></td>
            <td id='wed15'></td>
       ...

CSS

body {
    font-family:arial;
}
th, td {
    border:solid thin black;
    font-size:18px;
}
table {
    border-collapse:collapse;
}
title {
    font-size:36px;
    text-decoration:underline;
}
#fixedDetails {
    text-aling:left;
}

JavaScript

$(function () {
    $('#getModule').click(function () {
        $.getJSON('https://tracker.napier.ac.uk/timetable/cw.pl', {
            module: $('#module').val()
        },

        function (r) {
            $('#moduleCode').text(r.SITS_MOD_CODE);
            $('#moduleName').text(r.SITS_MOD_NAME);
            $('#moduleLeader').text(r.SITS_MOD_LEADER);
            $('#credit').text(r.SITS_MOD_CRDT);

            
            for (var i = 0; i < r.events.length; i++) {
                console.log("slot: " + r.events[i].slot);
                var timeTable = new TimeTable(r.events[i].slot);
                text = r.desc + '\n' + r.events[i].type + '\n' + r.events[i].rooms + '\n' + r.events[i].id + r.events[i].duration;
                timeTable.fill(r.events[i].duration, text);
            }

            if (r.SITS_DPT_CODE == 'H10') {
                $('#school').text('Nursing, Midwifery & Social Care')
            };

            if (r.SITS_DPT_CODE == 'B40') {
                $('#school').text('Management')
            };

            if (r.SITS_DPT_CODE == 'E30') {
                $('#school').text('Arts & Creative Industries')
            };

            if (r.SITS_DPT_CODE == 'H20') {
                $('#school').text('Life, Sport & Social Sciences')
            };

            if (r.SITS_DPT_CODE == 'B30') {
                $('#school').text('Marketing, Tourism & Languages')
            };

            if (r.SITS_DPT_CODE == 'B50') {
                $('#school').text('Accounting, Financial Services & Law')
            };

            if (r.SITS_DPT_CODE == 'E10') {
                $('#school').text('Engineering & Built Environment')
            };

            if (r.SITS_DPT_CODE == 'E20') {
                $('#school').text('Computing')
            };


        })
    })
    $('#getClear').click(function () {
        $('#moduleCode').text("");
        $('#module').text("");
        $('#moduleName').text("");
        $('#moduleLeader').text("");
       ...