diff --git a/.gitignore b/.gitignore index 6e1a3738b8..b3557c4a30 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,6 @@ node_modules/ *.log haters/ + +*.sublime-project +*.sublime-workspace diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..a5efec1021 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,9 +58,28 @@ + function PlaySound(event) { + var audio = document.querySelector(`audio[data-key="${event.keyCode}"]`); + if(!audio) return; + audio.currentTime = 0; + audio.play(); + Animate(event); + } + + function Animate(event) { + var elem = document.querySelector(`div[data-key="${event.keyCode}"]`); + elem.classList.add("playing"); + elem.addEventListener("transitionend", RemoveAnimation); + } + function RemoveAnimation(event) { + if (event.propertyName !== "transform") return; + event.target.classList.remove("playing"); + } + diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..127e60e036 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: all 0.05s; + transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index ca2b59d077..3a0cd546f0 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -21,10 +21,21 @@

Update CSS Variables with JS

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..bea3db45c0 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -7,6 +7,7 @@

Psst: have a look at the JavaScript Console 💁

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..18f9baa94d 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -24,6 +24,7 @@ .panels { min-height:100vh; overflow: hidden; + display: flex; } .panel { @@ -41,6 +42,11 @@ font-size: 20px; background-size:cover; background-position:center; + flex: 1; + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; } @@ -54,8 +60,17 @@ margin:0; width: 100%; transition:transform 0.5s; + flex: 1 0 auto; + justify-content: center; + align-items: center; + display: flex; } + .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,6 +82,7 @@ } .panel.open { + flex: 5; font-size:40px; } @@ -107,10 +123,21 @@ - + panels.forEach(panel => panel.addEventListener('click', toggleOpen)); + function toggleOpen() { + /*jshint validthis: true */ + this.classList.toggle('open'); + this.addEventListener('transitionend', function(event) { + if(event.propertyName != 'flex-grow') return; + console.log(event); + this.classList.toggle('open-active'); + }); + } +