COMP1073-LU-Module-13/index3.html at master · smccrindle/COMP1073-LU-Module-13 · GitHub

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Third Party APIs | COMP1073 Client-Side JavaScript</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link href="css/normalize.css" rel="stylesheet" />
	<link href="css/nytimes.css" rel="stylesheet" />
</head>
<body>
	<h1>New York Times API</h1>
	<p>This example shows how to connect to a <abbr title="REpresentative State Transfer">REST</abbr>ful API. It’s a bit different that what we’ve been doing with other APIs.</p>
	<div class="wrapper">
		<div class="controls">
			<form>
				<p>
					<label for="search">Enter a SINGLE search term (required): </label>
					<input type="text" id="search" class="search" required>
				</p>
				<p>
					<label for="start-date">Start date (format YYYYMMDD): </label>
					<input type="date" id="start-date" class="start-date" pattern="[0-9]{8}">
				</p>
				<p>
					<label for="end-date">End date (format YYYYMMDD): </label>
					<input type="date" id="end-date" class="end-date" pattern="[0-9]{8}">
				</p>
				<p>
					<button class="submit">Search</button>
				</p>
			</form>
		</div>
		<div class="results">
			<section>
			</section>
		</div>
	</div>

	<script>
		// The URL for the Article Search API at nytimes.com
		var baseURL = 'https://api.nytimes.com/svc/search/v2/articlesearch.json';
		// STEP 1: Get your own API key and paste it below…
		var key = 'Aan8co9cOTtXsOER9KDyvcAgMsXtWyGD';
		var url;
		// Grab references to all the DOM elements you'll need to manipulate
		var searchTerm = document.querySelector('.search');
		var startDate = document.querySelector('.start-date');
		var endDate = document.querySelector('.end-date');
		var searchForm = document.querySelector('form');
		var submitBtn = document.querySelector('.submit');
		var section = document.querySelector('section');
		// STEP 2: Add a submit event listener for the search form, referencing the fetchResults function as the callback
		searchForm.addEventListener("submit", fetchResults);
		// Functions
		function fetchResults(e) {
			console.log("Form submitted!");
			// Use preventDefault() to stop the form submitting
			e.preventDefault();
			// STEP 3: Assemble the full URL, according to the API documentation at the New York Times
			url = baseURL + "?api-key=" + key + "&q=" + searchTerm.value + '&fq=document_type:("article")';
			// STEP 4: Use fetch() to pass the URL that we built as a request to the API service
			fetch(url).then(function(result){
				return result.json();
			}).then(function(json){
				displayResults(json);
			});
		}

		function displayResults(json) {
			// Clear out the old results…
			while (section.firstChild) {
					section.removeChild(section.firstChild);
			}
			// STEP 6: Create the var articles to capture the articles from the JSON object
			var articles = json.response.docs;

		  if(articles.length === 0) {
		    var para = document.createElement('p');
		    para.textContent = 'No results returned.'
		    section.appendChild(para);
		  } else {
		    for(var i = 0; i < articles.length; i++) {
		      var article = document.createElement('article');
		      var heading = document.createElement('h2');
		      var link = document.createElement('a');
		      var img = document.createElement('img');
		      var para1 = document.createElement('p');

		      var current = articles[i];
		      console.log(current);
					// STEP 7: Look at the console output from the API…
		      link.href = current.web_url;
		      link.textContent = current.headline.main;
		      para1.textContent = current.snippet;

		      if(current.multimedia.length > 0) {
		        img.src = 'https://www.nytimes.com/' + current.multimedia[0].url;
		        img.alt = current.headline.main;
		      }
					// STEP 8: Put each article together as an ARTICLE element and append it as a child of the SECTION element in the HTML
			  		article.appendChild(heading);
					heading.appendChild(link);
					article.appendChild(img);
					article.appendChild(para1);
					section.appendChild(article);
				}
			}
		};

		// This example adapted from "Third-party APIs" at https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs
	</script>
</body>
</html>