diff --git a/.tern-project b/.tern-project new file mode 100644 index 0000000000..22bd8f4635 --- /dev/null +++ b/.tern-project @@ -0,0 +1,7 @@ +{ + "ecmaVersion": 6, + "libs": [ + "browser" + ], + "plugins": {} +} \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html deleted file mode 100644 index 1a16d0997c..0000000000 --- a/01 - JavaScript Drum Kit/index-FINISHED.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/index-START.html b/01 - JavaScript Drum Kit/index-START.html deleted file mode 100644 index 4070d32767..0000000000 --- a/01 - JavaScript Drum Kit/index-START.html +++ /dev/null @@ -1,66 +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/index.html b/01 - JavaScript Drum Kit/index.html index a18f2bc2ca..68a149d13c 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -57,27 +57,8 @@ - - function playSound(e) { - const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); - const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); - if (!audio) return; // stop the fucntion from running all together - audio.currentTime = 0; // rewind to the start - audio.play(); - key.classList.add('playing'); - } - function removeTransition(e) { - if (e.propertyName !== 'transform') return; // skip it if it's not a transform - this.classList.remove('playing'); - } - - const keys = document.querySelectorAll('.key'); - keys.forEach(key => key.addEventListener('transitionend', removeTransition)); - window.addEventListener('keydown', playSound); - - - diff --git a/01 - JavaScript Drum Kit/main.js b/01 - JavaScript Drum Kit/main.js new file mode 100644 index 0000000000..ee6138b230 --- /dev/null +++ b/01 - JavaScript Drum Kit/main.js @@ -0,0 +1,23 @@ +const keys = document.querySelectorAll('.keys'); + +keys.forEach(key => { key.addEventListener('transitionend', removeTransition)}); + +this.addEventListener('keydown', playSound); + +// play the sound +function playSound(e) { + const keys = document.querySelector(`.key[data-key="${e.keyCode}"]`); + const audio = document.querySelectorAll(`audio[data-key="${e.keyCode}"]`)[0]; + + if (keys) { + const play = new Audio(audio.src); + play.play(); + keys.classList.add('playing') + } +} + +function removeTransition (e) { + if(e.propertyName === 'transform'){ + e.target.className = 'key'; + } +} diff --git a/02 - JS + CSS Clock/.eslintrc.js b/02 - JS + CSS Clock/.eslintrc.js new file mode 100644 index 0000000000..4d50dd8bde --- /dev/null +++ b/02 - JS + CSS Clock/.eslintrc.js @@ -0,0 +1,234 @@ +module.exports = { + "env": { + "browser": true, + "es6": true + }, + "extends": "eslint:recommended", + "rules": { + "accessor-pairs": "error", + "array-bracket-spacing": "error", + "array-callback-return": "error", + "arrow-body-style": "error", + "arrow-parens": "error", + "arrow-spacing": "error", + "block-scoped-var": "error", + "block-spacing": "error", + "brace-style": "error", + "callback-return": "error", + "camelcase": "error", + "capitalized-comments": "error", + "class-methods-use-this": "error", + "comma-dangle": "error", + "comma-spacing": [ + "error", + { + "after": true, + "before": false + } + ], + "comma-style": "error", + "complexity": "error", + "computed-property-spacing": "error", + "consistent-return": "error", + "consistent-this": "error", + "curly": "error", + "default-case": "error", + "dot-location": "error", + "dot-notation": "error", + "eol-last": [ + "error", + "never" + ], + "eqeqeq": "error", + "func-call-spacing": "error", + "func-name-matching": "error", + "func-names": "error", + "func-style": [ + "error", + "declaration" + ], + "generator-star-spacing": "error", + "global-require": "error", + "guard-for-in": "error", + "handle-callback-err": "error", + "id-blacklist": "error", + "id-length": "error", + "id-match": "error", + "indent": "error", + "init-declarations": "error", + "jsx-quotes": "error", + "key-spacing": "error", + "keyword-spacing": "error", + "line-comment-position": "error", + "linebreak-style": [ + "error", + "unix" + ], + "lines-around-comment": "error", + "lines-around-directive": "error", + "max-depth": "error", + "max-len": "error", + "max-lines": "error", + "max-nested-callbacks": "error", + "max-params": "error", + "max-statements": "off", + "max-statements-per-line": "error", + "multiline-ternary": "error", + "new-cap": "error", + "new-parens": "error", + "newline-after-var": [ + "error", + "always" + ], + "newline-before-return": "error", + "newline-per-chained-call": "error", + "no-alert": "error", + "no-array-constructor": "error", + "no-bitwise": "error", + "no-caller": "error", + "no-catch-shadow": "error", + "no-confusing-arrow": "error", + "no-continue": "error", + "no-div-regex": "error", + "no-duplicate-imports": "error", + "no-else-return": "error", + "no-empty-function": "error", + "no-eq-null": "error", + "no-eval": "error", + "no-extend-native": "error", + "no-extra-bind": "error", + "no-extra-label": "error", + "no-extra-parens": "off", + "no-floating-decimal": "error", + "no-implicit-coercion": "error", + "no-implicit-globals": "off", + "no-implied-eval": "error", + "no-inline-comments": "error", + "no-invalid-this": "error", + "no-iterator": "error", + "no-label-var": "error", + "no-labels": "error", + "no-lone-blocks": "error", + "no-lonely-if": "error", + "no-loop-func": "error", + "no-magic-numbers": "off", + "no-mixed-operators": "error", + "no-mixed-requires": "error", + "no-multi-spaces": "error", + "no-multi-str": "error", + "no-multiple-empty-lines": "error", + "no-native-reassign": "error", + "no-negated-condition": "error", + "no-negated-in-lhs": "error", + "no-nested-ternary": "error", + "no-new": "error", + "no-new-func": "error", + "no-new-object": "error", + "no-new-require": "error", + "no-new-wrappers": "error", + "no-octal-escape": "error", + "no-param-reassign": "error", + "no-path-concat": "error", + "no-plusplus": "error", + "no-process-env": "error", + "no-process-exit": "error", + "no-proto": "error", + "no-prototype-builtins": "error", + "no-restricted-globals": "error", + "no-restricted-imports": "error", + "no-restricted-modules": "error", + "no-restricted-properties": "error", + "no-restricted-syntax": "error", + "no-return-assign": "error", + "no-return-await": "error", + "no-script-url": "error", + "no-self-compare": "error", + "no-sequences": "error", + "no-shadow": "error", + "no-shadow-restricted-names": "error", + "no-spaced-func": "error", + "no-sync": "error", + "no-tabs": "error", + "no-template-curly-in-string": "error", + "no-ternary": "error", + "no-throw-literal": "error", + "no-trailing-spaces": "error", + "no-undef-init": "error", + "no-undefined": "error", + "no-underscore-dangle": "error", + "no-unmodified-loop-condition": "error", + "no-unneeded-ternary": "error", + "no-unused-expressions": "error", + "no-use-before-define": "error", + "no-useless-call": "error", + "no-useless-computed-key": "error", + "no-useless-concat": "error", + "no-useless-constructor": "error", + "no-useless-escape": "error", + "no-useless-rename": "error", + "no-useless-return": "error", + "no-var": "error", + "no-void": "error", + "no-warning-comments": "error", + "no-whitespace-before-property": "error", + "no-with": "error", + "object-curly-newline": "error", + "object-curly-spacing": "error", + "object-property-newline": "error", + "object-shorthand": "error", + "one-var": "off", + "one-var-declaration-per-line": "error", + "operator-assignment": "error", + "operator-linebreak": "error", + "padded-blocks": "off", + "prefer-arrow-callback": "error", + "prefer-const": "error", + "prefer-numeric-literals": "error", + "prefer-reflect": "error", + "prefer-rest-params": "error", + "prefer-spread": "error", + "prefer-template": "error", + "quote-props": "error", + "quotes": [ + "error", + "single" + ], + "radix": "error", + "require-await": "error", + "require-jsdoc": "off", + "rest-spread-spacing": "error", + "semi": "error", + "semi-spacing": "error", + "sort-imports": "error", + "sort-keys": "error", + "sort-vars": "error", + "space-before-blocks": "error", + "space-before-function-paren": "off", + "space-in-parens": [ + "error", + "never" + ], + "space-infix-ops": "error", + "space-unary-ops": "error", + "spaced-comment": "error", + "strict": [ + "error", + "never" + ], + "symbol-description": "error", + "template-curly-spacing": [ + "error", + "never" + ], + "unicode-bom": [ + "error", + "never" + ], + "valid-jsdoc": "error", + "vars-on-top": "error", + "wrap-iife": "error", + "wrap-regex": "error", + "yield-star-spacing": "error", + "yoda": "error" + } +}; \ No newline at end of file diff --git a/02 - JS + CSS Clock/.tern-project b/02 - JS + CSS Clock/.tern-project new file mode 100644 index 0000000000..22bd8f4635 --- /dev/null +++ b/02 - JS + CSS Clock/.tern-project @@ -0,0 +1,7 @@ +{ + "ecmaVersion": 6, + "libs": [ + "browser" + ], + "plugins": {} +} \ No newline at end of file diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index-FINISHED.html deleted file mode 100644 index 36c420f534..0000000000 --- a/02 - JS + CSS Clock/index-FINISHED.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - Document - - - - -
-
-
-
-
-
-
- - - - - - - diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html deleted file mode 100644 index 259280d228..0000000000 --- a/02 - JS + CSS Clock/index-START.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - Document - - - - -
-
-
-
-
-
-
- - - - - - - diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html index 36c420f534..c5334cede6 100644 --- a/02 - JS + CSS Clock/index.html +++ b/02 - JS + CSS Clock/index.html @@ -1,96 +1,74 @@ + Document + -
-
-
-
-
-
+
+
+
+
+
+
- - + - + + \ No newline at end of file diff --git a/02 - JS + CSS Clock/main.js b/02 - JS + CSS Clock/main.js new file mode 100644 index 0000000000..3884064c9b --- /dev/null +++ b/02 - JS + CSS Clock/main.js @@ -0,0 +1,21 @@ +function moveClock() { + const secondHand = document.querySelector('.second-hand'); + const minHand = document.querySelector('.min-hand'); + const hourHand = document.querySelector('.hour-hand'); + const time = new Date(); + + const second = time.getSeconds(); + const degreeSecond = ((second / 60) * 360) + 90; + + const min = time.getMinutes(); + const degreeMin = ((min / 60) * 360) + 90; + + const hour = time.getHours(); + const degreehour = ((hour / 12) * 360) + 90; + + secondHand.style.transform = `rotate(${degreeSecond}deg)`; + minHand.style.transform = `rotate(${degreeMin}deg)`; + hourHand.style.transform = `rotate(${degreehour}deg)`; +} + +setInterval(moveClock, 1000); \ No newline at end of file