generated from COP3530/P3-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
59 lines (54 loc) · 1.98 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Youtube Controller</title>
<style>
</style>
</head>
<script>
async function onClick() {
const queryString = document.getElementById("query").value;
// Send this as a http get request to the server
// Then receive the results in reponse for that request.
const res = await fetch('http://localhost:3000/query?search=' + queryString);
const data = await res.json();
const result = document.getElementById("result");
result.innerHTML = `${data.items.length} current entries successfully parsed`;
const total = document.getElementById("total");
total.innerHTML = `${data.maxResults} total entries found`;
console.table(data.items)
}
async function createCsv() {
const res = await fetch('http://localhost:3000/csv');
const blob = await res.blob();
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'videos.csv'; // give it your desired name
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
}
</script>
<body>
<h1>Youtube Data Parser</h1>
<div>
<label for="query">Query String</label>
<input id="query" type="string" value=""></input>
</div>
<button onclick=onClick() style="margin-top: 10px;">Search</button>
<div>
<div style="margin-top: 10px; font-weight: bold; font-size: larger;">Results (check console)</div>
<div>
<label for="result">Current Entries: </label>
<label id="result"></label>
</div>
<div>
<label for="total">Total Results Found: </label>
<label id="total"></label>
</div>
</div>
<button onclick=createCsv() style="margin-top: 20px;">Generate CSV</button>
</body>
</html>