-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmap-filter-reduce.html
369 lines (349 loc) · 14.2 KB
/
map-filter-reduce.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Map, Filter, Reduce Mini-Exercises</title>
<style>
main {
text-align: center;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto;
}
p {
text-indent: 3em;
}
</style>
</head>
<body>
<main>
<h1>Functional Methods</h1>
<h2>The Exercises are in the JS file. (:</h2>
<section>
<p>Halvah muffin bear claw ice cream chocolate cake caramels toffee jujubes muffin. Sweet roll icing jelly-o
shortbread jelly beans oat cake marzipan donut. Biscuit dessert candy canes icing dessert caramels
apple pie. Cupcake marzipan icing pudding pastry marzipan candy canes lollipop cookie. Dessert tootsie
roll oat cake sesame snaps carrot cake. Candy canes tiramisu sesame snaps wafer jujubes marzipan.
Marshmallow soufflé jelly beans cake danish pudding. Fruitcake jujubes jelly jelly beans sugar plum carrot cake. Biscuit donut bear claw jelly-o ice cream macaroon jelly-o. Candy canes jujubes lollipop bear claw cheesecake gummi bears candy canes candy canes biscuit. Dragée macaroon liquorice pastry topping brownie. Cookie candy canes brownie pastry sweet roll cheesecake. Cupcake bear claw shortbread pastry pudding lollipop cookie.</p>
<p>Pudding jujubes lollipop jelly-o cake icing liquorice dessert macaroon. Bonbon bonbon jelly-o macaroon pie.
Chocolate bar sesame snaps donut tootsie roll brownie cotton candy candy canes shortbread. Cake
cotton candy apple pie pudding cotton candy croissant bonbon halvah. Sweet liquorice macaroon tiramisu
muffin donut sugar plum donut. Chupa chups sugar plum biscuit tootsie roll powder candy canes lollipop
topping ice cream. Wafer lollipop chupa chups candy oat cake jujubes shortbread lollipop icing. Soufflé
chocolate bar fruitcake cotton candy oat cake gummies marshmallow. Cheesecake croissant jelly carrot cake sugar plum jelly oat cake tootsie roll cake. Caramels bonbon tootsie roll bear claw candy. Marshmallow chocolate bar dragée icing sugar plum chupa chups dragée icing carrot cake. Danish toffee muffin marzipan dessert brownie cookie.</p>
<p>Cheesecake lollipop tiramisu jelly donut donut chupa chups oat cake. Tiramisu tiramisu lemon drops marshmallow cookie candy caramels danish. Tiramisu sesame snaps chupa chups fruitcake marzipan sweet macaroon bonbon. Cupcake tootsie roll biscuit sweet roll cookie cupcake. Jujubes liquorice danish wafer croissant jelly croissant toffee dessert. Lollipop cheesecake lemon drops croissant pastry sugar plum danish chupa chups tart. Icing cake gingerbread pie tart jelly-o sesame snaps. Liquorice soufflé carrot cake powder jelly beans icing wafer. Gingerbread gummi bears chocolate cake jujubes ice cream powder muffin cake. Sugar plum cheesecake sugar plum gummi bears gummi bears jelly beans jujubes icing. Topping sweet roll wafer sesame snaps chocolate bar gummi bears cake tart. Candy candy tart topping dessert.</p>
<p>Soufflé pastry cake sugar plum liquorice tart cheesecake pastry dessert. Tootsie roll cookie cheesecake
liquorice chocolate carrot cake. Dragée chocolate cake danish dragée jelly-o. Ice cream halvah icing
cheesecake dessert. Tart gummi bears jelly chocolate sweet gingerbread bear claw. Soufflé powder
marshmallow gingerbread gingerbread marshmallow marzipan donut. Soufflé sesame snaps croissant tootsie
roll pie pie sesame snaps lollipop chocolate. Sweet roll lollipop tootsie roll caramels gingerbread pie.
Carrot cake sweet roll tiramisu shortbread bear claw jelly tart. Cotton candy sesame snaps cake halvah pudding bear claw oat cake marshmallow macaroon. Bear claw dragée liquorice biscuit sweet roll tart. Muffin jelly tootsie roll powder pudding. Chupa chups gingerbread bear claw tiramisu croissant oat cake.</p>
<p>Sesame snaps cupcake icing dessert wafer donut gummi bears apple pie. Sweet roll dessert gummi bears
lollipop icing topping cupcake shortbread powder. Marshmallow brownie jelly beans lemon drops apple
pie ice cream. Danish macaroon bear claw lemon drops powder carrot cake jelly beans. Oat cake cotton
candy sweet carrot cake tootsie roll. Bonbon oat cake pie toffee carrot cake biscuit cake. Chocolate bar
dragée biscuit cotton candy croissant sugar plum jelly dessert. Wafer dragée topping chupa chups brownie
tootsie roll gummies cookie. Jujubes sesame snaps muffin brownie cake chocolate cake. Carrot cake cake pastry macaroon shortbread. Candy biscuit candy muffin candy canes. Sweet cookie jujubes ice cream halvah chupa chups cookie chupa chups lemon drops. Apple pie gummies cupcake apple pie liquorice.</p>
</section>
</main>
<!--EXERCISE ANSWERS ARE IN THE JS FILE-->
<script src="js/map-filter-reduce.js"></script>
<!--THESE ARE JUST THE NOTES-->
<section>
<script>
"use strict";
//Exercise.
// Use .filter to create an array of user objects where each user object has at least 3 languages in the languages array.
// Use .map to create an array of strings where each element is a user's email address
// Use .reduce to get the total years of experience from the list of users. Once you get the total of years you can use the result to calculate the average.
// Use .reduce to get the longest email from the list of users.
// Use .reduce to get the list of user's names in a single string. Example: Your instructors are: ryan, luis, zach, fernando, justin.
//notes/practice
// // Array of numbers someone likes for some reason
// const favoriteNumbers = [11, 17, 15, 12, 100, 7, 1, 3, 9, 50,52, 44, 13, 19];
//
// const myCats = ['Little One', "Mao Mao", "Lizzy"]
//
// const arrayOfTVShows = [
// {
// title: "The Office",
// seasons: 9,
// imdbScore: 9,
// firstEpisodeYear: 2005,
// characters: ["Micheal", "Pam", "Jim", "Andy"]
// },
// {
// title: "Game of Thrones",
// seasons: 8,
// imdbScore: 9.3,
// firstEpisodeYear: 2011,
// characters: ["Jon", "Arya", "Sansa", "Tyrion"]
// },
// {
// title: "The Good Place",
// seasons: 4,
// imdbScore: 8.2,
// firstEpisodeYear: 2016,
// characters: ["Janet", "Chidi", "Elenor", "Jason", "Tahani"]
// },
// {
// title: "Breaking Bad",
// seasons: 5,
// imdbScore: 9.5,
// firstEpisodeYear: 2008,
// characters: ["Walter", "Jesse", "Skylar"]
// },
// ]
//
// // MAP
//
// // // TODO: double each number in the favorite numbers array.
// //
// // const doubleNumbersArray = favoriteNumbers.map((number) => number*2);
// //
// // console.log("doubleNumbersArray:", doubleNumbersArray)
// // console.log("favoriteNumbers:", favoriteNumbers)
// //
// // const forEachExample = [];
// // favoriteNumbers.forEach((element) => {
// // forEachExample.push(element *2)
// // })
// //
// // console.log("forEachExample:", forEachExample)
// //
// // const uppercaseCats = myCats.map((element) => element.toUpperCase())
// //
// // console.log("uppercaseCats:", uppercaseCats)
// //
// //
// // const mapElementToLI = (element) => `<li>${element}</li>`
// //
// // const uppercaseCatsHTML = uppercaseCats.map(mapElementToLI)
// //
// // console.log("uppercaseCatsHTML:", uppercaseCatsHTML)
// //
// //
// // document.getElementById("myCats").innerHTML = uppercaseCatsHTML.join("")
// //
// // //TODO: create a headline that could be accessed later. using the title, seasons and imdbScore
// //
// // const mapHeadlineToArray = (show) => {
// // const { title, seasons, imdbScore } = show
// //
// // return {
// // ...show,
// // headline: `${title} (${seasons} seasons) has an average IMDB score of ${imdbScore}`
// // }
// // }
// // const headlineTVShows = arrayOfTVShows.map(mapHeadlineToArray);
// //
// // console.log("headlineTVShows:", headlineTVShows)
// //
//
// // TODO: Given the following array, complete the todos...
//
// const dogs = [
// {
// dogName: 'Bubbles',
// age: 10,
// isTrained: false
// },
// {
// dogName: 'Lexie',
// age: 3,
// isTrained: true
// },
// {
// dogName: 'Doggy',
// age: 5,
// isTrained: false
// },
// {
// dogName: 'Flopper',
// age: 3,
// isTrained: true
// },
// {
// dogName: 'Lexie',
// age: 1,
// isTrained: true
// },
// {
// dogName: 'Skip',
// age: 7,
// isTrained: true
// },
// {
// dogName: 'Blue',
// age: 4,
// isTrained: false
// }
// ];
//
//
// //-----------------
// // MAP
//
// // TODO 1: using map, create a new array of dog names from the dogs array
// console.log('Exercise 1:');
// const dogNameArray = dogs.map((element) => element.dogName);
// console.log('dogName:', dogNameArray);
//
// // TODO 2: using map, create a new array of dog ages from the dogs array
// console.log('Exercise 2:');
// const dogAgesArray = dogs.map((dogAges) => dogAges.age);
// console.log('ages:', dogAgesArray);
//
// // TODO 3: using map, create a new array of dog objects from the dogs array that only have dog names and age properties and values
// console.log('Exercise 3:');
// const getDogsNamesAndAges = ({dogName : name, age}) => {
// return {
// name, age
// }
// }
// const dogsNewArrayAgeandName = dogs.map(getDogsNamesAndAges);
// console.log("names and ages: ", dogsNewArrayAgeandName);
//
// // FILTER
//
// // TODO 4: using filter, create a new array containing only dogs younger than 10 years old
// console.log('Exercise 4:');
// const arrayOfdogsUnder10 = dogs.filter((anyparameternameheredogs) => anyparameternameheredogs.age < 10);
// console.log("youngDogs :", arrayOfdogsUnder10);
//
//
// // TODO 5: using filter, create a new array containing only dogs named 'Lexie'
// console.log('Exercise 5:');
// const onlyLexie = dogs.filter((goesthroughvalues) => goesthroughvalues.dogName == "Lexie");
// console.log("Name :", onlyLexie);
//
// // TODO 6: using filter, create a new array containing only dogs that are trained and younger than 10
// console.log('Exercise 6:');
// const trainedAndUnder10 = dogs.filter((goesthroughvalues) => goesthroughvalues.isTrained && goesthroughvalues.age
// < 10);
// console.log(trainedAndUnder10, "---");
//
// // REDUCE
//
// // TODO 7: using reduce, return a string containing all dog names together with no spaces ("BubblesLexieDoggy...")
// const justNamesReduced = dogs.reduce((prevVal, current) => prevVal+current.dogName,"");
// console.log(justNamesReduced);
//
// console.log('Exercise 7:');
//
// // TODO 8: using reduce, return the total of adding all dog ages together (18)
// console.log('Exercise 8:');
//
// // TODO 9: using reduce, return an array of dog objects with all isTrained properties set to true
// console.log('Exercise 9:');
//
//
// // EXTRA CHALLENGES
//
// // TODO 10: what is the average age of each dog?
// console.log('Exercise 10:');
//
// // TODO 11: what is the average age of dogs that are trained?
// console.log('Exercise 11:');
//
// // TODO 12: what is the average length of names of untrained dogs?
// console.log('Exercise 12:');
//
// // TODO 13: what are the combined ages of all dogs in dog years? (7x more than a human year)
// console.log('Exercise 13:');
//
// // TODO 14: create a string of the first letters of each dog name for dogs three years old (should be "LF")
// console.log('Exercise 14:');
//
//
//
// //
// // ////instructornotes
// // // MAP
// //
// // // TODO: double each number in the favorite numbers array.
// //
// // const doubleNumbersArray = favoriteNumbers.map((number) => number*2);
// //
// // console.log("doubleNumbersArray:", doubleNumbersArray)
// // console.log("favoriteNumbers:", favoriteNumbers)
// //
// // const forEachExample = [];
// // favoriteNumbers.forEach((element) => {
// // forEachExample.push(element *2)
// // })
// //
// // console.log("forEachExample:", forEachExample)
// //
// // const uppercaseCats = myCats.map((element) => element.toUpperCase())
// //
// // console.log("uppercaseCats:", uppercaseCats)
// //
// // // This is easily reusable in other map functions
// // const mapElementToLI = (element) => `<li>${element}</li>`
// //
// // const uppercaseCatsHTML = uppercaseCats.map(mapElementToLI)
// //
// // console.log("uppercaseCatsHTML:", uppercaseCatsHTML)
// //
// //
// // document.getElementById("myCats").innerHTML = uppercaseCatsHTML.join("")
// //
// // //TODO: create a headline that could be accessed later. using the title, seasons and imdbScore
// //
// // const mapHeadlineToArray = (show) => {
// // const { title, seasons, imdbScore } = show
// //
// // return {
// // ...show, // spread operator
// // headline: `${title} (${seasons} seasons) has an average IMDB score of ${imdbScore}`
// // }
// // }
// // const headlineTVShows = arrayOfTVShows.map(mapHeadlineToArray);
// //
// // console.log("headlineTVShows:", headlineTVShows)
// //
// //
// // // FILTER
// //
// // // TODO: Get only the odd numbers from the favorite numbers array
// //
// // const oddFavorites = favoriteNumbers.filter((number) => number % 2)
// //
// // console.log("oddFavorites:", oddFavorites)
// //
// // // TODO: From the cats array I want to only get the cats that have a name of 7 or
// // // less characters.
// //
// // const filterCatsUnder7Characters = (cat) => cat.length < 10
// //
// // const catsWithShortNames = myCats.filter(filterCatsUnder7Characters);
// //
// // console.log("catsWithShortNames:", catsWithShortNames)
// //
// // // TODO: Combine the tools!
// // // TODO: take the cats array that you returned from the filter above and map it to the page.
// //
// // const catsWithShortNamesHTML = myCats.filter(filterCatsUnder7Characters).map(mapElementToLI)
// //
// // console.log("catsWithShortNamesHTML:", catsWithShortNamesHTML)
// //
// // document.getElementById("shortNamesCats").innerHTML = catsWithShortNamesHTML.join("");
// //
// //
// // // TODO: Filter the movies array such that it would return items 9 or over on the
// // // imdb rating scale and the show is created after or equal to 2008
// //
// // const bestShow = arrayOfTVShows.filter((show) => show.imdbScore >= 9 && show.firstEpisodeYear >= 2008)
// //
// // console.log("bestShow:", bestShow)
// //
// //
// // // REDUCE
</script>
</section>
</body>
</html>