Skip to content

Commit 10a3829

Browse files
NickKuepNickKuep
committed
complete activity
1 parent 30a4137 commit 10a3829

3 files changed

Lines changed: 270 additions & 152 deletions

File tree

‎01 - JavaScript Drum Kit/index-START.html‎

Lines changed: 72 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,79 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>JS Drum Kit</title>
6-
<link rel="stylesheet" href="style.css">
7-
</head>
8-
<body>
9-
10-
11-
<div class="keys">
12-
<div data-key="65" class="key">
13-
<kbd>A</kbd>
14-
<span class="sound">clap</span>
15-
</div>
16-
<div data-key="83" class="key">
17-
<kbd>S</kbd>
18-
<span class="sound">hihat</span>
19-
</div>
20-
<div data-key="68" class="key">
21-
<kbd>D</kbd>
22-
<span class="sound">kick</span>
23-
</div>
24-
<div data-key="70" class="key">
25-
<kbd>F</kbd>
26-
<span class="sound">openhat</span>
27-
</div>
28-
<div data-key="71" class="key">
29-
<kbd>G</kbd>
30-
<span class="sound">boom</span>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>JS Drum Kit</title>
6+
<link rel="stylesheet" href="style.css" />
7+
</head>
8+
<body>
9+
<div class="keys">
10+
<div data-key="65" class="key">
11+
<kbd>A</kbd>
12+
<span class="sound">clap</span>
13+
</div>
14+
<div data-key="83" class="key">
15+
<kbd>S</kbd>
16+
<span class="sound">hihat</span>
17+
</div>
18+
<div data-key="68" class="key">
19+
<kbd>D</kbd>
20+
<span class="sound">kick</span>
21+
</div>
22+
<div data-key="70" class="key">
23+
<kbd>F</kbd>
24+
<span class="sound">openhat</span>
25+
</div>
26+
<div data-key="71" class="key">
27+
<kbd>G</kbd>
28+
<span class="sound">boom</span>
29+
</div>
30+
<div data-key="72" class="key">
31+
<kbd>H</kbd>
32+
<span class="sound">ride</span>
33+
</div>
34+
<div data-key="74" class="key">
35+
<kbd>J</kbd>
36+
<span class="sound">snare</span>
37+
</div>
38+
<div data-key="75" class="key">
39+
<kbd>K</kbd>
40+
<span class="sound">tom</span>
41+
</div>
42+
<div data-key="76" class="key">
43+
<kbd>L</kbd>
44+
<span class="sound">tink</span>
45+
</div>
3146
</div>
32-
<div data-key="72" class="key">
33-
<kbd>H</kbd>
34-
<span class="sound">ride</span>
35-
</div>
36-
<div data-key="74" class="key">
37-
<kbd>J</kbd>
38-
<span class="sound">snare</span>
39-
</div>
40-
<div data-key="75" class="key">
41-
<kbd>K</kbd>
42-
<span class="sound">tom</span>
43-
</div>
44-
<div data-key="76" class="key">
45-
<kbd>L</kbd>
46-
<span class="sound">tink</span>
47-
</div>
48-
</div>
49-
50-
<audio data-key="65" src="sounds/clap.wav"></audio>
51-
<audio data-key="83" src="sounds/hihat.wav"></audio>
52-
<audio data-key="68" src="sounds/kick.wav"></audio>
53-
<audio data-key="70" src="sounds/openhat.wav"></audio>
54-
<audio data-key="71" src="sounds/boom.wav"></audio>
55-
<audio data-key="72" src="sounds/ride.wav"></audio>
56-
<audio data-key="74" src="sounds/snare.wav"></audio>
57-
<audio data-key="75" src="sounds/tom.wav"></audio>
58-
<audio data-key="76" src="sounds/tink.wav"></audio>
59-
60-
<script>
6147

62-
</script>
48+
<audio data-key="65" src="sounds/clap.wav"></audio>
49+
<audio data-key="83" src="sounds/hihat.wav"></audio>
50+
<audio data-key="68" src="sounds/kick.wav"></audio>
51+
<audio data-key="70" src="sounds/openhat.wav"></audio>
52+
<audio data-key="71" src="sounds/boom.wav"></audio>
53+
<audio data-key="72" src="sounds/ride.wav"></audio>
54+
<audio data-key="74" src="sounds/snare.wav"></audio>
55+
<audio data-key="75" src="sounds/tom.wav"></audio>
56+
<audio data-key="76" src="sounds/tink.wav"></audio>
6357

58+
<script>
59+
function playSound(e) {
60+
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
61+
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
62+
if (!audio) return; // stop the function from running all together
63+
audio.currentTime = 0; //rewind to the start
64+
audio.play();
65+
key.classList.add("playing");
66+
}
67+
function removeTransition(e) {
68+
if (e.propertyName !== "transform") return;
69+
this.classList.remove("playing");
70+
}
6471

65-
</body>
72+
const keys = document.querySelectorAll(".key");
73+
keys.forEach((key) =>
74+
key.addEventListener("transitioned", removeTransition)
75+
);
76+
window.addEventListener("keydown", playSound);
77+
</script>
78+
</body>
6679
</html>

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

Lines changed: 149 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,164 @@
11
<!DOCTYPE html>
22
<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
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
1212

13-
// Some data we can work with
13+
// Some data we can work with
1414

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-
];
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+
];
2929

30-
const people = [
31-
'Bernhard, Sandra', 'Bethea, Erin', 'Becker, Carl', 'Bentsen, Lloyd', 'Beckett, Samuel', 'Blake, William', 'Berger, Ric', 'Beddoes, Mick', 'Beethoven, Ludwig',
32-
'Belloc, Hilaire', 'Begin, Menachem', 'Bellow, Saul', 'Benchley, Robert', 'Blair, Robert', 'Benenson, Peter', 'Benjamin, Walter', 'Berlin, Irving',
33-
'Benn, Tony', 'Benson, Leana', 'Bent, Silas', 'Berle, Milton', 'Berry, Halle', 'Biko, Steve', 'Beck, Glenn', 'Bergman, Ingmar', 'Black, Elk', 'Berio, Luciano',
34-
'Berne, Eric', 'Berra, Yogi', 'Berry, Wendell', 'Bevan, Aneurin', 'Ben-Gurion, David', 'Bevel, Ken', 'Biden, Joseph', 'Bennington, Chester', 'Bierce, Ambrose',
35-
'Billings, Josh', 'Birrell, Augustine', 'Blair, Tony', 'Beecher, Henry', 'Biondo, Frank'
36-
];
37-
38-
// Array.prototype.filter()
39-
// 1. Filter the list of inventors for those who were born in the 1500's
30+
const people = [
31+
"Bernhard, Sandra",
32+
"Bethea, Erin",
33+
"Becker, Carl",
34+
"Bentsen, Lloyd",
35+
"Beckett, Samuel",
36+
"Blake, William",
37+
"Berger, Ric",
38+
"Beddoes, Mick",
39+
"Beethoven, Ludwig",
40+
"Belloc, Hilaire",
41+
"Begin, Menachem",
42+
"Bellow, Saul",
43+
"Benchley, Robert",
44+
"Blair, Robert",
45+
"Benenson, Peter",
46+
"Benjamin, Walter",
47+
"Berlin, Irving",
48+
"Benn, Tony",
49+
"Benson, Leana",
50+
"Bent, Silas",
51+
"Berle, Milton",
52+
"Berry, Halle",
53+
"Biko, Steve",
54+
"Beck, Glenn",
55+
"Bergman, Ingmar",
56+
"Black, Elk",
57+
"Berio, Luciano",
58+
"Berne, Eric",
59+
"Berra, Yogi",
60+
"Berry, Wendell",
61+
"Bevan, Aneurin",
62+
"Ben-Gurion, David",
63+
"Bevel, Ken",
64+
"Biden, Joseph",
65+
"Bennington, Chester",
66+
"Bierce, Ambrose",
67+
"Billings, Josh",
68+
"Birrell, Augustine",
69+
"Blair, Tony",
70+
"Beecher, Henry",
71+
"Biondo, Frank",
72+
];
4073

41-
// Array.prototype.map()
42-
// 2. Give us an array of the inventors first and last names
74+
// Array.prototype.filter()
75+
// 1. Filter the list of inventors for those who were born in the 1500's
76+
const fifteen = inventors.filter(
77+
(inventor) => inventor.year >= 1500 && inventor.year < 1600
78+
);
79+
console.table(fifteen);
4380

44-
// Array.prototype.sort()
45-
// 3. Sort the inventors by birthdate, oldest to youngest
81+
// Array.prototype.map()
82+
// 2. Give us an array of the inventors first and last names
83+
const fullNames = inventors.map(
84+
(inventor) => inventor.first + "" + inventor.last
85+
);
86+
console.log(fullNames);
4687

47-
// Array.prototype.reduce()
48-
// 4. How many years did all the inventors live all together?
88+
// Array.prototype.sort()
89+
// 3. Sort the inventors by birthdate, oldest to youngest
90+
/* const ordered = inventors.sort(function (a, b) {
91+
if (a.year > b.year) {
92+
return 1;
93+
} else {
94+
return -1;
95+
}
96+
}); */
4997

50-
// 5. Sort the inventors by years lived
98+
const ordered = inventors.sort((a, b) => (a.year > b.year ? 1 : -1));
5199

52-
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
53-
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
100+
console.table(ordered);
54101

102+
// Array.prototype.reduce()
103+
// 4. How many years did all the inventors live all together?
104+
const totalYears = inventors.reduce((total, inventor) => {
105+
return total + (inventor.passed - inventor.year);
106+
}, 0);
55107

56-
// 7. sort Exercise
57-
// Sort the people alphabetically by last name
108+
console.log(totalYears);
58109

59-
// 8. Reduce Exercise
60-
// Sum up the instances of each of these
61-
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
110+
// 5. Sort the inventors by years lived
62111

63-
</script>
64-
</body>
112+
const oldest = inventors.sort(function (a, b) {
113+
const lastGuy = a.passed - a.year;
114+
const nextGuy = b.passed - b.year;
115+
return lastGuy > nextGuy ? -1 : 1;
116+
});
117+
console.table(oldest);
118+
119+
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
120+
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
121+
122+
//const category = document.querySelector(".mw-category");
123+
//const links = Array.from(category.querySelectorAll("a"));
124+
//const de = links
125+
// .map((link) => link.textContent)
126+
// .filter((streetName) => streetName.includes("de"));
127+
// 7. sort Exercise
128+
// Sort the people alphabetically by last name
129+
const alpha = people.sort((lastOne, nextOne) => {
130+
const [aLast, aFirst] = lastOne.split(", ");
131+
const [bLast, bFirst] = nextOne.split(", ");
132+
return aLast > bLast ? 1 : -1;
133+
});
134+
console.log(alpha);
135+
// 8. Reduce Exercise
136+
// Sum up the instances of each of these
137+
const data = [
138+
"car",
139+
"car",
140+
"truck",
141+
"truck",
142+
"bike",
143+
"walk",
144+
"car",
145+
"van",
146+
"bike",
147+
"walk",
148+
"car",
149+
"van",
150+
"car",
151+
"truck",
152+
];
153+
154+
const transportation = data.reduce(function (obj, item) {
155+
if (!obj[item]) {
156+
obj[item] = 0;
157+
}
158+
obj[item]++;
159+
return obj;
160+
}, {});
161+
console.log(transportation);
162+
</script>
163+
</body>
65164
</html>

0 commit comments

Comments
 (0)