Skip to content

Commit 1f0db3d

Browse files
mykeelsmykeels
committed
Initial dist subtree commit
1 parent cf50156 commit 1f0db3d

15 files changed

Lines changed: 689 additions & 0 deletions

‎dist/array-cardio-1.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
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+
console.log("Filter the list of inventors for those who were born in the 1500's", inventors.filter(function (inventor) {
35+
return inventor.year >= 1500 && inventor.year < 1600;
36+
}));
37+
38+
// Array.prototype.map()
39+
// 2. Give us an array of the inventors' first and last names
40+
console.log("Give us an array of the inventors' first and last names", inventors.map(function (inventor) {
41+
return inventor.first + ' ' + inventor.last;
42+
}));
43+
44+
// Array.prototype.sort()
45+
// 3. Sort the inventors by birthdate, oldest to youngest
46+
const orderedInventors = inventors.sort((a, b) => a.year - b.year);
47+
console.log("Sort the inventors by birthdate, oldest to youngest", JSON.parse(JSON.stringify(orderedInventors))); //tried to make a clone so, the logged value does not change through referencing
48+
49+
// Array.prototype.reduce()
50+
// 4. How many years did all the inventors live?
51+
console.log("How many years did all the inventors live?", inventors.reduce(function (inventorA, inventorB) {
52+
return (!Number.isInteger(inventorA) ? (inventorA.passed - inventorA.year) : inventorA) + (inventorB.passed - inventorB.year);
53+
}));
54+
55+
// 5. Sort the inventors by years lived
56+
57+
console.log(inventors.sort(function (inventorA, inventorB) {
58+
inventorA.livedFor = (inventorA.passed - inventorA.year);
59+
inventorB.livedFor = (inventorB.passed - inventorB.year);
60+
return inventorA.livedFor - inventorB.livedFor;
61+
}));
62+
63+
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
64+
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
65+
66+
67+
// 7. sort Exercise
68+
// Sort the people alphabetically by last name
69+
console.log("Sort the people alphabetically by last name", people.sort(function (a, b) {
70+
return a.split(', ')[0] > b.split(', ')[0] ? 1 : -1;
71+
}));
72+
73+
// 8. Reduce Exercise
74+
// Sum up the instances of each of these
75+
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
76+
console.log("Sum up the instances of each of these", data, data.reduce(function (obj, item) {
77+
obj[item] = obj[item] || 0;
78+
obj[item]++;
79+
return obj;
80+
}, {}));
81+
</script>
82+
</body>
83+
</html>

‎dist/boom.wav‎

130 KB
Binary file not shown.

‎dist/clap.wav‎

63.4 KB
Binary file not shown.

‎dist/css-variables.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="2" 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+
/*
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+
var inputElems = document.querySelectorAll(".controls input");
67+
68+
function handleUpdate() {
69+
this.suffix = this.suffix || this.dataset.sizing || '';
70+
document.documentElement.style.setProperty(`--${this.name}`, this.value + this.suffix);
71+
}
72+
73+
inputElems.forEach(input => input.addEventListener("change", handleUpdate));
74+
inputElems.forEach(input => input.addEventListener('mousemove', handleUpdate));
75+
</script>
76+
77+
</body>
78+
</html>

‎dist/flex-panel-gallery.html‎

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

‎dist/hihat.wav‎

50.9 KB
Binary file not shown.

0 commit comments

Comments
 (0)