diff --git a/01 - JavaScript Drum Kit/index-MINE.html b/01 - JavaScript Drum Kit/index-MINE.html new file mode 100644 index 0000000000..cfc69cc6bd --- /dev/null +++ b/01 - JavaScript Drum Kit/index-MINE.html @@ -0,0 +1,62 @@ + + + + + Drum Kit + + + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/js/script.js b/01 - JavaScript Drum Kit/js/script.js new file mode 100644 index 0000000000..f49ad1827c --- /dev/null +++ b/01 - JavaScript Drum Kit/js/script.js @@ -0,0 +1,23 @@ +window.addEventListener('keydown', function (e) { + + const keyEl = document.querySelector(`div[data-key="${e.keyCode}"]`); + + if(keyEl !== null) + { + const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); + audio.currentTime = 0; + audio.play(); + keyEl.classList.add('playing'); + + window.addEventListener('keyup', function (e) { + + const keyEl = document.querySelector(`div[data-key="${e.keyCode}"]`); + + if(keyEl !== null) + { + keyEl.classList.remove('playing'); + } + }); + } +}); + diff --git a/02 - JS and CSS Clock/index-MINE.html b/02 - JS and CSS Clock/index-MINE.html new file mode 100644 index 0000000000..4f668c111d --- /dev/null +++ b/02 - JS and CSS Clock/index-MINE.html @@ -0,0 +1,101 @@ + + + + + JS + CSS Clock + + + + +
+
+
+
+
+
+
+ + + + + + + diff --git a/08 - Fun with HTML5 Canvas/index-MINE.html b/08 - Fun with HTML5 Canvas/index-MINE.html new file mode 100644 index 0000000000..412a81fddc --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index-MINE.html @@ -0,0 +1,86 @@ + + + + + HTML5 Canvas + + + + + + + + + diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html index 196fffd719..c46e1c267c 100644 --- a/09 - Dev Tools Domination/index-START.html +++ b/09 - Dev Tools Domination/index-START.html @@ -17,30 +17,48 @@ p.style.fontSize = '50px'; } - // Regular + const p = document.querySelector('p') + // Regular + console.log('hi') // Interpolated // Styled - + // you can style your console log + console.log('%c I am testing the console style', 'color: #bada55') // warning! - + // warning message in yellow + console.warn('warning bitch') // Error :| - + // show an error message in red + console.error('error bitch') // Info - + console.info('info bitch') // Testing - + // Only if the assertion is wrong, show a message + console.assert(document.querySelector("#pop"), "that is wrong") // clearing - + console.clear(); // Viewing DOM Elements - + // View the methods and attributes of an element + console.dir(p) // Grouping together // counting // timing + console.time('test'); + + fetch('http://pokeapi.co/api/v2/pokemon/1') + .then(data => data.json()) + .then(data => { + console.timeEnd('test'); + console.log(data) + }) + + console.table(dogs) + diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html index aeac48e7f9..b59a469f14 100644 --- a/10 - Hold Shift and Check Checkboxes/index-START.html +++ b/10 - Hold Shift and Check Checkboxes/index-START.html @@ -99,6 +99,34 @@