Skip to content

Commit 41cf46a

Browse files
Release/201612142113 pull from wes bos (#1)
* Fix typos and extra code * add the instant function call * changes * Fixes titles * 💩 * adding women inventors This is a random selection of female inventors for the dataset * female inventors + change in const name A random selection of female inventors for the dataset along with proposed change in const name. * Unused CSS 😄 * fixed hours * typo: inventory > inventors' * Fix typo in readme.md * Removed the extra code from the start file * 7. sort Exercise make it so it sorts on last name In your video you still sort on the first name of the array but you called it `aLast` and `bLast` but they where in the first position of the array like this: `const [aLast, aFirst]` when changed to `const [aFirst, aLast]` it will filter on the second part of the array. There for it will sort on the last name. To bad there is no way to pull request your video. * Update readme.md As requested by Wes Bos. * Massages Array Cardio challenges 💪 * Typo fix * 24 - Sticky Nav: reset index and style START Reset the contents of index-START and style-START to reflect the contents before running through the video. * Update index.html spelling. * copy-pasta typo * Only START and FINISHED files are necessary.
1 parent 61b13da commit 41cf46a

File tree

31 files changed

+119
-221
lines changed

31 files changed

+119
-221
lines changed

01 - JavaScript Drum Kit/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
function playSound(e) {
6464
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
6565
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
66-
if (!audio) return; // stop the fucntion from running all together
66+
if (!audio) return; // stop the function from running altogether
6767
audio.currentTime = 0; // rewind to the start
6868
audio.play();
6969
key.classList.add('playing');

02 - JS + CSS Clock/index-FINISHED.html

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>Document</title>
5+
<title>JS + CSS Clock</title>
66
</head>
77
<body>
88

@@ -42,7 +42,7 @@
4242
position: relative;
4343
padding:2rem;
4444
box-shadow:
45-
0 0 0px 4px rgba(0,0,0,0.1),
45+
0 0 0 4px rgba(0,0,0,0.1),
4646
inset 0 0 0 3px #EFEFEF,
4747
inset 0 0 10px black,
4848
0 0 10px rgba(0,0,0,0.2);
@@ -84,13 +84,15 @@
8484
const minsDegrees = ((mins / 60) * 360) + 90;
8585
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
8686

87-
const hour = now.getMinutes();
88-
const hourDegrees = ((mins / 12) * 360) + 90;
87+
const hour = now.getHours();
88+
const hourDegrees = ((hour / 12) * 360) + 90;
8989
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
9090
}
9191

9292
setInterval(setDate, 1000);
9393

94+
setDate();
95+
9496
</script>
9597
</body>
9698
</html>

02 - JS + CSS Clock/index-START.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>Document</title>
5+
<title>JS + CSS Clock</title>
66
</head>
77
<body>
88

@@ -42,7 +42,7 @@
4242
position: relative;
4343
padding:2rem;
4444
box-shadow:
45-
0 0 0px 4px rgba(0,0,0,0.1),
45+
0 0 0 4px rgba(0,0,0,0.1),
4646
inset 0 0 0 3px #EFEFEF,
4747
inset 0 0 10px black,
4848
0 0 10px rgba(0,0,0,0.2);

02 - JS + CSS Clock/index.html

Lines changed: 0 additions & 96 deletions
This file was deleted.

03 - CSS Variables/index-FINISHED.html

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,6 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
5757
margin-bottom: 50px;
5858
}
5959

60-
a {
61-
color: var(--base);
62-
text-decoration: none;
63-
}
64-
6560
input {
6661
width:100px;
6762
}

03 - CSS Variables/index-START.html

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,6 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
4242
margin-bottom: 50px;
4343
}
4444

45-
a {
46-
color: var(--base);
47-
text-decoration: none;
48-
}
49-
5045
input {
5146
width:100px;
5247
}

04 - Array Cardio Day 1/index-FINISHED.html

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<title>Array Cardio 💪</title>
66
</head>
77
<body>
8+
<p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
89
<script>
910
// Get your shorts on - this is an array workout!
1011
// ## Array Cardio Day 1
@@ -19,13 +20,18 @@
1920
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
2021
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
2122
{ 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 }
2228
];
2329

2430
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'];
2531

2632
// Array.prototype.filter()
2733
// 1. Filter the list of inventors for those who were born in the 1500's
28-
const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600))
34+
const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));
2935

3036
console.table(fifteen);
3137

@@ -57,9 +63,9 @@
5763

5864
// 5. Sort the inventors by years lived
5965
const oldest = inventors.sort(function(a, b) {
60-
const lastGuy = a.passed - a.year;
61-
const nextGuy = b.passed - b.year;
62-
return lastGuy > nextGuy ? -1 : 1;
66+
const lastInventor = a.passed - a.year;
67+
const nextInventor = b.passed - b.year;
68+
return lastInventor > nextInventor ? -1 : 1;
6369
});
6470
console.table(oldest);
6571

@@ -75,8 +81,8 @@
7581
// 7. sort Exercise
7682
// Sort the people alphabetically by last name
7783
const alpha = people.sort((lastOne, nextOne) => {
78-
const [aLast, aFirst] = lastOne.split(', ');
79-
const [bLast, bFirst] = nextOne.split(', ');
84+
const [aFirst, aLast] = lastOne.split(', ');
85+
const [bFirst, bLast] = nextOne.split(', ');
8086
return aLast > bLast ? 1 : -1;
8187
});
8288
console.log(alpha);

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<title>Array Cardio 💪</title>
66
</head>
77
<body>
8+
<p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
89
<script>
910
// Get your shorts on - this is an array workout!
1011
// ## Array Cardio Day 1
@@ -19,6 +20,11 @@
1920
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
2021
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
2122
{ 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 }
2228
];
2329

2430
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'];
@@ -29,7 +35,7 @@
2935
// 1. Filter the list of inventors for those who were born in the 1500's
3036

3137
// Array.prototype.map()
32-
// 2. Give us an array of the inventory first and last names
38+
// 2. Give us an array of the inventors' first and last names
3339

3440
// Array.prototype.sort()
3541
// 3. Sort the inventors by birthdate, oldest to youngest

05 - Flex Panel Gallery/index-FINISHED.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@
4444
background-position:center;
4545
flex: 1;
4646
justify-content: center;
47-
align-items: center;
4847
display: flex;
4948
flex-direction: column;
5049
}

06 - Type Ahead/index-FINISHED.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
const cities = [];
2121
fetch(endpoint)
2222
.then(blob => blob.json())
23-
.then(data => cities.push(...data))
23+
.then(data => cities.push(...data));
2424

2525
function findMatches(wordToMatch, cities) {
2626
return cities.filter(place => {

06 - Type Ahead/style.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@
2222
margin: 0;
2323
text-align: center;
2424
outline:0;
25-
border:0;
2625
border: 10px solid #F7F7F7;
2726
width: 120%;
2827
left: -10%;

07 - Array Cardio Day 2/index-FINISHED.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>Document</title>
5+
<title>Array Cardio 💪💪</title>
66
</head>
77
<body>
8+
<p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
89
<script>
910
// ## Array Cardio Day 2
1011

@@ -19,7 +20,7 @@
1920
{ text: 'Love this!', id: 523423 },
2021
{ text: 'Super good', id: 823423 },
2122
{ text: 'You are the best', id: 2039842 },
22-
{ text: 'Ramen in my fav food ever', id: 123523 },
23+
{ text: 'Ramen is my fav food ever', id: 123523 },
2324
{ text: 'Nice Nice Nice!', id: 542328 }
2425
];
2526

07 - Array Cardio Day 2/index-START.html

Lines changed: 4 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,65 +2,39 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>Document</title>
5+
<title>Array Cardio 💪💪</title>
66
</head>
77
<body>
8+
<p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
89
<script>
910
// ## Array Cardio Day 2
1011

1112
const people = [
1213
{ name: 'Wes', year: 1988 },
1314
{ name: 'Kait', year: 1986 },
1415
{ name: 'Irv', year: 1970 },
15-
{ name: 'Lux', year: 2015 },
16+
{ name: 'Lux', year: 2015 }
1617
];
1718

1819
const comments = [
1920
{ text: 'Love this!', id: 523423 },
2021
{ text: 'Super good', id: 823423 },
2122
{ text: 'You are the best', id: 2039842 },
22-
{ text: 'Ramen in my fav food ever', id: 123523 },
23+
{ text: 'Ramen is my fav food ever', id: 123523 },
2324
{ text: 'Nice Nice Nice!', id: 542328 }
2425
];
2526

2627
// Some and Every Checks
2728
// Array.prototype.some() // is at least one person 19?
28-
// const isAdult = people.some(function(person) {
29-
// const currentYear = (new Date()).getFullYear();
30-
// if(currentYear - person.year >= 19) {
31-
// return true;
32-
// }
33-
// });
34-
35-
const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19);
36-
37-
console.log({isAdult});
3829
// Array.prototype.every() // is everyone 19?
3930

40-
const allAdults = people.every(person => ((new Date()).getFullYear()) - person.year >= 19);
41-
console.log({allAdults});
42-
4331
// Array.prototype.find()
4432
// Find is like filter, but instead returns just the one you are looking for
4533
// find the comment with the ID of 823423
4634

47-
48-
const comment = comments.find(comment => comment.id === 823423);
49-
50-
console.log(comment);
51-
5235
// Array.prototype.findIndex()
5336
// Find the comment with this ID
5437
// delete the comment with the ID of 823423
55-
const index = comments.findIndex(comment => comment.id === 823423);
56-
console.log(index);
57-
58-
// comments.splice(index, 1);
59-
60-
const newComments = [
61-
...comments.slice(0, index),
62-
...comments.slice(index + 1)
63-
];
6438

6539
</script>
6640
</body>

09 - Dev Tools Domination/index-FINISHED.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
console.log('hello');
2222

2323
// Interpolated
24-
console.log('Hello I am a %s string!', '💩')
24+
console.log('Hello I am a %s string!', '💩');
2525

2626
// Styled
2727
// console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')

0 commit comments

Comments
 (0)