Skip to content

Commit 80fefeb

Browse files
authored
Merge pull request #25 from lizwang50/Debby/day-4-Array-Day-1
Debby/day 4 array day 1
2 parents 0cef50c + 1d43a2b commit 80fefeb

File tree

3 files changed

+136
-1
lines changed

3 files changed

+136
-1
lines changed
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Array Cardio Day-1 💪</title>
6+
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@400&display=swap" rel="stylesheet">
7+
<style type="text/css">
8+
body {
9+
font-family: 'Heebo', sans-serif;
10+
background-color: #FDFEFE;
11+
color: #2C3E50;
12+
padding: 30px;
13+
}
14+
a {
15+
/*border: 1px solid;*/
16+
padding: 3px 10px;
17+
border-radius: 5px;
18+
background-color: #EAF2F8;
19+
color: #5DADE2;
20+
text-decoration: none;
21+
transition: 0.2s;
22+
margin-left: 10px;
23+
}
24+
a:hover {
25+
background-color: #D4E6F1;
26+
}
27+
a:active {
28+
box-shadow: 0px 0px 0px 1px #5dade2, 0px 0px 0px 3px #5dade273;
29+
}
30+
</style>
31+
</head>
32+
<body>
33+
<p style="margin-bottom: 30px;"><em>Psst: have a look at the JavaScript Console</em> 💁</p>
34+
<p>📒 Note 👉 <a href="https://paper.dropbox.com/doc/JS-30-Day-4-Array-Cardio-Day-1--Ays93Izif7InaHjYrYSaM658AQ-jt534w3ErxqqVQi1fegH6" target="_blank">click me</a></p>
35+
36+
<p style="margin-top: 20px;">📌 Want to 👉<a href="https://lizwang50.github.io/JavaScript-30weeks/">Back home</a></p>
37+
38+
<script type="text/javascript" src="all.js"></script>
39+
</body>
40+
</html>

Debby/Day-4-Array_Day_1/all.js

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
// Get your shorts on - this is an array workout!
2+
// ## Array Cardio Day 1
3+
4+
// Some data we can work with
5+
const inventors = [
6+
{ first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
7+
{ first: 'Isaac', last: 'Newton', year: 1543, passed: 1727 },
8+
{ first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
9+
{ first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
10+
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
11+
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
12+
{ first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
13+
{ first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
14+
{ first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
15+
{ first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
16+
{ first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
17+
{ first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
18+
];
19+
20+
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'];
21+
22+
// Array.prototype.filter()
23+
// 1. Filter the list of inventors for those who were born in the 1500's
24+
const fifteen = inventors.filter(a => (a.year >= 1500 && a.year < 1600));
25+
console.table(fifteen);
26+
27+
// Array.prototype.map()
28+
// 2. Give us an array of the inventors first and last names
29+
const fullName = inventors.map((inventor => `捐贈者:${inventor.first} ${inventor.last}` ));
30+
console.log(fullName);
31+
32+
// Array.prototype.sort()
33+
// 3. Sort the inventors by birthdate, oldest to youngest
34+
const birthdate = inventors.sort((a,b) => (b.year - a.year));
35+
console.table(birthdate);
36+
37+
38+
// Array.prototype.reduce()
39+
// 4. How many years did all the inventors live all together?
40+
const totalYear = inventors.reduce((total,inventor) => (total + (inventor.passed - inventor.year)),0);
41+
console.log(totalYear);
42+
43+
// 5. Sort the inventors by years lived
44+
const yearList = inventors.sort(function(a,b){
45+
const prevInventor = a.passed - a.year;
46+
const nextInventor = b.passed - b.year;
47+
return prevInventor - nextInventor;
48+
});
49+
console.table(yearList);
50+
51+
// 列出所有歲數
52+
const newYearList = yearList.map( inventor => inventor.passed - inventor.year);
53+
console.table(newYearList);
54+
55+
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
56+
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
57+
58+
const category = document.querySelector('.mw-category');
59+
const links = Array.from(category.querySelectorAll('a'));
60+
const de = links
61+
.map(link => link.textContent)
62+
.filter(streetName => streetName.includes('de'));
63+
console.log(de);
64+
65+
// 7. sort Exercise
66+
// Sort the "people" alphabetically by last name
67+
const lastNameList = people.sort(function(lastOne,nextOne){
68+
const [aLast, aFirst] = lastOne.split(', ');
69+
const [bLast, bFirst] = nextOne.split(', ');
70+
return aLast > bLast ? 1 : -1;
71+
});
72+
console.table(lastNameList);
73+
74+
// 8. Reduce Exercise
75+
// Sum up the instances of each of these
76+
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
77+
78+
const transportation = data.reduce(function(obj,item){
79+
// if there is no object item, then object item is equal(等於) to zero.
80+
// console.log(item);
81+
if(!obj[item]){
82+
obj[item] = 0;
83+
}
84+
obj[item]++;
85+
return obj;
86+
},{});
87+
88+
console.log(transportation);
89+
90+

index.html

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,12 @@ <h1>JavaScript 30 Challenge</h1>
2626
<a class="nav-link hover-border" href="./Etrex/Day3 - CSS variable/index.html">卡米 der 怕爆</a>
2727
<a class="nav-link hover-border" href="./Cindy/Day3 - CSS variable/index.html">Cindy der 小雞</a>
2828
<a class="nav-link hover-border" href="./Debby/Day-3-CSS_Variables/index.html">Debby der Day3</a>
29-
<a class="nav-link hover-border" href="./Liz/Day3 - CSS Variables/index.html">Liz der Day3</a>
29+
<a class="nav-link hover-border" href="./Liz/Day3 - CSS Variables/index.html">Liz der Day3</a>
30+
</nav>
31+
</div>
32+
<div class="content-border d-flex justify-content-center">
33+
<nav class="nav flex-column my-4">
34+
<a class="nav-link hover-border" href="./Debby/Day-4-Array_Day_1/Array_Cardio_Day_1.html">Debby der Day 4 - Array</a>
3035
</nav>
3136
</div>
3237
</div>

0 commit comments

Comments
 (0)