Skip to content

Commit 1a7d4ba

Browse files
remarcmijremarcmij
committed
Updated Nobel Prize prototype version
1 parent dbcf6ed commit 1a7d4ba

16 files changed

Lines changed: 204 additions & 329 deletions

File tree

‎src/week3/7-oop/README.md‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,5 @@
11
# Object Oriented Programming Examples
22

3-
## OOP Introduction
4-
5-
Watch Brad Traversy's [JavaScript OOP Crash Course (ES5 & ES6)](https://www.youtube.com/watch?v=vDJpGenyHaA&t=1055s) on YouTube (40 mins). The example files that Brad uses can be found in this repo, folder **week3/7-oop/traversy_oop_crash_course**. To run the code:
6-
7-
1. Open **index-all.html** by right-clicking the file in the VSCode Explorer and select **Open with Live Server**.
8-
2. Open the Chrome Developer Tools console.
9-
3. Select the file to run from the select box.
10-
11-
To examine a particular example in the Chrome Developer Tools, modify **index.html** to load the desired JavaScript file and open **index.html** in the browser.
12-
133
## 1. Nobel Prize API
144

155
This example builds on the Nobel Prize API example of week 1. Its purpose is to demonstrate the application of Object Oriented Programming, using older-style prototype-based JavaScript objects and the newer ES6 classes.
@@ -75,7 +65,7 @@ Two logically equivalent versions of this application are provided:
7565

7666
| Folder | Description |
7767
| ------ | ----------- |
78-
| nobel-prize-prototype | Uses pre-ES6 prototypal inheritance. |
68+
| nobel-prize-proto | Uses pre-ES6 prototypal inheritance. |
7969
| nobel-prize-classes | Uses ES6 classes. |
8070

8171

‎src/week3/7-oop/model-view.png‎

388 Bytes
Loading

‎src/week3/7-oop/nobel-prize-classes/PageView.js‎

Lines changed: 0 additions & 144 deletions
This file was deleted.

‎src/week3/7-oop/nobel-prize-proto/App.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
'use strict';
2+
3+
{
4+
const { Model, HeaderView, LaureatesView, ErrorView, SpeechView } = window;
5+
const { createAndAppend } = window.Util;
6+
7+
function App() {
8+
const containers = App.renderContainers();
9+
10+
const model = new Model();
11+
const fetchData = model.fetchData.bind(model);
12+
13+
model.subscribe(new HeaderView(containers.header, fetchData));
14+
model.subscribe(new LaureatesView(containers.main));
15+
model.subscribe(new ErrorView(containers.error));
16+
model.subscribe(new SpeechView('en-GB'));
17+
18+
fetchData();
19+
}
20+
21+
App.renderContainers = function() {
22+
const root = document.getElementById('root');
23+
createAndAppend('h1', root, { text: 'Nobel Prize Laureates' });
24+
const header = createAndAppend('header', root);
25+
const error = createAndAppend('div', root);
26+
const main = createAndAppend('main', root, {
27+
id: 'main-container',
28+
});
29+
return { header, error, main };
30+
};
31+
32+
window.onload = () => new App();
33+
}

‎src/week3/7-oop/nobel-prize-proto/ErrorView.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
'use strict';
2+
3+
{
4+
const { createAndAppend } = window.Util;
5+
6+
function ErrorView(container) {
7+
this.container = container;
8+
}
9+
10+
ErrorView.prototype.update = function(state) {
11+
this.render(state.error);
12+
};
13+
14+
ErrorView.prototype.render = function(error) {
15+
this.container.innerHTML = '';
16+
if (error) {
17+
createAndAppend('div', this.container, {
18+
text: error.message,
19+
class: 'alert alert-error',
20+
});
21+
}
22+
};
23+
24+
window.ErrorView = ErrorView;
25+
}

‎src/week3/7-oop/nobel-prize-proto/HeaderView.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
'use strict';
2+
3+
{
4+
const { createAndAppend } = window.Util;
5+
6+
function HeaderView(header, fetchData) {
7+
this.header = header;
8+
this.fetchData = fetchData;
9+
this.select = null;
10+
}
11+
12+
HeaderView.prototype.update = function(state) {
13+
if (!this.select && !state.error) {
14+
this.render(state.countries);
15+
}
16+
};
17+
18+
HeaderView.prototype.render = function(countries) {
19+
this.select = createAndAppend('select', this.header);
20+
this.select.addEventListener('change', () =>
21+
this.fetchData(this.select.value),
22+
);
23+
24+
createAndAppend('option', this.select, {
25+
text: 'Select a country',
26+
disabled: 'disabled',
27+
selected: 'selected',
28+
});
29+
countries.forEach((country, index) =>
30+
createAndAppend('option', this.select, {
31+
text: country.name,
32+
value: index,
33+
}),
34+
);
35+
};
36+
37+
window.HeaderView = HeaderView;
38+
}

‎src/week3/7-oop/nobel-prize-proto/LaureatesView.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
'use strict';
2+
3+
{
4+
const { createAndAppend } = window.Util;
5+
6+
function LaureatesView(container) {
7+
this.container = container;
8+
}
9+
10+
LaureatesView.prototype.update = function(state) {
11+
if (!state.error && state.laureates != null) {
12+
this.render(state.laureates);
13+
}
14+
};
15+
16+
LaureatesView.prototype.render = function(laureates) {
17+
this.container.innerHTML = '';
18+
if (laureates.length === 0) {
19+
createAndAppend('h4', this.container, {
20+
text: 'No laureates found',
21+
});
22+
return;
23+
}
24+
const ul = createAndAppend('ul', this.container, {
25+
id: 'list-container',
26+
});
27+
laureates.forEach(laureate => {
28+
const { surname, firstname } = laureate;
29+
const li = createAndAppend('li', ul, {
30+
class: 'list-item',
31+
});
32+
const table = createAndAppend('table', li);
33+
const tbody = createAndAppend('tbody', table);
34+
this.addRow(tbody, 'Name', `${firstname} ${surname || ''} `);
35+
this.addRow(
36+
tbody,
37+
'Born',
38+
`${laureate.born}, ${laureate.bornCity}, ${laureate.bornCountry}`,
39+
);
40+
if (laureate.died !== '0000-00-00') {
41+
this.addRow(
42+
tbody,
43+
'Died',
44+
`${laureate.died}, ${laureate.diedCity}, ${laureate.diedCountry}`,
45+
);
46+
}
47+
this.renderLaureatePrizes(tbody, laureate.prizes);
48+
});
49+
};
50+
51+
LaureatesView.prototype.renderLaureatePrizes = function(tbody, prizes) {
52+
const tr = createAndAppend('tr', tbody);
53+
createAndAppend('th', tr, { text: 'Prizes:', class: 'label' });
54+
const td = createAndAppend('td', tr);
55+
const ul = createAndAppend('ul', td);
56+
prizes.forEach(prize => {
57+
const li = createAndAppend('li', ul);
58+
createAndAppend('span', li, {
59+
text: `${prize.year}, ${prize.category}`,
60+
});
61+
if (prize.motivation) {
62+
createAndAppend('span', li, {
63+
text: `: ${prize.motivation}`,
64+
class: 'motivation',
65+
});
66+
}
67+
});
68+
};
69+
70+
LaureatesView.prototype.addRow = function(tbody, label, value) {
71+
const row = createAndAppend('tr', tbody);
72+
createAndAppend('th', row, {
73+
text: `${label}:`,
74+
class: 'label',
75+
});
76+
createAndAppend('td', row, { text: value });
77+
return row;
78+
};
79+
80+
window.LaureatesView = LaureatesView;
81+
}

src/week3/7-oop/nobel-prize-prototype/Model.js renamed to src/week3/7-oop/nobel-prize-proto/Model.js

File renamed without changes.

src/week3/7-oop/nobel-prize-prototype/Observable.js renamed to src/week3/7-oop/nobel-prize-proto/Observable.js

File renamed without changes.

src/week3/7-oop/nobel-prize-prototype/SpeechView.js renamed to src/week3/7-oop/nobel-prize-proto/SpeechView.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
'use strict';
22

33
{
4-
function SpeechView(model, lang) {
5-
model.subscribe(this);
6-
this.count = 0;
4+
function SpeechView(lang) {
75
this.lang = lang;
86
this.utterance = null;
97
this.voices = null;
@@ -24,7 +22,7 @@
2422
this.speak(
2523
`There ${chunks[0]} ${laureates.length} laureate${
2624
chunks[1]
27-
} in ${former} ${selectedCountry.name}.`,
25+
} born in ${former} ${selectedCountry.name}.`,
2826
);
2927
}
3028
};

0 commit comments

Comments
 (0)