<!DOCTYPE html>
<html lang="en">
<head>
<!-- The page head is configuring the content to be responsive. -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Jedi Uni Timetable</title>
<!-- Link to the CSS reset stylesheet: normalize.css
Normalize.css is developed by Nicolas Gallagher.
Available at URL: https://necolas.github.io/normalize.css/
Date accessed: 15 March 2021
-->
<link rel="stylesheet" href="css/normalize.css">
<!-- Link to the main stylesheet for the page. -->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- Web page header: with a consistent header across all pages on the website. -->
<header class="pg-header">
<h1>Jedi University: Timetable</h1>
<nav class="pg-main-nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li><a href="mailto:email@testwebsite.ca">Email us</a></li>
<li><a href="https://www.google.ca" target="_blank" rel="noopener">Google search</a></li>
</ul>
</nav>
</header>
<!-- Main content for the web page. -->
<main class="pg-main-content">
<section class="s-info">
<h2>Timetable</h2>
<div id="timetable-data-container"></div>
</section>
</main>
<!-- Web page footer: with a consistent footer across all pages on the website. -->
<footer class="pg-footer">
© Jedi University. Do or do not. There is no try.
</footer>
<!-- Linking to the data script file for the web page. This brings the JSON data into the execution context. -->
<script src="js/data.js"></script>
<!-- Linking to the main scripts file for the web page. -->
<script src="js/scripts.js"></script>
</body>
</html>
上面是Timetable的代码
var dataUni = [
{
"courseCode": "CSCI0001",
"courseName": "DevSecAIOps and Management (1)",
"scheduleDays": "T Th",
"scheduleTime": "10:00-11:30",
"location": "Goldberg 127",
"enrollmentMax": 72,
"enrollmentCurrent": 45,
"enrollmentAvailability": 27,
"instructor": "Linda Myers"
},
{
"courseCode": "CSCI0002",
"courseName": "Precision Design and Management",
"scheduleDays": "M W F",
"scheduleTime": "11:30-12:30",
"location": "Online - Synchronous",
"enrollmentMax": 99,
"enrollmentCurrent": 75,
"enrollmentAvailability": 24,
"instructor": "Mary Rivera"
},
{
"courseCode": "CSCI0003",
"courseName": "Gamified Architecture",
"scheduleDays": "T Th",
"scheduleTime": "15:00-16:30",
"location": "Goldberg 134",
"enrollmentMax": 14,
"enrollmentCurrent": 10,
"enrollmentAvailability": 4,
"instructor": "Carol Leonard"
},
{
"courseCode": "CSCI0004",
"courseName": "Interconnected Virtual Reality Design and Management",
"scheduleDays": "T Th",
"scheduleTime": "13:00-14:30",
"location": "Goldberg 143",
"enrollmentMax": 59,
"enrollmentCurrent": 43,
"enrollmentAvailability": 16,
"instructor": "Barbara Mcdonald"
},
{
"courseCode": "CSCI0005",
"courseName": "Computational 5G Networks Research and Sustainability",
"scheduleDays": "M W",
"scheduleTime": "14:30-16:00",
"location": "Online - Synchronous",
"enrollmentMax": 20,
"enrollmentCurrent": 18,
"enrollmentAvailability": 2,
"instructor": "Amanda Johnson"
},
{
"courseCode": "CSCI0006",
"courseName": "Environmental Sustainability",
"scheduleDays": "T Th",
"scheduleTime": "08:30-10:00",
"location": "Goldberg 143",
"enrollmentMax": 33,
"enrollmentCurrent": 32,
"enrollmentAvailability": 1,
"instructor": "Stephanie Davis"
},
{
"courseCode": "CSCI0007",
"courseName": "The Fourth Wave of Industrialization",
"scheduleDays": "M W F",
"scheduleTime": "10:30-11:30",
"location": "Goldberg 134",
"enrollmentMax": 65,
"enrollmentCurrent": 31,
"enrollmentAvailability": 34,
"instructor": "Jessica Miller"
},
{
"courseCode": "CSCI0008",
"courseName": "Computational 5G Networks Research and Sustainability",
"scheduleDays": "M W F",
"scheduleTime": "11:30-12:30",
"location": "Online - Synchronous",
"enrollmentMax": 27,
"enrollmentCurrent": 26,
"enrollmentAvailability": 1,
"instructor": "Sarah Smith"
},
{
"courseCode": "CSCI0009",
"courseName": "Environmental Sustainability",
"scheduleDays": "M W F",
"scheduleTime": "12:30-13:30",
"location": "Goldberg 143",
"enrollmentMax": 61,
"enrollmentCurrent": 44,
"enrollmentAvailability": 17,
"instructor": "Elizabeth Wilson"
},
{
"courseCode": "CSCI0010",
"courseName": "Environmental Sustainability & Tech",
"scheduleDays": "T Th",
"scheduleTime": "13:30-15:00",
"location": "Goldberg 127",
"enrollmentMax": 14,
"enrollmentCurrent": 12,
"enrollmentAvailability": 2,
"instructor": "Ashley A Taylor"
},
{
"courseCode": "CSCI0011",
"courseName": "Environmental Sustainability & Digital Transformation",
"scheduleDays": "T Th",
"scheduleTime": "13:30-15:00",
"location": "Online - Synchronous",
"enrollmentMax": 120,
"enrollmentCurrent": 34,
"enrollmentAvailability": 86,
"instructor": "Ashley M Taylor"
},
{
"courseCode": "CSCI0012",
"courseName": "Cyber-physical Security Design",
"scheduleDays": "M Th",
"scheduleTime": "09:00-10:30",
"location": "Goldberg 134",
"enrollmentMax": 33,
"enrollmentCurrent": 16,
"enrollmentAvailability": 17,
"instructor": "Ashley S Taylor"
},
{
"courseCode": "CSCI0013",
"courseName": "Cyber-physical Systems",
"scheduleDays": "M W F",
"scheduleTime": "09:30-10:30",
"location": "Goldberg 127",
"enrollmentMax": 110,
"enrollmentCurrent": 57,
"enrollmentAvailability": 53,
"instructor": "Jessica Blaese"
},
{
"courseCode": "CSCI0014",
"courseName": "Immersive Experiences for Collaboration",
"scheduleDays": "M W F",
"scheduleTime": "09:30-10:30",
"location": "Online - Synchronous",
"enrollmentMax": 57,
"enrollmentCurrent": 52,
"enrollmentAvailability": 5,
"instructor": "Heather James"
},
{
"courseCode": "CSCI0015",
"courseName": "Entrepreneurship and Design",
"scheduleDays": "T Th",
"scheduleTime": "10:30-12:00",
"location": "Goldberg 143",
"enrollmentMax": 54,
"enrollmentCurrent": 40,
"enrollmentAvailability": 14,
"instructor": "Heather Jones"
},
{
"courseCode": "CSCI0016",
"courseName": "Analytics for Design",
"scheduleDays": "T Th",
"scheduleTime": "10:30-12:00",
"location": "Goldberg 127",
"enrollmentMax": 98,
"enrollmentCurrent": 80,
"enrollmentAvailability": 18,
"instructor": "Xiang Miller"
},
{
"courseCode": "CSCI0017",
"courseName": "Precision Virtual Reality and The Future",
"scheduleDays": "T Th",
"scheduleTime": "10:30-12:00",
"location": "Goldberg 134",
"enrollmentMax": 27,
"enrollmentCurrent": 13,
"enrollmentAvailability": 14,
"instructor": "Bo Chang"
},
{
"courseCode": "CSCI0018",
"courseName": "Data Science and Fake News",
"scheduleDays": "M W",
"scheduleTime": "10:30-12:00",
"location": "Goldberg 127",
"enrollmentMax": 109,
"enrollmentCurrent": 47,
"enrollmentAvailability": 62,
"instructor": "Juan Ling"
},
{
"courseCode": "CSCI0019",
"courseName": "Internet of Things",
"scheduleDays": "M W F",
"scheduleTime": "12:30-13:30",
"location": "Goldberg 134",
"enrollmentMax": 54,
"enrollmentCurrent": 24,
"enrollmentAvailability": 30,
"instructor": "Bo Chang"
},
{
"courseCode": "CSCI0020",
"courseName": "Data Science for Management",
"scheduleDays": "M W",
"scheduleTime": "13:30-15:00",
"location": "Goldberg 143",
"enrollmentMax": 53,
"enrollmentCurrent": 20,
"enrollmentAvailability": 33,
"instructor": "Tara K Sharma"
},
{
"courseCode": "CSCI0021",
"courseName": "Innovative Smart Spaces and Sustainability (1)",
"scheduleDays": "M W F",
"scheduleTime": "12:30-13:30",
"location": "Goldberg 134",
"enrollmentMax": 64,
"enrollmentCurrent": 59,
"enrollmentAvailability": 5,
"instructor": "Tara Mohan Sharma"
},
{
"courseCode": "CSCI0022",
"courseName": "Innovative Smart Spaces and Sustainability (2)",
"scheduleDays": "M W",
"scheduleTime": "15:00-16:30",
"location": "Online - Synchronous",
"enrollmentMax": 128,
"enrollmentCurrent": 60,
"enrollmentAvailability": 68,
"instructor": "Tara Sharma"
},
{
"courseCode": "CSCI0023",
"courseName": "Innovative Smart Spaces and Sustainability (3)",
"scheduleDays": "M W",
"scheduleTime": "15:00-16:30",
"location": "Goldberg 134",
"enrollmentMax": 52,
"enrollmentCurrent": 40,
"enrollmentAvailability": 12,
"instructor": "Tarun Kumar"
},
{
"courseCode": "CSCI0024",
"courseName": "Innovative Smart Spaces and Sustainability (4)",
"scheduleDays": "M",
"scheduleTime": "09:30-12:30",
"location": "Online - Synchronous",
"enrollmentMax": 68,
"enrollmentCurrent": 47,
"enrollmentAvailability": 21,
"instructor": "Tarun Rajkumar"
},
{
"courseCode": "CSCI0025",
"courseName": "Analytics for Design (1)",
"scheduleDays": "M W F",
"scheduleTime": "11:30-12:30",
"location": "Goldberg 143",
"enrollmentMax": 63,
"enrollmentCurrent": 54,
"enrollmentAvailability": 9,
"instructor": "Ravi Patel"
},
{
"courseCode": "CSCI0026",
"courseName": "Analytics for Design (2)",
"scheduleDays": "T Th",
"scheduleTime": "11:30-13:00",
"location": "Goldberg 134",
"enrollmentMax": 32,
"enrollmentCurrent": 18,
"enrollmentAvailability": 14,
"instructor": "Ranveer Singh"
},
{
"courseCode": "CSCI0027",
"courseName": "Analytics for Design (3)",
"scheduleDays": "T Th",
"scheduleTime": "11:30-13:00",
"location": "Online - Synchronous",
"enrollmentMax": 69,
"enrollmentCurrent": 64,
"enrollmentAvailability": 5,
"instructor": "Ranveer Singh Chandok"
}
]
jsonDataUni = JSON.stringify(dataUni)
以上是data.js
现在需要创建一个script.js 使得可以在timetable.html 里面能显示出来
样式如图
