Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7a41118

Browse files
add task05 and update the answer of task 04
1 parent b83f420 commit 7a41118

File tree

2 files changed

+217
-0
lines changed

2 files changed

+217
-0
lines changed
Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Array Cardio 💪</title>
6+
</head>
7+
<body>
8+
<p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
9+
<script>
10+
// Get your shorts on - this is an array workout!
11+
// ## Array Cardio Day 1
12+
13+
// Some data we can work with
14+
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+
];
29+
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
34+
const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));
35+
36+
console.table(fifteen);
37+
38+
// Array.prototype.map()
39+
// 2. Give us an array of the inventor first and last names
40+
const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
41+
console.log(fullNames);
42+
43+
// Array.prototype.sort()
44+
// 3. Sort the inventors by birthdate, oldest to youngest
45+
// const ordered = inventors.sort(function(a, b) {
46+
// if(a.year > b.year) {
47+
// return 1;
48+
// } else {
49+
// return -1;
50+
// }
51+
// });
52+
53+
const ordered = inventors.sort((a, b) => a.year > b.year ? 1 : -1);
54+
console.table(ordered);
55+
56+
// Array.prototype.reduce()
57+
// 4. How many years did all the inventors live?
58+
const totalYears = inventors.reduce((total, inventor) => {
59+
return total + (inventor.passed - inventor.year);
60+
}, 0);
61+
62+
console.log(totalYears);
63+
64+
// 5. Sort the inventors by years lived
65+
const oldest = inventors.sort(function(a, b) {
66+
const lastInventor = a.passed - a.year;
67+
const nextInventor = b.passed - b.year;
68+
return lastInventor > nextInventor ? -1 : 1;
69+
});
70+
console.table(oldest);
71+
72+
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
73+
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
74+
75+
// const category = document.querySelector('.mw-category');
76+
// const links = Array.from(category.querySelectorAll('a'));
77+
// const de = links
78+
// .map(link => link.textContent)
79+
// .filter(streetName => streetName.includes('de'));
80+
81+
// 7. sort Exercise
82+
// Sort the people alphabetically by last name
83+
const alpha = people.sort((lastOne, nextOne) => {
84+
const [aLast, aFirst] = lastOne.split(', ');
85+
const [bLast, bFirst] = nextOne.split(', ');
86+
return aLast > bLast ? 1 : -1;
87+
});
88+
console.log(alpha);
89+
90+
// 8. Reduce Exercise
91+
// Sum up the instances of each of these
92+
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'pogostick'];
93+
94+
const transportation = data.reduce(function(obj, item) {
95+
if (!obj[item]) {
96+
obj[item] = 0;
97+
}
98+
obj[item]++;
99+
return obj;
100+
}, {});
101+
102+
console.log(transportation);
103+
104+
</script>
105+
</body>
106+
</html>
Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Flex Panels 💪</title>
6+
<link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
7+
</head>
8+
<body>
9+
<style>
10+
html {
11+
box-sizing: border-box;
12+
background:#ffc600;
13+
font-family:'helvetica neue';
14+
font-size: 20px;
15+
font-weight: 200;
16+
}
17+
body {
18+
margin: 0;
19+
}
20+
*, *:before, *:after {
21+
box-sizing: inherit;
22+
}
23+
24+
.panels {
25+
min-height:100vh;
26+
overflow: hidden;
27+
}
28+
29+
.panel {
30+
background:#6B0F9C;
31+
box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
32+
color:white;
33+
text-align: center;
34+
align-items:center;
35+
/* Safari transitionend event.propertyName === flex */
36+
/* Chrome + FF transitionend event.propertyName === flex-grow */
37+
transition:
38+
font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
39+
flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
40+
background 0.2s;
41+
font-size: 20px;
42+
background-size:cover;
43+
background-position:center;
44+
}
45+
46+
47+
.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
48+
.panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); }
49+
.panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
50+
.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
51+
.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
52+
53+
.panel > * {
54+
margin:0;
55+
width: 100%;
56+
transition:transform 0.5s;
57+
}
58+
59+
.panel p {
60+
text-transform: uppercase;
61+
font-family: 'Amatic SC', cursive;
62+
text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
63+
font-size: 2em;
64+
}
65+
.panel p:nth-child(2) {
66+
font-size: 4em;
67+
}
68+
69+
.panel.open {
70+
font-size:40px;
71+
}
72+
73+
</style>
74+
75+
76+
<div class="panels">
77+
<div class="panel panel1">
78+
<p>Hey</p>
79+
<p>Let's</p>
80+
<p>Dance</p>
81+
</div>
82+
<div class="panel panel2">
83+
<p>Give</p>
84+
<p>Take</p>
85+
<p>Receive</p>
86+
</div>
87+
<div class="panel panel3">
88+
<p>Experience</p>
89+
<p>It</p>
90+
<p>Today</p>
91+
</div>
92+
<div class="panel panel4">
93+
<p>Give</p>
94+
<p>All</p>
95+
<p>You can</p>
96+
</div>
97+
<div class="panel panel5">
98+
<p>Life</p>
99+
<p>In</p>
100+
<p>Motion</p>
101+
</div>
102+
</div>
103+
104+
<script>
105+
106+
</script>
107+
108+
109+
110+
</body>
111+
</html>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /