Skip to content

Commit b46d5dc

Browse files
mickeyjoe75mickeyjoe75
committed
completed pubsub lab planets,tested
1 parent f03f0e4 commit b46d5dc

767 files changed

Lines changed: 226143 additions & 95 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎lab_pubsub_planets/lab_pubsub_planets_start/public/css/main.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
label::after {
2+
content: ':';
3+
}
4+
5+
body {
6+
background-color: lightsteelblue;
7+
font-family: helvetica;
8+
}

‎lab_pubsub_planets/lab_pubsub_planets_start/public/index.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,14 @@ <h1 class="page-title">The Planets of Our Solar System</h1>
1717

1818
<nav class="planets-menu">
1919
<ol>
20-
<li id="Mercury" class="planet-menu-item">Mercury</li>
21-
<li id="Venus" class="planet-menu-item">Venus</li>
22-
<li id="Earth" class="planet-menu-item">Earth</li>
23-
<li id="Mars" class="planet-menu-item">Mars</li>
24-
<li id="Jupiter" class="planet-menu-item">Jupiter</li>
25-
<li id="Saturn" class="planet-menu-item">Saturn</li>
26-
<li id="Uranus" class="planet-menu-item">Uranus</li>
27-
<li id="Neptune" class="planet-menu-item">Neptune</li>
20+
<li id="0" class="planet-menu-item">Mercury</li>
21+
<li id="1" class="planet-menu-item">Venus</li>
22+
<li id="2" class="planet-menu-item">Earth</li>
23+
<li id="3" class="planet-menu-item">Mars</li>
24+
<li id="4" class="planet-menu-item">Jupiter</li>
25+
<li id="5" class="planet-menu-item">Saturn</li>
26+
<li id="6" class="planet-menu-item">Uranus</li>
27+
<li id="7" class="planet-menu-item">Neptune</li>
2828
</ol>
2929
</nav>
3030

‎lab_pubsub_planets/lab_pubsub_planets_start/src/app.js‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,19 @@
1-
const PlanetsData = require('./data/planets.js');
1+
const Planets = require('./data/planets.js');
22
const ListView = require('./views/list_view.js');
3+
const PlanetInfoView = require('./views/info_view.js');
34

45
document.addEventListener('DOMContentLoaded', () => {
5-
const
6+
const planetsData = new Planets();
7+
planetsData.bindEvents();
8+
9+
10+
const clickElement = document.querySelector('nav.planets-menu');
11+
const elements = document.querySelectorAll('li.planet-menu-item');
12+
const planetsMenu = new ListView(elements);
13+
planetsMenu.bindEvents();
14+
15+
const detailsContainer = document.querySelector('section.planet-details');
16+
const planetDetailsView = new PlanetInfoView(detailsContainer);
17+
planetDetailsView.bindEvents();
18+
619
});

‎lab_pubsub_planets/lab_pubsub_planets_start/src/data/planets.js‎

Lines changed: 101 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,102 @@
1-
const planets = [
2-
{
3-
name: 'Mercury',
4-
orbit: 87.969,
5-
day: 58.646,
6-
surfaceArea: 0.147,
7-
volume: 0.056,
8-
gravity: 0.38,
9-
moons: 0,
10-
image: 'images/mercury.jpg'
11-
},
12-
{
13-
name: 'Venus',
14-
orbit: 224.701,
15-
day: -234.025,
16-
surfaceArea: 0.902,
17-
volume: 0.866,
18-
gravity: 0.904,
19-
moons: 0,
20-
image: 'images/venus.jpg'
21-
},
22-
{
23-
name: 'Earth',
24-
orbit: 365.256,
25-
day: 1,
26-
surfaceArea: 1,
27-
volume: 1,
28-
gravity: 1,
29-
moons: 1,
30-
image: 'images/earth.jpg'
31-
},
32-
{
33-
name: 'Mars',
34-
orbit: 686.971,
35-
day: 1.025,
36-
surfaceArea: 0.284,
37-
volume: 0.151,
38-
gravity: 0.376,
39-
moons: 2,
40-
image: 'images/mars.jpg'
41-
},
42-
{
43-
name: 'Jupiter',
44-
orbit: 4332.59,
45-
day: 0.413,
46-
surfaceArea: 121.9,
47-
volume: 1321,
48-
gravity: 2.528,
49-
moons: 69,
50-
image: 'images/jupiter.jpg'
51-
},
52-
{
53-
name: 'Saturn',
54-
orbit: 10759.22,
55-
day: 0.439,
56-
surfaceArea: 83.703,
57-
volume: 763.59,
58-
gravity: 1.065,
59-
moons: 62,
60-
image: 'images/saturn.jpg'
61-
},
62-
{
63-
name: 'Uranus',
64-
orbit: 30688.5,
65-
day: -0.718,
66-
surfaceArea: 15.91,
67-
volume: 63.086,
68-
gravity: 0.886,
69-
moons: 27,
70-
image: 'images/uranus.jpg'
71-
},
72-
{
73-
name: 'Neptune',
74-
orbit: 60182,
75-
day: 0.671,
76-
surfaceArea: 14.98,
77-
volume: 57.74,
78-
gravity: 1.14,
79-
moons: 14,
80-
image: 'images/neptune.jpg'
81-
}
82-
];
1+
const PubSub = require('../helpers/pub_sub.js');
832

84-
module.exports = planets;
3+
const Planets = function () {
4+
this.planets = [
5+
{
6+
name: 'Mercury',
7+
orbit: 87.969,
8+
day: 58.646,
9+
surfaceArea: 0.147,
10+
volume: 0.056,
11+
gravity: 0.38,
12+
moons: 0,
13+
image: 'images/mercury.jpg'
14+
},
15+
{
16+
name: 'Venus',
17+
orbit: 224.701,
18+
day: -234.025,
19+
surfaceArea: 0.902,
20+
volume: 0.866,
21+
gravity: 0.904,
22+
moons: 0,
23+
image: 'images/venus.jpg'
24+
},
25+
{
26+
name: 'Earth',
27+
orbit: 365.256,
28+
day: 1,
29+
surfaceArea: 1,
30+
volume: 1,
31+
gravity: 1,
32+
moons: 1,
33+
image: 'images/earth.jpg'
34+
},
35+
{
36+
name: 'Mars',
37+
orbit: 686.971,
38+
day: 1.025,
39+
surfaceArea: 0.284,
40+
volume: 0.151,
41+
gravity: 0.376,
42+
moons: 2,
43+
image: 'images/mars.jpg'
44+
},
45+
{
46+
name: 'Jupiter',
47+
orbit: 4332.59,
48+
day: 0.413,
49+
surfaceArea: 121.9,
50+
volume: 1321,
51+
gravity: 2.528,
52+
moons: 69,
53+
image: 'images/jupiter.jpg'
54+
},
55+
{
56+
name: 'Saturn',
57+
orbit: 10759.22,
58+
day: 0.439,
59+
surfaceArea: 83.703,
60+
volume: 763.59,
61+
gravity: 1.065,
62+
moons: 62,
63+
image: 'images/saturn.jpg'
64+
},
65+
{
66+
name: 'Uranus',
67+
orbit: 30688.5,
68+
day: -0.718,
69+
surfaceArea: 15.91,
70+
volume: 63.086,
71+
gravity: 0.886,
72+
moons: 27,
73+
image: 'images/uranus.jpg'
74+
},
75+
{
76+
name: 'Neptune',
77+
orbit: 60182,
78+
day: 0.671,
79+
surfaceArea: 14.98,
80+
volume: 57.74,
81+
gravity: 1.14,
82+
moons: 14,
83+
image: 'images/neptune.jpg'
84+
}
85+
];
86+
};
87+
88+
Planets.prototype.bindEvents = function(){
89+
PubSub.publish('Planets:all-planets-ready', this.planets);
90+
PubSub.subscribe('ListView:clicked',(evt) => {
91+
const clickedIndex = evt.detail;
92+
this.publishplanetDetail(clickedIndex);
93+
});
94+
};
95+
96+
Planets.prototype.publishplanetDetail = function(planetIndex){
97+
const clickedPlanet = this.planets[planetIndex];
98+
PubSub.publish('Planets:clicked-planet-ready', clickedPlanet);
99+
};
100+
101+
102+
module.exports = Planets;

‎lab_pubsub_planets/lab_pubsub_planets_start/src/views/info_view.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const PubSub = require('../helpers/pub_sub.js');
2+
3+
const PlanetInfoView = function(container){
4+
this.container = container;
5+
};
6+
7+
PlanetInfoView.prototype.bindEvents = function(){
8+
PubSub.subscribe('Planets:clicked-planet-ready', (evt) => {
9+
const planet = evt.detail;
10+
this.render(planet);
11+
});
12+
};
13+
14+
15+
PlanetInfoView.prototype.render = function(planet){
16+
const infoList = document.createElement('li');
17+
infoList.textContent = ` ${planet.name},
18+
${planet.orbit},
19+
${planet.surfaceArea},
20+
${planet.volume},
21+
${planet.gravity},
22+
${planet.moons},
23+
${planet.image}
24+
`;
25+
this.container.innerHTML = '';
26+
this.container.appendChild(infoList);
27+
};
28+
29+
module.exports = PlanetInfoView;

‎lab_pubsub_planets/lab_pubsub_planets_start/src/views/list_view.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
11
const PubSub = require('../helpers/pub_sub.js');
22

3-
const ListView = function (element) {
4-
this.element = element;
3+
const ListView = function (elements) {
4+
this.elements = elements;
55
}
66

7+
ListView.prototype.bindEvents = function () {
8+
9+
this.elements.forEach((element) => {
10+
element.addEventListener('click', (evt) => {
11+
const clickedPlanet = evt.target.id;
12+
console.log(evt.target);
13+
PubSub.publish('ListView:clicked', clickedPlanet);
14+
});
15+
});
16+
};
717

818

919
module.exports = ListView;

‎node_modules/chart.js/.editorconfig‎

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎node_modules/chart.js/.eslintignore‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎node_modules/chart.js/.eslintrc.yml‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎node_modules/chart.js/.htmllintrc‎

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)