Skip to content

Commit c635af0

Browse files
committed
1 parent 65f097d commit c635af0

File tree

2 files changed

+237
-0
lines changed

2 files changed

+237
-0
lines changed

04 - Array Cardio Day 1/index.html

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Array Cardio 💪</title>
6+
<script src="http://localhost:35729/livereload.js"></script>
7+
</head>
8+
<body>
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+
];
24+
25+
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'];
26+
27+
const people = ['Blake, William', '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'];
28+
29+
// Array.prototype.filter()
30+
// 1. Filter the list of inventors for those who were born in the 1500's
31+
const oldies = inventors.filter(elm => elm.year < 1600 && elm.year >= 1500);
32+
console.table(oldies);
33+
34+
// Array.prototype.map()
35+
// 2. Give us an array of the inventory first and last names
36+
const names = inventors.map(elm => elm.first + ' ' + elm.last);
37+
console.log(names);
38+
39+
// Array.prototype.sort()
40+
// 3. Sort the inventors by birthdate, oldest to youngest
41+
const sorted = inventors.sort((a, b) => a.year > b.year);
42+
console.table(sorted);
43+
44+
// Array.prototype.reduce()
45+
// 4. How many years did all the inventors live?
46+
const livespan = inventors.reduce((p, c) => p + (c.passed - c.year), 0);
47+
console.table(livespan)
48+
49+
// 5. Sort the inventors by years lived
50+
const sortedAlive = inventors
51+
.map(elm => Object.assign(elm, { livespan: elm.passed - elm.year }))
52+
.sort((a,b) => a.livespan < b.livespan);
53+
console.table(sortedAlive);
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+
// > should be run on the wikipedia console
58+
const blvds = Array.from(document.querySelectorAll('.mw-category a'))
59+
.map(elm => elm.textContent)
60+
.filter(elm => elm.indexOf('de') > -1);
61+
62+
// 7. sort Exercise
63+
// Sort the people alphabetically by last name
64+
const sortedLast = people.sort((a,b) => {
65+
const aLast = a.split(', ')[0];
66+
const bLast = b.split(', ')[0];
67+
return aLast > bLast ? 1 : -1;
68+
});
69+
console.table(sortedLast);
70+
71+
// 8. Reduce Exercise
72+
// Sum up the instances of each of these
73+
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
74+
const cnt = data.reduce((p, c) => {
75+
if (!p[c]) {
76+
p[c] = 0;
77+
}
78+
p[c]++;
79+
return p;
80+
}, {});
81+
console.table(cnt);
82+
</script>
83+
</body>
84+
</html>

05 - Flex Panel Gallery/index.html

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
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+
<script src="http://localhost:35729/livereload.js"></script>
8+
</head>
9+
<body>
10+
<style>
11+
html {
12+
box-sizing: border-box;
13+
background:#ffc600;
14+
font-family:'helvetica neue';
15+
font-size: 20px;
16+
font-weight: 200;
17+
}
18+
body {
19+
margin: 0;
20+
}
21+
*, *:before, *:after {
22+
box-sizing: inherit;
23+
}
24+
25+
.panels {
26+
min-height:100vh;
27+
overflow: hidden;
28+
display: flex;
29+
}
30+
31+
.panel {
32+
background:#6B0F9C;
33+
box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
34+
color:white;
35+
text-align: center;
36+
align-items:center;
37+
/* Safari transitionend event.propertyName === flex */
38+
/* Chrome + FF transitionend event.propertyName === flex-grow */
39+
transition:
40+
font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
41+
flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
42+
background 0.2s;
43+
font-size: 20px;
44+
background-size:cover;
45+
background-position:center;
46+
flex: 1;
47+
justify-content: center;
48+
align-items: center;
49+
display: flex;
50+
flex-direction: column;
51+
}
52+
53+
54+
.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
55+
.panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); }
56+
.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); }
57+
.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
58+
.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
59+
60+
.panel > * {
61+
margin:0;
62+
width: 100%;
63+
transition:transform 0.5s;
64+
border: 1px solid red;
65+
flex: 1 0 auto;
66+
display: flex;
67+
justify-content: center;
68+
align-items: center;
69+
}
70+
71+
.panel > *:first-child {
72+
transform: translateY(-100%);
73+
}
74+
.panel.open-active > *:first-child {
75+
transform: translateY(0%);
76+
}
77+
78+
.panel > *:last-child {
79+
transform: translateY(100%);
80+
}
81+
.panel.open-active > *:last-child {
82+
transform: translateY(0%);
83+
}
84+
85+
.panel p {
86+
text-transform: uppercase;
87+
font-family: 'Amatic SC', cursive;
88+
text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
89+
font-size: 2em;
90+
}
91+
.panel p:nth-child(2) {
92+
font-size: 4em;
93+
}
94+
95+
.panel.open {
96+
flex: 5;
97+
font-size:40px;
98+
}
99+
100+
.cta {
101+
color:white;
102+
text-decoration: none;
103+
}
104+
105+
</style>
106+
107+
108+
<div class="panels">
109+
<div class="panel panel1">
110+
<p>Hey</p>
111+
<p>Let's</p>
112+
<p>Dance</p>
113+
</div>
114+
<div class="panel panel2">
115+
<p>Give</p>
116+
<p>Take</p>
117+
<p>Receive</p>
118+
</div>
119+
<div class="panel panel3">
120+
<p>Experience</p>
121+
<p>It</p>
122+
<p>Today</p>
123+
</div>
124+
<div class="panel panel4">
125+
<p>Give</p>
126+
<p>All</p>
127+
<p>You can</p>
128+
</div>
129+
<div class="panel panel5">
130+
<p>Life</p>
131+
<p>In</p>
132+
<p>Motion</p>
133+
</div>
134+
</div>
135+
136+
<script>
137+
const panels = document.querySelectorAll('.panel');
138+
function toggleOpen() {
139+
this.classList.toggle('open');
140+
}
141+
function toggleActive(e) {
142+
if (!e.propertyName.includes('flex-grow')) return;
143+
console.log(e.propertyName);
144+
this.classList.toggle('open-active');
145+
}
146+
panels.forEach(elm => elm.addEventListener('click', toggleOpen));
147+
panels.forEach(elm => elm.addEventListener('transitionend', toggleActive));
148+
</script>
149+
150+
151+
152+
</body>
153+
</html>

0 commit comments

Comments
 (0)