diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..0f9c3bfb08 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -57,10 +57,7 @@ - - + diff --git a/01 - JavaScript Drum Kit/index.js b/01 - JavaScript Drum Kit/index.js new file mode 100644 index 0000000000..b6e992d7d9 --- /dev/null +++ b/01 - JavaScript Drum Kit/index.js @@ -0,0 +1,16 @@ +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; // stop the function from running all together + audio.currentTime = 0; // umozni spustit audo znova aj ked este prebieha + audio.play(); + console.log(key); + key.classList.add('playing'); +}); +function removeTransition(e){ + if(e.propertyName !== 'transform') return; // skip if its not transform + this.classList.remove('playing'); +} + +const keys = document.querySelectorAll('.key'); +keys.forEach(key => key.addEventListener('transitionend', removeTransition)) diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..22034c8c11 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -2,7 +2,7 @@ - Codestin Search App + Codestin Search App @@ -42,7 +42,7 @@ position: relative; padding:2rem; box-shadow: - 0 0 0 4px rgba(0,0,0,0.1), + 0 0 0px 4px rgba(0,0,0,0.1), inset 0 0 0 3px #EFEFEF, inset 0 0 10px black, 0 0 10px rgba(0,0,0,0.2); @@ -61,13 +61,14 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition-timing-function: ease-in-out; + transition: all 0.05s; } - + diff --git a/02 - JS + CSS Clock/index.js b/02 - JS + CSS Clock/index.js new file mode 100644 index 0000000000..d1ed820e95 --- /dev/null +++ b/02 - JS + CSS Clock/index.js @@ -0,0 +1,22 @@ +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) + 90; + minsHand.style.transform = `rotate(${minsDegrees}deg)`; + + const hour = now.getHours(); + const hourDegrees = ((hour / 12 ) * 360) + 90; + hourHand.style.transform = `rotate(${hourDegrees}deg)`; + console.log(seconds); +} + +setInterval(setDate, 1000);