Skip to content

Commit 991926b

Browse files
fthebaudfthebaud
committed
Ex1 - Drumkit
1 parent 61b13da commit 991926b

File tree

6 files changed

+202
-22
lines changed

6 files changed

+202
-22
lines changed

‎.eslintrc.js

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
module.exports = {
2+
root: true,
3+
4+
extends: 'eslint:recommended',
5+
6+
parserOptions: {
7+
ecmaVersion: 6,
8+
sourceType: 'script'
9+
},
10+
11+
env: {
12+
browser: true,
13+
es6: true
14+
},
15+
16+
globals: {
17+
Ext: false,
18+
Sillage: true,
19+
Genois: true,
20+
Cahier: true,
21+
idCtx: true,
22+
digDesinhibePage: true,
23+
digInhibePage: true
24+
},
25+
26+
rules: {
27+
//Possible errors
28+
'comma-dangle': 'warn',
29+
'no-console': 'off',
30+
'no-debugger': 'warn',
31+
'no-extra-semi': 'warn',
32+
'no-extra-parens': ['warn', 'functions'],
33+
34+
//Best practices
35+
'eqeqeq': 'warn',
36+
'no-new': 'warn',
37+
'no-eval': 'warn',
38+
'curly': 'warn',
39+
'no-alert': 'warn',
40+
'no-unused-expressions': 'warn',
41+
'no-else-return': 'warn',
42+
'no-warning-comments': 'warn',
43+
//Best practices: complexity
44+
'complexity': ['warn', 10],
45+
'max-depth': ['warn', 3],
46+
'max-params': ['warn', 7],
47+
'default-case': ['warn'],
48+
49+
//variables
50+
'no-undef': 'warn',
51+
'no-unused-vars': ['warn', {
52+
'vars': 'all',
53+
'args': 'after-used'
54+
}],
55+
'no-use-before-define': ['warn', {
56+
'functions': false,
57+
'classes': false
58+
}],
59+
60+
//Stylistic issues
61+
'no-array-constructor': 'warn',
62+
'no-mixed-spaces-and-tabs': 'warn',
63+
'new-cap': ['warn', {
64+
'newIsCap': true,
65+
'capIsNew': true
66+
}],
67+
'semi': 'warn',
68+
'quotes': ['warn', 'single', {'avoidEscape': true, 'allowTemplateLiterals': true}],
69+
//'quote-props': ['warn', 'as-needed'],
70+
'indent': ['off', 2], //off : problem with arrays indentation
71+
'no-trailing-spaces': 'warn',
72+
//'space-before-function-paren': ['warn', 'never'],
73+
'space-in-parens': ['warn', 'never'],
74+
'yoda': ['warn', 'never'],
75+
}
76+
}

‎.tern-project

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"ecmaVersion": 6,
3+
"libs": [
4+
"browser"
5+
],
6+
"plugins": {}
7+
}

‎01 - JavaScript Drum Kit/index-old.html

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JS Drum Kit</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
11+
<div class="keys">
12+
<div data-key="65" class="key">
13+
<kbd>A</kbd>
14+
<span class="sound">clap</span>
15+
</div>
16+
<div data-key="83" class="key">
17+
<kbd>S</kbd>
18+
<span class="sound">hihat</span>
19+
</div>
20+
<div data-key="68" class="key">
21+
<kbd>D</kbd>
22+
<span class="sound">kick</span>
23+
</div>
24+
<div data-key="70" class="key">
25+
<kbd>F</kbd>
26+
<span class="sound">openhat</span>
27+
</div>
28+
<div data-key="71" class="key">
29+
<kbd>G</kbd>
30+
<span class="sound">boom</span>
31+
</div>
32+
<div data-key="72" class="key">
33+
<kbd>H</kbd>
34+
<span class="sound">ride</span>
35+
</div>
36+
<div data-key="74" class="key">
37+
<kbd>J</kbd>
38+
<span class="sound">snare</span>
39+
</div>
40+
<div data-key="75" class="key">
41+
<kbd>K</kbd>
42+
<span class="sound">tom</span>
43+
</div>
44+
<div data-key="76" class="key">
45+
<kbd>L</kbd>
46+
<span class="sound">tink</span>
47+
</div>
48+
</div>
49+
50+
<audio data-key="65" src="sounds/clap.wav"></audio>
51+
<audio data-key="83" src="sounds/hihat.wav"></audio>
52+
<audio data-key="68" src="sounds/kick.wav"></audio>
53+
<audio data-key="70" src="sounds/openhat.wav"></audio>
54+
<audio data-key="71" src="sounds/boom.wav"></audio>
55+
<audio data-key="72" src="sounds/ride.wav"></audio>
56+
<audio data-key="74" src="sounds/snare.wav"></audio>
57+
<audio data-key="75" src="sounds/tom.wav"></audio>
58+
<audio data-key="76" src="sounds/tink.wav"></audio>
59+
60+
<script>
61+
62+
63+
function playSound(e) {
64+
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
65+
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
66+
if (!audio) return; // stop the fucntion from running all together
67+
audio.currentTime = 0; // rewind to the start
68+
audio.play();
69+
key.classList.add('playing');
70+
}
71+
function removeTransition(e) {
72+
if (e.propertyName !== 'transform') return; // skip it if it's not a transform
73+
this.classList.remove('playing');
74+
}
75+
76+
const keys = document.querySelectorAll('.key');
77+
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
78+
window.addEventListener('keydown', playSound);
79+
80+
</script>
81+
82+
</body>
83+
</html>

‎01 - JavaScript Drum Kit/index.html

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -57,27 +57,7 @@
5757
<audio data-key="75" src="sounds/tom.wav"></audio>
5858
<audio data-key="76" src="sounds/tink.wav"></audio>
5959

60-
<script>
61-
62-
63-
function playSound(e) {
64-
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
65-
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
66-
if (!audio) return; // stop the fucntion from running all together
67-
audio.currentTime = 0; // rewind to the start
68-
audio.play();
69-
key.classList.add('playing');
70-
}
71-
function removeTransition(e) {
72-
if (e.propertyName !== 'transform') return; // skip it if it's not a transform
73-
this.classList.remove('playing');
74-
}
75-
76-
const keys = document.querySelectorAll('.key');
77-
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
78-
window.addEventListener('keydown', playSound);
79-
80-
</script>
60+
<script src="./script.js"></script>
8161

8262
</body>
8363
</html>

‎01 - JavaScript Drum Kit/script.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
'use strict';
2+
3+
function playsound(keycode) {
4+
const audio = document.querySelector(`audio[data-key="${keycode}"]`);
5+
if (!audio) {
6+
return;
7+
}
8+
audio.currentTime = 0; //rewind
9+
audio.play();
10+
}
11+
12+
function animate(keycode) {
13+
const key = document.querySelector(`.key[data-key="${keycode}"]`);
14+
if (!key) {
15+
return;
16+
}
17+
key.classList.add('playing');
18+
}
19+
20+
function removeTransition(e) {
21+
if (e.propertyName === 'transform') {
22+
// note : this = e.target dans le contexte d'une fonction appelée pour un evenement
23+
this.classList.remove('playing');
24+
}
25+
}
26+
27+
window.addEventListener('keydown', function (e) {
28+
const keycode = e.keyCode;
29+
console.log('keycode: ', keycode);
30+
playsound(keycode);
31+
animate(keycode);
32+
const keys = document.querySelectorAll('.key');
33+
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
34+
});

‎01 - JavaScript Drum Kit/style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ body,html {
2323
margin:1rem;
2424
font-size: 1.5rem;
2525
padding:1rem .5rem;
26-
transition:all .07s;
26+
transition:all .09s;
2727
width:100px;
2828
text-align: center;
2929
color:white;

0 commit comments

Comments
 (0)