Skip to content

Commit a0e5e40

Browse files
garcaigarcai
committed
did indenting
1 parent 91e30b3 commit a0e5e40

File tree

2 files changed

+244
-141
lines changed

2 files changed

+244
-141
lines changed

‎javascript/apis/third-party-apis/nytimes/index.html

Lines changed: 180 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,189 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<title>NY Times API example</title>
6-
<link href="nytimes.css" rel="stylesheet">
7-
</head>
8-
<body>
9-
<h1>NY Times article search</h1>
10-
11-
<div class="wrapper">
12-
13-
<div class="controls">
14-
<form>
15-
<p>
16-
<label for="search">Enter a SINGLE search term (required): </label>
17-
<input type="text" id="search" class="search" required>
18-
</p>
19-
<p>
20-
<label for="start-date">Enter a start date (format YYYYMMDD): </label>
21-
<input type="date" id="start-date" class="start-date" pattern="[0-9]{8}">
22-
</p>
23-
<p>
24-
<label for="end-date">Enter an end date (format YYYYMMDD): </label>
25-
<input type="date" id="end-date" class="end-date" pattern="[0-9]{8}">
26-
</p>
27-
<p>
28-
<button class="submit">Submit search</button>
29-
</p>
30-
</form>
31-
</div>
32-
33-
<div class="results">
34-
<nav>
35-
<button class="prev">Previous 10</button>
36-
<button class="next">Next 10</button>
37-
</nav>
38-
39-
<section>
40-
</section>
41-
</div>
42-
3+
<head>
4+
<meta charset="utf-8">
5+
<title>NY Times API example</title>
6+
<link href="nytimes.css" rel="stylesheet">
7+
</head>
8+
<body>
9+
<h1>NY Times article search</h1>
10+
11+
<div class="wrapper">
12+
13+
<div class="controls">
14+
<form>
15+
<p>
16+
<label for="search">Enter a SINGLE search term (required): </label>
17+
<input type="text" id="search" class="search" required>
18+
</p>
19+
<p>
20+
<label for="start-date">Enter a start date (format YYYYMMDD): </label>
21+
<input type="date" id="start-date" class="start-date" pattern="[0-9]{8}">
22+
</p>
23+
<p>
24+
<label for="end-date">Enter an end date (format YYYYMMDD): </label>
25+
<input type="date" id="end-date" class="end-date" pattern="[0-9]{8}">
26+
</p>
27+
<p>
28+
<button class="submit">Submit search</button>
29+
</p>
30+
</form>
4331
</div>
4432

45-
<script>
46-
47-
// Defining a baseURL and key to as part of the request URL
48-
49-
const baseURL = 'https://api.nytimes.com/svc/search/v2/articlesearch.json';
50-
const key = 'INSERT-YOUR-API-KEY-HERE';
51-
let url;
52-
53-
// Grab references to all the DOM elements you'll need to manipulate
54-
55-
const searchTerm = document.querySelector('.search');
56-
const startDate = document.querySelector('.start-date');
57-
const endDate = document.querySelector('.end-date');
58-
const searchForm = document.querySelector('form');
59-
60-
// This is never used
61-
// const submitBtn = document.querySelector('.submit');
62-
63-
const nextBtn = document.querySelector('.next');
64-
const previousBtn = document.querySelector('.prev');
65-
66-
const section = document.querySelector('section');
67-
const nav = document.querySelector('nav');
68-
69-
// Hide the "Previous"/"Next" navigation to begin with, as we don't need it immediately
70-
nav.style.display = 'none';
71-
72-
// define the initial page number and status of the navigation being displayed
73-
let pageNumber = 0;
74-
75-
// This is never used
76-
// let displayNav = false;
77-
78-
// Event listeners to control the functionality
79-
33+
<div class="results">
34+
<nav>
35+
<button class="prev">Previous 10</button>
36+
<button class="next">Next 10</button>
37+
</nav>
8038

39+
<section>
40+
</section>
41+
</div>
8142

82-
</script>
43+
</div>
8344

45+
<script>
46+
// Defining a baseURL and key to as part of the request URL
8447

85-
</body>
48+
const baseURL = 'https://api.nytimes.com/svc/search/v2/articlesearch.json';
49+
const key = 'INSERT-YOUR-API-KEY-HERE';
50+
let url;
51+
52+
// Grab references to all the DOM elements you'll need to manipulate
53+
54+
const searchTerm = document.querySelector('.search');
55+
const startDate = document.querySelector('.start-date');
56+
const endDate = document.querySelector('.end-date');
57+
const searchForm = document.querySelector('form');
58+
59+
// This is never used
60+
// const submitBtn = document.querySelector('.submit');
61+
62+
const nextBtn = document.querySelector('.next');
63+
const previousBtn = document.querySelector('.prev');
64+
65+
const section = document.querySelector('section');
66+
const nav = document.querySelector('nav');
67+
68+
// Hide the "Previous"/"Next" navigation to begin with, as we don't need it immediately
69+
nav.style.display = 'none';
70+
71+
// define the initial page number and status of the navigation being displayed
72+
let pageNumber = 0;
73+
74+
// This is never used
75+
// let displayNav = false;
76+
77+
// Event listeners to control the functionality
78+
79+
80+
// Event listeners to control the functionality
81+
searchForm.addEventListener('submit', submitSearch);
82+
nextBtn.addEventListener('click', nextPage);
83+
previousBtn.addEventListener('click', previousPage);
84+
85+
function submitSearch(e){
86+
pageNumber = 0;
87+
fetchResults(e);
88+
}
89+
90+
function fetchResults(e) {
91+
// Use preventDefault() to stop the form submitting
92+
e.preventDefault();
93+
94+
// Assemble the full URL
95+
url = baseURL + '?api-key=' + key + '&page=' + pageNumber + '&q=' + searchTerm.value + '&fq=document_type:("article")';
96+
97+
if(startDate.value !== '') {
98+
url += '&begin_date=' + startDate.value;
99+
};
100+
101+
if(endDate.value !== '') {
102+
url += '&end_date=' + endDate.value;
103+
};
104+
105+
// Use fetch() to make the request to the API
106+
fetch(url).then(function(result) {
107+
return result.json();
108+
}).then(function(json) {
109+
displayResults(json);
110+
});
111+
}
112+
113+
function displayResults(json) {
114+
while (section.firstChild) {
115+
section.removeChild(section.firstChild);
116+
}
117+
118+
const articles = json.response.docs;
119+
120+
if(articles.length === 10) {
121+
nav.style.display = 'block';
122+
} else {
123+
nav.style.display = 'none';
124+
}
125+
126+
if(articles.length === 0) {
127+
const para = document.createElement('p');
128+
para.textContent = 'No results returned.'
129+
section.appendChild(para);
130+
} else {
131+
for(let i = 0; i < articles.length; i++) {
132+
const article = document.createElement('article');
133+
const heading = document.createElement('h2');
134+
const link = document.createElement('a');
135+
const img = document.createElement('img');
136+
const para1 = document.createElement('p');
137+
const para2 = document.createElement('p');
138+
const clearfix = document.createElement('div');
139+
140+
const current = articles[i];
141+
console.log(current);
142+
143+
link.href = current.web_url;
144+
link.textContent = current.headline.main;
145+
para1.textContent = current.snippet;
146+
para2.textContent = 'Keywords: ';
147+
for(let j = 0; j < current.keywords.length; j++) {
148+
const span = document.createElement('span');
149+
span.textContent = current.keywords[j].value + ' ';
150+
para2.appendChild(span);
151+
}
152+
153+
if(current.multimedia.length > 0) {
154+
img.src = 'http://www.nytimes.com/' + current.multimedia[0].url;
155+
img.alt = current.headline.main;
156+
}
157+
158+
clearfix.setAttribute('class','clearfix');
159+
160+
article.appendChild(heading);
161+
heading.appendChild(link);
162+
article.appendChild(img);
163+
article.appendChild(para1);
164+
article.appendChild(para2);
165+
article.appendChild(clearfix);
166+
section.appendChild(article);
167+
}
168+
}
169+
};
170+
171+
function nextPage(e) {
172+
pageNumber++;
173+
fetchResults(e);
174+
};
175+
176+
function previousPage(e) {
177+
if(pageNumber > 0) {
178+
pageNumber--;
179+
} else {
180+
return;
181+
}
182+
fetchResults(e);
183+
};
184+
185+
</script>
186+
187+
188+
</body>
86189
</html>

0 commit comments

Comments
 (0)