diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html old mode 100644 new mode 100755 diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html old mode 100644 new mode 100755 index 4070d32767..659df91288 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,65 +1,63 @@ - - JS Drum Kit - + + JS Drum Kit + -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride -
-
- J - snare -
-
- K - tom -
-
- L - tink -
-
+
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
- - - - - - - - - + + + + + + + + + - + diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html deleted file mode 100644 index a18f2bc2ca..0000000000 --- a/01 - JavaScript Drum Kit/index.html +++ /dev/null @@ -1,83 +0,0 @@ - - - - - JS Drum Kit - - - - - -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride -
-
- J - snare -
-
- K - tom -
-
- L - tink -
-
- - - - - - - - - - - - - - - diff --git a/01 - JavaScript Drum Kit/main.js b/01 - JavaScript Drum Kit/main.js new file mode 100644 index 0000000000..2f14dda419 --- /dev/null +++ b/01 - JavaScript Drum Kit/main.js @@ -0,0 +1,22 @@ +window.addEventListener('keydown', function(e){ + const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); + const key = document.querySelector(`.key[data-key="${e.keyCode}"]`) + if(!audio) return; // stops the audio from running all together + audio.currentTime = 0; // rewinds to the start + audio.play(); // plays keys over and over again\ + // key.classList.toggle('playing'); + key.classList.add('playing'); +}); + +const keys = Array.from(document.querySelectorAll('.key')); +// cannot listen for events on an array +keys.forEach(key => key.addEventListener('transitionend', removeTransition)); +console.log(keys); + +function removeTransition(e) { + console.log(e); + if(e.propertyName !== 'transform') { + return; // skip if it's not a transform + } + this.classList.remove('playing'); +} \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css old mode 100644 new mode 100755 index 3e0a320b37..075578c930 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -1,6 +1,6 @@ html { font-size: 10px; - background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center; + background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center; background-size: cover; } body,html { @@ -10,41 +10,41 @@ body,html { } .keys { - display:flex; - flex:1; - min-height:100vh; + display: flex; + flex: 1; + min-height: 100vh; align-items: center; justify-content: center; } .key { - border:4px solid black; - border-radius:5px; - margin:1rem; + border: .4rem solid black; + border-radius: .5rem; + margin: 1rem; font-size: 1.5rem; - padding:1rem .5rem; - transition:all .07s; - width:100px; + padding: 1rem .5rem; + transition: all .07s ease; + width: 10rem; text-align: center; - color:white; - background:rgba(0,0,0,0.4); - text-shadow:0 0 5px black; + color: white; + background: rgba(0,0,0,0.4); + text-shadow: 0 0 .5rem black; } .playing { - transform:scale(1.1); - border-color:#ffc600; - box-shadow: 0 0 10px #ffc600; + transform: scale(1.1); + border-color: #ffc600; + box-shadow: 0 0 1rem #ffc600; } kbd { display: block; - font-size: 40px; + font-size: 4rem; } .sound { font-size: 1.2rem; text-transform: uppercase; - letter-spacing: 1px; - color:#ffc600; + letter-spacing: .1rem; + color: #ffc600; } diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 259280d228..ae776a5806 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -61,13 +61,37 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: 0.05s all; + transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } diff --git a/02 - JS and CSS Clock/index-FINISHED.html b/02 - JS and CSS Clock/index-FINISHED.html new file mode 100755 index 0000000000..37436ed1ca --- /dev/null +++ b/02 - JS and CSS Clock/index-FINISHED.html @@ -0,0 +1,99 @@ + + + + + JS + CSS Clock + + + + +
+
+
+
+
+
+
+ + + + + + + diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html new file mode 100755 index 0000000000..27183be65b --- /dev/null +++ b/02 - JS and CSS Clock/index-START.html @@ -0,0 +1,66 @@ + + + + +JS + CSS Clock + + +
+
+
+
+
+
+
+ + + + diff --git a/02 - JS and CSS Clock/main.js b/02 - JS and CSS Clock/main.js new file mode 100644 index 0000000000..3dab48ed44 --- /dev/null +++ b/02 - JS and CSS Clock/main.js @@ -0,0 +1,23 @@ +const secondHand = document.querySelector('.second-hand'); +const minsHand = document.querySelector('.min-hand'); +const hourHand = document.querySelector('.hour-hand'); + +function setDate() { + const now = new Date(); + + const seconds = now.getSeconds(); + const secondsDegrees = ((seconds / 60) * 360) + 90; + secondHand.style.transform = `rotate(${secondsDegrees}deg)`; + + const mins = now.getMinutes(); + const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90; + minsHand.style.transform = `rotate(${minsDegrees}deg)`; + + const hour = now.getHours(); + const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90; + hourHand.style.transform = `rotate(${hourDegrees}deg)`; +} + +setInterval(setDate, 1000); + +setDate(); \ No newline at end of file diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index-FINISHED.html old mode 100644 new mode 100755 index 9401d7b339..c931959a74 --- a/03 - CSS Variables/index-FINISHED.html +++ b/03 - CSS Variables/index-FINISHED.html @@ -9,13 +9,13 @@

Update CSS Variables with JS

- + - + - +
@@ -43,9 +43,6 @@

Update CSS Variables with JS

body { text-align: center; - } - - body { background: #193549; color: white; font-family: 'helvetica neue', sans-serif; @@ -57,11 +54,6 @@

Update CSS Variables with JS

margin-bottom: 50px; } - a { - color: var(--base); - text-decoration: none; - } - input { width:100px; } diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html old mode 100644 new mode 100755 index bf0f33e3ba..f6f3cde410 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -3,57 +3,50 @@ Scoped CSS Variables and JS - - -

Update CSS Variables with JS

- -
- - - - - - - - -
- - - - - - + + +

Update CSS Variables with JS

+
+ + + + + + +
+ + diff --git a/03 - CSS Variables/main.js b/03 - CSS Variables/main.js new file mode 100644 index 0000000000..1e8abf6a53 --- /dev/null +++ b/03 - CSS Variables/main.js @@ -0,0 +1,14 @@ +const inputs = document.querySelectorAll('.controls input'); +// const inputsArr = Array.from(inputs); +// console.log(inputsArr); + +// *** with nodelists, you don't need to convert to an array; you can use .forEach() *** // +function handleUpdate() { + const suffix = this.dataset.sizing || ''; //px or nothing + console.log(suffix); //object that returns to you all the data attributes in the html + console.log(document.documentElement) //the html element + document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); +} + +inputs.forEach(input => input.addEventListener('change', handleUpdate)); +inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); diff --git a/04 - Array Cardio Day 1/index-FINISHED.html b/04 - Array Cardio Day 1/index-FINISHED.html old mode 100644 new mode 100755 index 850a61a7d9..ede883f1f9 --- a/04 - Array Cardio Day 1/index-FINISHED.html +++ b/04 - Array Cardio Day 1/index-FINISHED.html @@ -5,6 +5,7 @@ Array Cardio 💪 +

Psst: have a look at the JavaScript Console 💁

diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index-FINISHED.html old mode 100644 new mode 100755 index adb9060f5f..f703fed6ae --- a/05 - Flex Panel Gallery/index-FINISHED.html +++ b/05 - Flex Panel Gallery/index-FINISHED.html @@ -44,14 +44,13 @@ background-position:center; flex: 1; justify-content: center; - align-items: center; display: flex; flex-direction: column; } .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } - .panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); } + .panel2 { background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); } .panel3 { 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); } .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); } .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } @@ -87,11 +86,6 @@ font-size:40px; } - .cta { - color:white; - text-decoration: none; - } - diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html old mode 100644 new mode 100755 index e1d643ad5c..a9f1563b4a --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -24,9 +24,19 @@ .panels { min-height:100vh; overflow: hidden; + display: -webkit-flex; + display: -ms-flex; + display: flex; } .panel { + display: -webkit-flex; + display: -ms-flex; + display: flex; + flex: 1; /* takes up as much room */ + justify-content: center; + align-items: center; + flex-direction: column; background:#6B0F9C; box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1); color:white; @@ -45,7 +55,7 @@ .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } - .panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); } + .panel2 { background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); } .panel3 { 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); } .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); } .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } @@ -54,8 +64,20 @@ margin:0; width: 100%; transition:transform 0.5s; + /* border: 10px solid red; */ + flex: 1 0 auto; + display: -webkit-flex; + display: -ms-flex; + display: flex; + justify-content: center; + align-items: center; } + .panel > *:first-child { transform: translateY(-100%); } + .panel.open-active > *:first-child { transform: translateY(0); } + .panel > *:last-child { transform: translateY(100%); } + .panel.open-active > *:last-child { transform: translateY(0); } + .panel p { text-transform: uppercase; font-family: 'Amatic SC', cursive; @@ -67,14 +89,10 @@ } .panel.open { + flex: 5; font-size:40px; } - .cta { - color:white; - text-decoration: none; - } - @@ -107,7 +125,22 @@ diff --git a/06 - Type Ahead/index-FINISHED.html b/06 - Type Ahead/index-FINISHED.html old mode 100644 new mode 100755 index 53c36248b0..5902b43936 --- a/06 - Type Ahead/index-FINISHED.html +++ b/06 - Type Ahead/index-FINISHED.html @@ -20,7 +20,7 @@ const cities = []; fetch(endpoint) .then(blob => blob.json()) - .then(data => cities.push(...data)) + .then(data => cities.push(...data)); function findMatches(wordToMatch, cities) { return cities.filter(place => { diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html old mode 100644 new mode 100755 index 1436886918..b9f503a0c1 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -16,6 +16,44 @@ diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead/style.css old mode 100644 new mode 100755 index 155164bae9..65b3164ea7 --- a/06 - Type Ahead/style.css +++ b/06 - Type Ahead/style.css @@ -22,7 +22,6 @@ margin: 0; text-align: center; outline:0; - border:0; border: 10px solid #F7F7F7; width: 120%; left: -10%; @@ -67,22 +66,6 @@ font-size: 15px; } - - .details { - text-align: center; - font-size: 15px; - } - .hl { background:#ffc600; - } - - .love { - text-align: center; - } - - a { - color:black; - background:rgba(0,0,0,0.1); - text-decoration: none; - } + } \ No newline at end of file diff --git a/07 - Array Cardio Day 2/index-FINISHED.html b/07 - Array Cardio Day 2/index-FINISHED.html old mode 100644 new mode 100755 index e39d35f79a..c8e5b25d3b --- a/07 - Array Cardio Day 2/index-FINISHED.html +++ b/07 - Array Cardio Day 2/index-FINISHED.html @@ -2,9 +2,10 @@ - Document + Array Cardio 💪💪 +

Psst: have a look at the JavaScript Console 💁

diff --git a/08 - Fun with HTML5 Canvas/index-FINISHED.html b/08 - Fun with HTML5 Canvas/index-FINISHED.html old mode 100644 new mode 100755 diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html old mode 100644 new mode 100755 diff --git a/09 - Dev Tools Domination/index-FINISHED.html b/09 - Dev Tools Domination/index-FINISHED.html old mode 100644 new mode 100755 index 02264aa8fa..55cd3a2f42 --- a/09 - Dev Tools Domination/index-FINISHED.html +++ b/09 - Dev Tools Domination/index-FINISHED.html @@ -21,7 +21,7 @@ console.log('hello'); // Interpolated - console.log('Hello I am a %s string!', '💩') + console.log('Hello I am a %s string!', '💩'); // Styled // console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue') diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html old mode 100644 new mode 100755 diff --git a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html b/10 - Hold Shift and Check Checkboxes/index-FINISHED.html old mode 100644 new mode 100755 index 3ce296cc4b..7b08517a29 --- a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html +++ b/10 - Hold Shift and Check Checkboxes/index-FINISHED.html @@ -2,7 +2,7 @@ - Document + Hold Shift to Check Multiple Checkboxes