diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..e85254cf71 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,66 +1,67 @@ + - - 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/notes.txt b/01 - JavaScript Drum Kit/notes.txt new file mode 100644 index 0000000000..11d6fe8b3d --- /dev/null +++ b/01 - JavaScript Drum Kit/notes.txt @@ -0,0 +1,4 @@ +JavaScript Event KeyCodes +http://keycode.info/ +Keycode testing tool - which keys map to which keycodes? + diff --git a/01 - JavaScript Drum Kit/scriptEs5.js b/01 - JavaScript Drum Kit/scriptEs5.js new file mode 100644 index 0000000000..af655ccf23 --- /dev/null +++ b/01 - JavaScript Drum Kit/scriptEs5.js @@ -0,0 +1,77 @@ +//============================================= +// javascript30 Version ES5 +//============================================= +function transitionEndEventName() { + var i, + undefined, + el = document.createElement('div'), + transitions = { + 'transition': 'transitionend', + 'OTransition': 'otransitionend', // oTransitionEnd in very old Opera + 'MozTransition': 'transitionend', + 'WebkitTransition': 'webkitTransitionEnd' + }; + + for (i in transitions) { + if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) { + return transitions[i]; + } + } + + //TODO: throw 'TransitionEnd event is not supported in this browser'; +} + + +function removeTransition(e) { + alert("BOOM"); + console.log(e); + if (e.propertyName !== 'transform') return; // Skip if it's not transformed + console.log(e.propertyName); + this.classList.remove('playing'); +}; + +function playSound(e) { + // body + //console.log(e.keyCode); + var keyCode = e.keyCode; + //console.log(keyCode); + + var audio = document.querySelector('audio[data-key2=a' + keyCode + ']'); + //console.log(audio); + + if (!audio) return; // Stops the function from running all together; + audio.classList.add('key'); + + var key = document.querySelector('audio.key[data-key2=a' + keyCode + ']'); + //console.log(key); + playAudio = new Audio(key.src); + playAudio.timeupdate = 0; // Rewind to the start + playAudio.play(); + key.classList.add('playing'); +}; + +var keys = document.querySelectorAll('.key'); +//console.log(keys); + +// for (var i = 0; i < keys.length; i++) { +// keys[i].addEventListener(transitionEndEventName(), removeTransition, false); +// } + +for (var i = 0; i < keys.length; i++) { + keys[i].addEventListener('transitionend', function (e) { + alert("BOOM"); + console.log(e); + if (e.propertyName !== 'transform') return; // Skip if it's not transformed + console.log(e.propertyName); + this.classList.remove('playing'); + }, false); +} + +// for (var i = 0; i < keys.length; i++) { +// (function () { +// //console.log(keys[i]); +// keys[i].addEventListener('transitionend', removeTransition); +// }()); +// } + +window.addEventListener('keydown', playSound); diff --git a/01 - JavaScript Drum Kit/scriptEs6.js b/01 - JavaScript Drum Kit/scriptEs6.js new file mode 100644 index 0000000000..71e4e17c95 --- /dev/null +++ b/01 - JavaScript Drum Kit/scriptEs6.js @@ -0,0 +1,29 @@ +//============================================= +// javascript30 Version ES6 +//============================================= +function removeTransition(e) { + //console.log(e); + if (e.propertyName !== 'transform') return; // Skip if it's not transformed + //console.log(e.propertyName); + this.classList.remove('playing'); +}; + +function playSound(e) { + // body + //console.log(e.keyCode); + const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); + //console.log(audio); + + if (!audio) return; // Stops the function from running all together; + + const key = document.querySelector(`div[data-key="${e.keyCode}"]`); + //console.log(key); + + audio.currentTime = 0; // Rewind to the start + audio.play(); + key.classList.add('playing'); +}; + +const keys = document.querySelectorAll('.key'); +keys.forEach(key => key.addEventListener('transitionend', removeTransition)); +window.addEventListener('keydown', playSound); diff --git a/01 - JavaScript Drum Kit/sounds/boom.mp3 b/01 - JavaScript Drum Kit/sounds/boom.mp3 new file mode 100644 index 0000000000..a7903a83bc Binary files /dev/null and b/01 - JavaScript Drum Kit/sounds/boom.mp3 differ diff --git a/01 - JavaScript Drum Kit/sounds/clap.mp3 b/01 - JavaScript Drum Kit/sounds/clap.mp3 new file mode 100644 index 0000000000..d460647faa Binary files /dev/null and b/01 - JavaScript Drum Kit/sounds/clap.mp3 differ diff --git a/01 - JavaScript Drum Kit/sounds/hihat.mp3 b/01 - JavaScript Drum Kit/sounds/hihat.mp3 new file mode 100644 index 0000000000..f177ad0a84 Binary files /dev/null and b/01 - JavaScript Drum Kit/sounds/hihat.mp3 differ diff --git a/01 - JavaScript Drum Kit/sounds/kick.mp3 b/01 - JavaScript Drum Kit/sounds/kick.mp3 new file mode 100644 index 0000000000..7d2bb6e904 Binary files /dev/null and b/01 - JavaScript Drum Kit/sounds/kick.mp3 differ diff --git a/01 - JavaScript Drum Kit/sounds/openhat.mp3 b/01 - JavaScript Drum Kit/sounds/openhat.mp3 new file mode 100644 index 0000000000..ab33c1f161 Binary files /dev/null and b/01 - JavaScript Drum Kit/sounds/openhat.mp3 differ diff --git a/01 - JavaScript Drum Kit/sounds/ride.mp3 b/01 - JavaScript Drum Kit/sounds/ride.mp3 new file mode 100644 index 0000000000..ef8e66008d Binary files /dev/null and b/01 - JavaScript Drum Kit/sounds/ride.mp3 differ diff --git a/01 - JavaScript Drum Kit/sounds/snare.mp3 b/01 - JavaScript Drum Kit/sounds/snare.mp3 new file mode 100644 index 0000000000..4916f8ca00 Binary files /dev/null and b/01 - JavaScript Drum Kit/sounds/snare.mp3 differ diff --git a/01 - JavaScript Drum Kit/sounds/tink.mp3 b/01 - JavaScript Drum Kit/sounds/tink.mp3 new file mode 100644 index 0000000000..cfcef3d5bb Binary files /dev/null and b/01 - JavaScript Drum Kit/sounds/tink.mp3 differ diff --git a/01 - JavaScript Drum Kit/sounds/tom.mp3 b/01 - JavaScript Drum Kit/sounds/tom.mp3 new file mode 100644 index 0000000000..482d456ddf Binary files /dev/null and b/01 - JavaScript Drum Kit/sounds/tom.mp3 differ diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index ee7eaefb1f..b1ebc93ee2 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,74 +1,80 @@ + - - JS + CSS Clock + + + JS + CSS Clock +
-
-
-
-
-
+
+
+
+
+
- - - - + + + + diff --git a/02 - JS and CSS Clock/scriptEs5.js b/02 - JS and CSS Clock/scriptEs5.js new file mode 100644 index 0000000000..ae8df166fd --- /dev/null +++ b/02 - JS and CSS Clock/scriptEs5.js @@ -0,0 +1,22 @@ +var hoursHandIe = document.querySelector('.hour-hand'); +var minsHandIe = document.querySelector('.min-hand'); +var secondHandIe = document.querySelector('.second-hand'); + +function setDateIe() { + var now = new Date(); + var hours = now.getHours(); + var mins = now.getMinutes(); + var seconds = now.getSeconds(); + + var hoursDegrees = ((hours / 12) * 360) + 90; // Offset due to default 90deg setting + var minsDegrees = ((mins / 60) * 360) + 90; // Offset due to default 90deg setting + var secondsDegrees = ((seconds / 60) * 360) + 90; // Offset due to default 90deg setting + + hoursHandIe.style.transform = 'rotate(' + hoursDegrees + 'deg)'; + minsHandIe.style.transform = 'rotate(' + minsDegrees + 'deg)'; + secondHandIe.style.transform = 'rotate(' + secondsDegrees + 'deg)'; + //console.log(seconds); + //console.log(hours + ":" + mins + ":" + seconds); +} + +setInterval(setDateIe, 1000); diff --git a/02 - JS and CSS Clock/scriptEs6.js b/02 - JS and CSS Clock/scriptEs6.js new file mode 100644 index 0000000000..a4c3506485 --- /dev/null +++ b/02 - JS and CSS Clock/scriptEs6.js @@ -0,0 +1,21 @@ +const hoursHand = document.querySelector('.hour-hand'); +const minsHand = document.querySelector('.min-hand'); +const secondHand = document.querySelector('.second-hand'); + +function setDate() { + const now = new Date(); + const hours = now.getHours(); + const mins = now.getMinutes(); + const seconds = now.getSeconds(); + + const hoursDegrees = ((hours / 12) * 360) + 90; // Offset due to default 90deg setting + const minsDegrees = ((mins / 60) * 360) + 90; // Offset due to default 90deg setting + const secondsDegrees = ((seconds / 60) * 360) + 90; // Offset due to default 90deg setting + + hoursHand.style.transform = `rotate(${hoursDegrees}deg)`; + minsHand.style.transform = `rotate(${minsDegrees}deg)`; + secondHand.style.transform = `rotate(${secondsDegrees}deg)`; + //console.log(hours + ":" + mins + ":" + seconds); +} + +setInterval(setDate, 1000);