Visitar URL original
Completed #4 and added to README · abazilla/JavaScript30@2c6fb16 · GitHub
Skip to content

Commit 2c6fb16

Browse files
abazillaabazilla
committed
Completed wesbos#4 and added to README
1 parent 4cc61a2 commit 2c6fb16

2 files changed

Lines changed: 137 additions & 34 deletions

File tree

‎04 - Array Cardio Day 1/index-START.html‎

Lines changed: 133 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -7,52 +7,151 @@
77
<body>
88
<p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
99
<script>
10-
// Get your shorts on - this is an array workout!
11-
// ## Array Cardio Day 1
10+
// Get your shorts on - this is an array workout!
11+
// ## Array Cardio Day 1
1212

13-
// Some data we can work with
13+
// Some data we can work with
1414

15-
const inventors = [
16-
{ first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
17-
{ first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
18-
{ first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
19-
{ first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
20-
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
21-
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
22-
{ first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
23-
{ first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
24-
{ first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
25-
{ first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
26-
{ first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
27-
{ first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
28-
];
15+
const inventors = [
16+
{ first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
17+
{ first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
18+
{ first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
19+
{ first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
20+
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
21+
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
22+
{ first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
23+
{ first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
24+
{ first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
25+
{ first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
26+
{ first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
27+
{ first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
28+
];
2929

30-
const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
30+
const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
31+
// *******************************************************************************************************
32+
// Array.prototype.filter()
33+
// 1. Filter the list of inventors for those who were born in the 1500's
3134

32-
// Array.prototype.filter()
33-
// 1. Filter the list of inventors for those who were born in the 1500's
35+
// The below two functions do the same thing.
36+
const fifteen = inventors.filter(function(inventor) {
37+
if (inventor.year >= 1500 && inventor.year <= 1599) {
38+
return true;
39+
}
40+
});
41+
console.table(fifteen);
3442

35-
// Array.prototype.map()
36-
// 2. Give us an array of the inventors' first and last names
43+
// This is called an arrow function
44+
const fifteen2 = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year <= 1599));
45+
console.table(fifteen2);
46+
// *******************************************************************************************************
47+
// Array.prototype.map()
48+
// 2. Give us an array of the inventors' first and last names
3749

38-
// Array.prototype.sort()
39-
// 3. Sort the inventors by birthdate, oldest to youngest
50+
// The below two functions do the same thing
51+
const firstAndLast = inventors.map(function(inventor) {
52+
// You can do the below instead of concatenating a ' '
53+
return `${inventor.first} ${inventor.last}`;
54+
});
55+
console.log(firstAndLast);
4056

41-
// Array.prototype.reduce()
42-
// 4. How many years did all the inventors live?
57+
const firstAndLast2 = inventors.map(inventor => `${inventor.first} ${inventor.last}`)
58+
console.log(firstAndLast2);
59+
// *******************************************************************************************************
60+
// Array.prototype.sort()
61+
// 3. Sort the inventors by birthdate, oldest to youngest
62+
console.table(inventors);
63+
// The below 3 functions result in the same answer.
64+
// The first 2 are my answers, the third being the answer given. I googled how to compare values in a sort in JS, which gave me this answer. Don't quite understand how it works though
65+
const sorted = inventors.sort(function(a, b) {
66+
return a.year - b.year;
67+
});
68+
console.table(sorted);
4369

44-
// 5. Sort the inventors by years lived
70+
const sorted2 = inventors.sort((a, b) => a.year - b.year);
71+
console.table(sorted2);
4572

46-
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
47-
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
73+
const sorted3 = inventors.sort((a, b) => a.year > b.year ? 1 : -1);
74+
console.table(sorted3);
4875

76+
// *******************************************************************************************************
77+
// Array.prototype.reduce()
78+
// 4. How many years did all the inventors live?
79+
// All does the same thing. My way makes a new array using the map function with all the years lived, and then reduces it by adding it all.
80+
const years = inventors.map(inventor => inventor.passed - inventor.year);
81+
console.log(years);
4982

50-
// 7. sort Exercise
51-
// Sort the people alphabetically by last name
83+
const sum = years.reduce((a, b) => a + b);
84+
console.log(sum);
5285

53-
// 8. Reduce Exercise
54-
// Sum up the instances of each of these
55-
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
86+
const sum2 = inventors.map(inventor => inventor.passed - inventor.year).reduce((a, b) => a + b);
87+
console.log(sum2);
88+
89+
const sum3 = inventors.reduce((total, inventor) => {
90+
return total + (inventor.passed - inventor.year);
91+
}, 0);
92+
console.log(sum3);
93+
// *******************************************************************************************************
94+
95+
// 5. Sort the inventors by years lived
96+
//TODO Don't fully understand how this works; i can't quite visualize how this gets sorted in my mind.
97+
const yearsLived = inventors.sort(function(a, b) {
98+
const firstPerson = a.passed - a.year;
99+
const secondPerson = b.passed - b.year;
100+
return firstPerson > secondPerson ? -1 : 1;
101+
});
102+
console.table(yearsLived);
103+
104+
// *******************************************************************************************************
105+
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
106+
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
107+
108+
//could do the below two all in one line
109+
// const group = document.querySelector('.mw-category');
110+
// const links = Array.from(group.querySelectorAll('a'));
111+
//
112+
// //The things in the brackets are arrow functions - refer to above.
113+
// const de = links.map(link => link.textContent).filter(streetName => streetName.includes('de'));
114+
115+
116+
// *******************************************************************************************************
117+
// 7. sort Exercise
118+
// Sort the people alphabetically by last name
119+
120+
//Super hard to understand these sorts.
121+
const alpha = people.sort((lastOne, nextOne) => {
122+
const [aLast, aFirst] = lastOne.split(', ');
123+
const [bLast, bFirst] = nextOne.split(', ');
124+
// console.log(aLast + ' ' + bLast)
125+
return aLast > bLast ? 1 : -1;
126+
});
127+
console.log(alpha);
128+
129+
// *******************************************************************************************************
130+
// 8. Reduce Exercise
131+
// Sum up the instances of each of these
132+
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
133+
134+
// This is the one i followed on themozilla website. seems to make more sense, since you don't have to make an entry for an item with 0 as the count, as there is always 1 count if it exists in the array.. unless i am understanding it incorrectly.
135+
//TODO Still don't quite understand the object bit "{}" at the end there.. but it doesn't work without it.
136+
var count = data.reduce(function(allVehicle, vehicle) {
137+
if(vehicle in allVehicle) {
138+
allVehicle[vehicle]++;
139+
} else {
140+
allVehicle[vehicle] = 1;
141+
}
142+
return allVehicle;
143+
}, {});
144+
console.log(count)
145+
146+
//answer that guy gave.
147+
const transportation = data.reduce(function(obj, item) {
148+
if (!obj[item]) {
149+
obj[item] = 0;
150+
}
151+
obj[item]++;
152+
return obj;
153+
}, {});
154+
console.log(transportation);
56155

57156
</script>
58157
</body>

‎readme.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,7 @@ I think I understand what " ``` `` ``` " lets you do - it allows you to embad JS
2121
Cool to know that CSS has the ability to use variables (and can be manipulatied by JS). Datasets are looking more and more useful to use too.
2222

2323
*** Extra: *** Added another variable to change the rotation of the image, to help further my understanding of how this works.
24+
25+
### 4. Array Cardio Day
26+
27+
This one was quite difficult - a lot of new things learnt, from arrow functions to lots of different array methods. I've added to do lists so that I can refer to my teacher for further explanation when I am at school. * Hint: use a todo searcher to search through your open project to find the things you need to re-learn *

0 commit comments

Comments
 (0)