Skip to content

Commit 0855a6d

Browse files
remarcmijremarcmij
committed
Add intermediate input field
1 parent 2a001f4 commit 0855a6d

14 files changed

Lines changed: 123 additions & 105 deletions

File tree

‎src/week1/10-dryest/app.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/*
2+
Enhance createAndAppend() to take optional text and attributes parameters
3+
*/
4+
5+
'use strict';
6+
7+
{
8+
const BASE_URL = 'http://api.nobelprize.org/v1';
9+
10+
function fetchJSON(url, cb) {
11+
const xhr = new XMLHttpRequest();
12+
xhr.responseType = 'json';
13+
xhr.open('GET', url);
14+
xhr.onload = () => {
15+
if (xhr.status >= 200 && xhr.status <= 299) {
16+
cb(null, xhr.response);
17+
} else {
18+
cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
19+
}
20+
};
21+
xhr.onerror = () => cb(new Error('Network request failed'));
22+
xhr.send();
23+
}
24+
25+
function createAndAppend(name, parent, options = {}) {
26+
const elem = document.createElement(name);
27+
parent.appendChild(elem);
28+
Object.entries(options).forEach(([key, value]) => {
29+
if (key === 'text') {
30+
elem.textContent = value;
31+
} else {
32+
elem.setAttribute(key, value);
33+
}
34+
});
35+
return elem;
36+
}
37+
38+
function onClick(countryCode, ul) {
39+
ul.innerHTML = '';
40+
41+
const url = `${BASE_URL}/laureate.json?bornCountryCode=${countryCode}`;
42+
43+
fetchJSON(url, (err, data) => {
44+
if (err) {
45+
console.error(err.message); // TODO: render errors to the page
46+
return; // exit early in case of errors
47+
}
48+
data.laureates.forEach(laureate => {
49+
createAndAppend('li', ul, {
50+
text: `${laureate.firstname} ${laureate.surname}`,
51+
});
52+
});
53+
});
54+
}
55+
56+
function main() {
57+
const root = document.getElementById('root');
58+
const input = createAndAppend('input', root, { type: 'text' });
59+
const button = createAndAppend('button', root, { text: 'GO' });
60+
const ul = createAndAppend('ul', root);
61+
button.addEventListener('click', () => onClick(input.value, ul));
62+
}
63+
64+
window.onload = main;
65+
}

src/week1/10-select-dryer/index.html renamed to src/week1/10-dryest/index.html

File renamed without changes.

src/week1/10-select-dryer/app.js renamed to src/week1/11-select/app.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,13 @@
3737
}
3838

3939
function main() {
40+
const root = document.getElementById('root');
41+
4042
fetchJSON(`${API_BASE_URL}/country.json`, (err, data) => {
4143
if (err) {
4244
console.error(err.message); // TODO: render errors to the page
4345
return;
4446
}
45-
46-
const root = document.getElementById('root');
4747
const select = createAndAppend('select', root);
4848

4949
data.countries

src/week1/11-combine/index.html renamed to src/week1/11-select/index.html

File renamed without changes.

src/week1/11-combine/app.js renamed to src/week1/12-combine/app.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,13 +53,14 @@
5353
}
5454

5555
function main() {
56+
const root = document.getElementById('root');
57+
5658
fetchJSON(`${API_BASE_URL}/country.json`, (err, data) => {
5759
if (err) {
5860
console.error(err.message); // TODO: render errors to the page
5961
return;
6062
}
6163

62-
const root = document.getElementById('root');
6364
const select = createAndAppend('select', root);
6465

6566
createAndAppend('option', select, {

src/week1/9-select/index.html renamed to src/week1/12-combine/index.html

File renamed without changes.

src/week1/12-final/app.js renamed to src/week1/13-final/app.js

File renamed without changes.

src/week1/12-final/index.html renamed to src/week1/13-final/index.html

File renamed without changes.

src/week1/12-final/style.css renamed to src/week1/13-final/style.css

File renamed without changes.

‎src/week1/7-dry/app.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,18 +29,18 @@
2929
return elem;
3030
}
3131

32-
const countryCode = 'TR';
33-
const url = `${BASE_URL}/laureate.json?bornCountryCode=${countryCode}`;
34-
3532
function main() {
33+
const root = document.getElementById('root');
34+
const ul = createAndAppend('ul', root);
35+
36+
const countryCode = 'TR';
37+
const url = `${BASE_URL}/laureate.json?bornCountryCode=${countryCode}`;
38+
3639
fetchJSON(url, (err, data) => {
3740
if (err) {
3841
console.error(err.message); // TODO: render errors to the page
3942
return; // exit early in case of errors
4043
}
41-
const root = document.getElementById('root');
42-
43-
const ul = createAndAppend('ul', root);
4444

4545
data.laureates.forEach(laureate => {
4646
const li = createAndAppend('li', ul);

0 commit comments

Comments
 (0)