-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsolution3.html
142 lines (84 loc) · 4.22 KB
/
solution3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cardiff University Exercise</title>
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="layout.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
/* this makes a request to read a JSON file */
$.getJSON("http://learn.cf.ac.uk/staff/semahd/javascript/OpenDay.json", function (data) {
var items = [];
/* loop through json data and inserting in items array */
for (let i = 0; i < data.topics.length; i++) {
let obj = data.topics[i];
items.push("<a href=\"#\">" + obj.name + "</a>");
}
/* inserts items into header as menu links, and add an event listener on the links. This allows the user to select a topic */
$("header").append(items.join("")).append(function () {
$("a").on("click", function () {
getTopic($(this).text(), data);
});
});
});
});
/* this function inserts the topic selected when the user selects a topic. */
function getTopic(topic, data) {
$("main").empty();
var items = [];
for (let i = 0; i < data.topics.length; i++) {
let obj = data.topics[i];
if (obj.name == topic) {
items.push("<h2><span>TOPIC:</span> \"" + obj.name + "\"</h2>");
for (let x = 0; x < obj.programs.length; x++) {
let newobj = obj.programs[x];
items.push("<h4>" + newobj.title + "</h4>");
items.push("<p>" + newobj.description_short + "</p>");
items.push("<p><strong>Location: </strong>" + newobj.room + ", " + newobj.location.address + "<strong> Start time: </strong>" + newobj.start_time + "</p>");
}
}
}
$("main").append(items.join(""));
}
/* once the user types in a search query this function tries to match the query against title or description_short using regular expressions matching. */
function searchResult() {
$("main").empty();
$.getJSON("http://learn.cf.ac.uk/staff/semahd/javascript/OpenDay.json", function (data) {
var items = [];
const pattern = new RegExp($("input").val(), "i");
items.push("<h2><span>QUERY: </span>\"" + $("input").val() + "\"</h2>");
for (let i = 0; i < data.topics.length; i++) {
let obj = data.topics[i];
for (let x = 0; x < obj.programs.length; x++) {
let newobj = obj.programs[x];
if (pattern.test(newobj.title) || pattern.test(newobj.description_short)) {
items.push("<h4>" + newobj.title + "</h4>");
items.push("<p>" + newobj.description_short + "</p>");
items.push("<p><strong>Location: </strong>" + newobj.room + ", " + newobj.location.address + "<strong> Start time: </strong>" + newobj.start_time + "</p>");
}
}
}
$("main").append(items.join(""));
});
}
</script>
</head>
<body>
<h1>July Undergraduate Open Day</h1>
<h3>5 July, 2019</h3>
<header class="container">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for an activity">
<button class="btn btn-danger" onclick="searchResult()" type="submit">Go</button>
</div>
<p class="up">Or select a topic</p>
<!-- Topic list appended as links to header here. General, Students Union, Sport etc -->
</header>
<p class="up">Search results</p>
<main class="container">
<!-- Query and topic search results placed in here -->
</main>
</body>
</html>