Visitar URL original
Merge pull request #1 from wesbos/master · wesbos/JavaScript30@09964bf · GitHub
Skip to content

Commit 09964bf

Browse files
authored
Merge pull request #1 from wesbos/master
pull from wesbos
2 parents 45e08db + 2bc30a0 commit 09964bf

42 files changed

Lines changed: 136 additions & 344 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22
node_modules/
33
*.log
44
haters/
5+
.idea/

‎01 - JavaScript Drum Kit/index.html‎

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

‎01 - JavaScript Drum Kit/style.css‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
html {
22
font-size: 10px;
3-
background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
3+
background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
44
background-size: cover;
55
}
66
body,html {
@@ -10,41 +10,41 @@ body,html {
1010
}
1111

1212
.keys {
13-
display:flex;
14-
flex:1;
15-
min-height:100vh;
13+
display: flex;
14+
flex: 1;
15+
min-height: 100vh;
1616
align-items: center;
1717
justify-content: center;
1818
}
1919

2020
.key {
21-
border:4px solid black;
22-
border-radius:5px;
23-
margin:1rem;
21+
border: .4rem solid black;
22+
border-radius: .5rem;
23+
margin: 1rem;
2424
font-size: 1.5rem;
25-
padding:1rem .5rem;
26-
transition:all .07s;
27-
width:100px;
25+
padding: 1rem .5rem;
26+
transition: all .07s ease;
27+
width: 10rem;
2828
text-align: center;
29-
color:white;
30-
background:rgba(0,0,0,0.4);
31-
text-shadow:0 0 5px black;
29+
color: white;
30+
background: rgba(0,0,0,0.4);
31+
text-shadow: 0 0 .5rem black;
3232
}
3333

3434
.playing {
35-
transform:scale(1.1);
36-
border-color:#ffc600;
37-
box-shadow: 0 0 10px #ffc600;
35+
transform: scale(1.1);
36+
border-color: #ffc600;
37+
box-shadow: 0 0 1rem #ffc600;
3838
}
3939

4040
kbd {
4141
display: block;
42-
font-size: 40px;
42+
font-size: 4rem;
4343
}
4444

4545
.sound {
4646
font-size: 1.2rem;
4747
text-transform: uppercase;
48-
letter-spacing: 1px;
49-
color:#ffc600;
48+
letter-spacing: .1rem;
49+
color: #ffc600;
5050
}

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

Lines changed: 0 additions & 96 deletions
This file was deleted.
Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
}
2727

2828
body {
29+
margin: 0;
2930
font-size: 2rem;
3031
display:flex;
3132
flex:1;
@@ -81,11 +82,11 @@
8182
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
8283

8384
const mins = now.getMinutes();
84-
const minsDegrees = ((mins / 60) * 360) + 90;
85+
const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
8586
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
8687

8788
const hour = now.getHours();
88-
const hourDegrees = ((mins / 12) * 360) + 90;
89+
const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
8990
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
9091
}
9192

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
}
2727

2828
body {
29+
margin: 0;
2930
font-size: 2rem;
3031
display:flex;
3132
flex:1;

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

Lines changed: 3 additions & 3 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">

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

Lines changed: 3 additions & 3 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">

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,8 +81,8 @@
8181
// 7. sort Exercise
8282
// Sort the people alphabetically by last name
8383
const alpha = people.sort((lastOne, nextOne) => {
84-
const [aFirst, aLast] = lastOne.split(', ');
85-
const [bFirst, bLast] = nextOne.split(', ');
84+
const [aLast, aFirst] = lastOne.split(', ');
85+
const [bLast, bFirst] = nextOne.split(', ');
8686
return aLast > bLast ? 1 : -1;
8787
});
8888
console.log(alpha);

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,7 @@
2727
{ first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
2828
];
2929

30-
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'];
31-
32-
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'];
3331

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

0 commit comments

Comments
 (0)