Skip to content

Commit f54deb9

Browse files
ClJarvisClJarvis
committed
chap 3
1 parent 54a9eb2 commit f54deb9

File tree

4 files changed

+324
-0
lines changed

4 files changed

+324
-0
lines changed

‎03CSSVariables/index-FINISHED.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Scoped CSS Variables and JS</title>
6+
</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+
}
39+
40+
/*
41+
misc styles, nothing to do with CSS variables
42+
*/
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>
76+
77+
78+
</body>
79+
</html>

‎03CSSVariables/index-START.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Scoped CSS Variables and JS</title>
6+
</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+
.h1 {
37+
color: var(--base);
38+
}
39+
/*
40+
misc styles, nothing to do with CSS variables
41+
*/
42+
43+
body {
44+
text-align: center;
45+
}
46+
47+
body {
48+
background: #193549;
49+
color: white;
50+
font-family: 'helvetica neue', sans-serif;
51+
font-weight: 100;
52+
font-size: 50px;
53+
}
54+
55+
.controls {
56+
margin-bottom: 50px;
57+
}
58+
59+
input {
60+
width:100px;
61+
}
62+
</style>
63+
64+
<script>
65+
const inputs = document.querySelectorAll('.controls input');
66+
67+
function handleUpdate() {
68+
const suffix = this.dataset.sizing || '';
69+
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
70+
console.log(suffix);
71+
}
72+
73+
inputs.forEach(input => input.addEventListener('change', handleUpdate));
74+
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
75+
</script>
76+
77+
</body>
78+
</html>

‎04ArrayDay1/index-FINISHED.html‎

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 [aFirst, aLast] = lastOne.split(', ');
85+
const [bFirst, bLast] = 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>

‎04ArrayDay1/index-START.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
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 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'];
31+
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'];
33+
34+
// Array.prototype.filter()
35+
// 1. Filter the list of inventors for those who were born in the 1500's
36+
37+
// Array.prototype.map()
38+
// 2. Give us an array of the inventors' first and last names
39+
40+
// Array.prototype.sort()
41+
// 3. Sort the inventors by birthdate, oldest to youngest
42+
43+
// Array.prototype.reduce()
44+
// 4. How many years did all the inventors live?
45+
46+
// 5. Sort the inventors by years lived
47+
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
50+
51+
52+
// 7. sort Exercise
53+
// Sort the people alphabetically by last name
54+
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' ];
58+
59+
</script>
60+
</body>
61+
</html>

0 commit comments

Comments
 (0)