Skip to content

Commit 015c482

Browse files
queenalqueenal
committed
js-4
1 parent 26617c9 commit 015c482

2 files changed

Lines changed: 203 additions & 110 deletions

File tree

‎03 - CSS Variables/index-FINISHED.html‎

Lines changed: 71 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,81 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="UTF-8">
5-
<title>Scoped CSS Variables and JS</title>
5+
<meta charset="UTF-8">
6+
<title>Scoped CSS Variables and JS</title>
67
</head>
7-
<body>
8-
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
9-
10-
<div class="controls">
11-
<label for="spacing">Spacing:</label>
12-
<input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
13-
14-
<label for="blur">Blur:</label>
15-
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
16-
17-
<label for="base">Base Color</label>
18-
<input type="color" name="base" value="#ffc600">
19-
</div>
20-
21-
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
22-
23-
<style>
24-
:root {
25-
--base: #ffc600;
26-
--spacing: 10px;
27-
--blur: 10px;
28-
}
29-
30-
img {
31-
padding: var(--spacing);
32-
background: var(--base);
33-
filter: blur(var(--blur));
34-
}
35-
36-
.hl {
37-
color: var(--base);
38-
}
398

40-
/*
9+
<body>
10+
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
11+
12+
<div class="controls">
13+
<label for="spacing">Spacing:</label>
14+
<input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
15+
16+
<label for="blur">Blur:</label>
17+
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
18+
19+
<label for="base">Base Color</label>
20+
<input type="color" name="base" value="#ffc600">
21+
</div>
22+
23+
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
24+
25+
<style>
26+
:root {
27+
--base: #ffc600;
28+
--spacing: 10px;
29+
--blur: 10px;
30+
}
31+
32+
img {
33+
padding: var(--spacing);
34+
background: var(--base);
35+
filter: blur(var(--blur));
36+
}
37+
38+
.hl {
39+
color: var(--base);
40+
}
41+
/*
4142
misc styles, nothing to do with CSS variables
4243
*/
43-
44-
body {
45-
text-align: center;
46-
}
47-
48-
body {
49-
background: #193549;
50-
color: white;
51-
font-family: 'helvetica neue', sans-serif;
52-
font-weight: 100;
53-
font-size: 50px;
54-
}
55-
56-
.controls {
57-
margin-bottom: 50px;
58-
}
59-
60-
input {
61-
width:100px;
62-
}
63-
</style>
64-
65-
<script>
66-
const inputs = document.querySelectorAll('.controls input');
67-
68-
function handleUpdate() {
69-
const suffix = this.dataset.sizing || '';
70-
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
71-
}
72-
73-
inputs.forEach(input => input.addEventListener('change', handleUpdate));
74-
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
75-
</script>
44+
45+
body {
46+
text-align: center;
47+
}
48+
49+
body {
50+
background: #193549;
51+
color: white;
52+
font-family: 'helvetica neue', sans-serif;
53+
font-weight: 100;
54+
font-size: 50px;
55+
}
56+
57+
.controls {
58+
margin-bottom: 50px;
59+
}
60+
61+
input {
62+
width: 100px;
63+
}
64+
</style>
65+
66+
<script>
67+
const inputs = document.querySelectorAll('.controls input');
68+
69+
function handleUpdate() {
70+
const suffix = this.dataset.sizing || '';
71+
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
72+
}
73+
74+
inputs.forEach(input => input.addEventListener('change', handleUpdate));
75+
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
76+
</script>
7677

7778

7879
</body>
79-
</html>
80+
81+
</html>

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

Lines changed: 132 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,152 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="UTF-8">
5-
<title>Array Cardio 💪</title>
5+
<meta charset="UTF-8">
6+
<title>Array Cardio 💪</title>
67
</head>
8+
79
<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
10+
<p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
11+
<script>
12+
// Get your shorts on - this is an array workout!
13+
// ## Array Cardio Day 1
14+
15+
// Some data we can work with
1216

13-
// Some data we can work with
17+
const inventors = [{
18+
first: 'Albert',
19+
last: 'Einstein',
20+
year: 1879,
21+
passed: 1955
22+
}, {
23+
first: 'Isaac',
24+
last: 'Newton',
25+
year: 1643,
26+
passed: 1727
27+
}, {
28+
first: 'Galileo',
29+
last: 'Galilei',
30+
year: 1564,
31+
passed: 1642
32+
}, {
33+
first: 'Marie',
34+
last: 'Curie',
35+
year: 1867,
36+
passed: 1934
37+
}, {
38+
first: 'Johannes',
39+
last: 'Kepler',
40+
year: 1571,
41+
passed: 1630
42+
}, {
43+
first: 'Nicolaus',
44+
last: 'Copernicus',
45+
year: 1473,
46+
passed: 1543
47+
}, {
48+
first: 'Max',
49+
last: 'Planck',
50+
year: 1858,
51+
passed: 1947
52+
}, {
53+
first: 'Katherine',
54+
last: 'Blodgett',
55+
year: 1898,
56+
passed: 1979
57+
}, {
58+
first: 'Ada',
59+
last: 'Lovelace',
60+
year: 1815,
61+
passed: 1852
62+
}, {
63+
first: 'Sarah E.',
64+
last: 'Goode',
65+
year: 1855,
66+
passed: 1905
67+
}, {
68+
first: 'Lise',
69+
last: 'Meitner',
70+
year: 1878,
71+
passed: 1968
72+
}, {
73+
first: 'Hanna',
74+
last: 'Hammarström',
75+
year: 1829,
76+
passed: 1909
77+
}];
1478

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-
];
79+
// 1.筛选出出生在16世纪的科学家
2980

30-
const flavours = ['Chocolate Chip', 'Kulfi', 'Caramel Praline', 'Chocolate', 'Burnt Caramel', 'Pistachio', 'Rose', 'Sweet Coconut', 'Lemon Cookie', 'Toffeeness', 'Toasted Almond', 'Black Raspberry Crunch', 'Chocolate Brownies', 'Pistachio Almond', 'Strawberry', 'Lavender Honey', 'Lychee', 'Peach', 'Black Walnut', 'Birthday Cake', 'Mexican Chocolate', 'Mocha Almond Fudge', 'Raspberry'];
81+
const flavours = ['Chocolate Chip', 'Kulfi', 'Caramel Praline', 'Chocolate', 'Burnt Caramel', 'Pistachio', 'Rose', 'Sweet Coconut', 'Lemon Cookie', 'Toffeeness', 'Toasted Almond', 'Black Raspberry Crunch', 'Chocolate Brownies', 'Pistachio Almond', 'Strawberry', 'Lavender Honey', 'Lychee', 'Peach', 'Black Walnut', 'Birthday Cake', 'Mexican Chocolate', 'Mocha Almond Fudge', 'Raspberry'];
3182

32-
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'];
83+
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'];
3384

34-
// Array.prototype.filter()
35-
// 1. Filter the list of inventors for those who were born in the 1500's
85+
// Array.prototype.filter() 筛选出出生在16世纪的科学家
86+
// 1. Filter the list of inventors for those who were born in the 1500's
87+
const filterArray =
88+
inventors.filter(item => {
89+
if (item.year > 1500 && item.year < 1600) {
90+
return true
91+
} else {
92+
return false
93+
}
94+
})
95+
console.table(filterArray)
3696

37-
// Array.prototype.map()
38-
// 2. Give us an array of the inventors' first and last names
97+
// Array.prototype.map() 输入科学家的名字
98+
// 2. Give us an array of the inventors' first and last names
99+
const mapArray = inventors.map(item => item.first + ' ' + item.last)
100+
console.table(mapArray)
39101

40-
// Array.prototype.sort()
41-
// 3. Sort the inventors by birthdate, oldest to youngest
102+
// Array.prototype.sort()
103+
// 3. Sort the inventors by birthdate, oldest to youngest
104+
const ordered = inventors.sort((a, b) => {
105+
return a.year > b.year ? 1 : -1
106+
})
107+
console.table(ordered)
42108

43-
// Array.prototype.reduce()
44-
// 4. How many years did all the inventors live?
45109

46-
// 5. Sort the inventors by years lived
110+
// Array.prototype.reduce()
111+
// 4. How many years did all the inventors live?
47112

48-
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
49-
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
113+
// 5. Sort the inventors by years lived
50114

115+
const liveLonger = inventors.sort((a, b) => ((a.passed - a.year) > (b.passed - b.year)) ? 1 : -1)
116+
console.table(liveLonger)
51117

52-
// 7. sort Exercise
53-
// Sort the people alphabetically by last name
118+
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
119+
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
120+
// 筛选出含有'de'的标题
121+
// const category = document.querySelector('.mw-category')
122+
// const links = Array.from(category.querySelector('a'))
123+
// const de = links.map(item => item.textContent).filter(title => title.includes('de'))
54124

55-
// 8. Reduce Exercise
56-
// Sum up the instances of each of these
57-
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
58125

59-
</script>
126+
// 7. sort Exercise
127+
// Sort the people alphabetically by last name
128+
// const sortByLastName = inventors.sort((a, b) => a.last > b.last ? 1 : -1)
129+
// console.table(sortByLastName)
130+
const sortByLastName = people.sort((a, b) => {
131+
const [afirst, alast] = a.split(', ')
132+
const [bfirst, blast] = b.split(', ')
133+
console.log([afirst, alast])
134+
return alast > blast ? 1 : -1
135+
})
136+
console.table(sortByLastName)
137+
138+
139+
// 8. Reduce Exercise
140+
// Sum up the instances of each of these
141+
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck'];
142+
const static = data.reduce((obj, item) => {
143+
if (!obj[item]) {
144+
obj[item] = 0
145+
}
146+
obj[item]++;
147+
return obj
148+
}, {})
149+
</script>
60150
</body>
61-
</html>
151+
152+
</html>

0 commit comments

Comments
 (0)