Skip to content

Commit c2ed0f3

Browse files
alexrahalexrah
committed
transpiling to last 6 major browsers with babel
1 parent 8432fff commit c2ed0f3

File tree

7 files changed

+247
-0
lines changed

7 files changed

+247
-0
lines changed

‎.babelrc‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"presets": [["env",
3+
{
4+
"targets": {
5+
"browsers": "last 6 versions",
6+
"node": 4
7+
},
8+
"loose": true,
9+
"debug": true
10+
}]],
11+
"ignore": ["*/dist/*"]
12+
13+
}

‎01 - JavaScript Drum Kit/all.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/**
2+
* Created by ale on 27/12/17.
3+
*/
4+
5+
let playyxx;
6+
7+
const play = (e) =>
8+
{
9+
console.log(e);
10+
let el;
11+
if (e.type === 'click'){
12+
// console.log(e.target.parentNode);
13+
let key = e.target.parentNode;
14+
let audio = key.querySelector('audio');
15+
key.classList.add('playing');
16+
audio.currentTime = 0;
17+
audio.play();
18+
}else{
19+
if(el = document.querySelector(`div[data-key="${e.keyCode}" ]`)) {
20+
el.classList.add("playing");
21+
let audio = el.querySelector("audio");
22+
audio.currentTime = 0;
23+
audio.play();
24+
}
25+
}
26+
};
27+
window.addEventListener('keyup', (e)=> {
28+
play(e);
29+
});
30+
31+
let allKeys = document.querySelectorAll('.key');
32+
console.log(allKeys);
33+
let allArr = Array.from(allKeys);
34+
allArr.map(key => { key.addEventListener('click', (e) => play(e))}) ;
35+
36+
37+
window.addEventListener('transitionend', (e)=> {
38+
if (e.propertyName === 'transform'){
39+
e.target.classList.remove('playing')
40+
41+
}
42+
});

‎01 - JavaScript Drum Kit/dist/all.js‎

Lines changed: 46 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎01 - JavaScript Drum Kit/dist/all.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎01 - JavaScript Drum Kit/dist/style.css‎

Lines changed: 69 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎01 - JavaScript Drum Kit/index.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
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="dist/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+
<audio src="sounds/clap.wav"></audio>
16+
</div>
17+
<div data-key="83" class="key">
18+
<kbd>S</kbd>
19+
<span class="sound">hihat</span>
20+
<audio src="sounds/hihat.wav"></audio>
21+
22+
</div>
23+
<div data-key="68" class="key">
24+
<kbd>D</kbd>
25+
<span class="sound">kick</span>
26+
<audio src="sounds/kick.wav"></audio>
27+
</div>
28+
<div data-key="70" class="key">
29+
<kbd>F</kbd>
30+
<span class="sound">openhat</span>
31+
<audio src="sounds/openhat.wav"></audio>
32+
</div>
33+
<div data-key="71" class="key">
34+
<kbd>G</kbd>
35+
<span class="sound">boom</span>
36+
<audio src="sounds/boom.wav"></audio>
37+
</div>
38+
<div data-key="72" class="key">
39+
<kbd>H</kbd>
40+
<span class="sound">ride</span>
41+
<audio data-key="72" src="sounds/ride.wav"></audio>
42+
</div>
43+
<div data-key="74" class="key">
44+
<kbd>J</kbd>
45+
<span class="sound">snare</span>
46+
<audio src="sounds/snare.wav"></audio>
47+
</div>
48+
<div data-key="75" class="key">
49+
<kbd>K</kbd>
50+
<span class="sound">tom</span>
51+
<audio src="sounds/tom.wav"></audio>
52+
</div>
53+
<div data-key="76" class="key">
54+
<kbd>L</kbd>
55+
<span class="sound">tink</span>
56+
<audio src="sounds/tink.wav"></audio>
57+
</div>¨
58+
</div>
59+
60+
61+
<script type="text/javascript" src="dist/all.js"></script>
62+
63+
64+
</body>
65+
</html>

‎package.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"devDependencies": {
3+
"babel-cli": "^6.26.0",
4+
"babel-preset-env": "^1.6.1",
5+
"babel-preset-flow": "^6.23.0"
6+
},
7+
"browserslist": [
8+
"> 1%",
9+
"last 6 versions"
10+
]
11+
}

0 commit comments

Comments
 (0)