Visitar URL original
Merge remote-tracking branch 'upstream/master' · wesbos/JavaScript30@a6431be · GitHub
Skip to content

Commit a6431be

Browse files
yanpearsonyanpearson
committed
Merge remote-tracking branch 'upstream/master'
2 parents 43e576f + 7c9030e commit a6431be

34 files changed

Lines changed: 129 additions & 168 deletions

File tree

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

Lines changed: 7 additions & 5 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);
@@ -81,16 +81,18 @@
8181
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
8282

8383
const mins = now.getMinutes();
84-
const minsDegrees = ((mins / 60) * 360) + 90;
84+
const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 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) + ((mins/60)*30) + 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);

‎03 - CSS Variables/index-FINISHED.html‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
99

1010
<div class="controls">
1111
<label for="spacing">Spacing:</label>
12-
<input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
12+
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
1313

1414
<label for="blur">Blur:</label>
15-
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
15+
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
1616

1717
<label for="base">Base Color</label>
18-
<input type="color" name="base" value="#ffc600">
18+
<input id="base" type="color" name="base" value="#ffc600">
1919
</div>
2020

2121
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
@@ -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: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
99

1010
<div class="controls">
1111
<label for="spacing">Spacing:</label>
12-
<input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
12+
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
1313

1414
<label for="blur">Blur:</label>
15-
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
15+
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
1616

1717
<label for="base">Base Color</label>
18-
<input type="color" name="base" value="#ffc600">
18+
<input id="base" type="color" name="base" value="#ffc600">
1919
</div>
2020

2121
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
@@ -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: 10 additions & 4 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

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

Lines changed: 8 additions & 4 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,17 +20,20 @@
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

24-
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'];
25-
26-
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'];
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'];
2731

2832
// Array.prototype.filter()
2933
// 1. Filter the list of inventors for those who were born in the 1500's
3034

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

3438
// Array.prototype.sort()
3539
// 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

0 commit comments

Comments
 (0)