Added repo link with GitHub logo · Sanujkumar/30DaysOfJavaScript@672141e · GitHub
Skip to content

Commit 672141e

Browse files
swapnilsparshswapnilsparsh
committed
Added repo link with GitHub logo
1 parent babcc71 commit 672141e

14 files changed

Lines changed: 431 additions & 887 deletions

File tree

‎01 - Drum Kit/assets/README.md‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎01 - Drum Kit/assets/drum.png‎

-49 KB
Binary file not shown.

‎01 - Drum Kit/data/keycodes.js‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎01 - Drum Kit/index.html‎

Lines changed: 63 additions & 25 deletions

‎01 - Drum Kit/main.js‎

Lines changed: 45 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,45 @@
1-
import keyCodes from "./data/keycodes.js";
2-
import { createKeyElement } from "./utils/util.js";
3-
4-
const keys = document.getElementById("keys");
5-
6-
const audio = new Audio();
7-
8-
window.addEventListener("keydown", async function ({ key }) {
9-
const sound = keyCodes.find(
10-
(keyCode) => keyCode.key.toLowerCase() === key.toLowerCase()
11-
)?.sound;
12-
if (sound) {
13-
audio.src = `sounds/${sound}.wav`;
14-
await audio.play();
15-
}
16-
});
17-
18-
keyCodes.forEach((keyCode) => {
19-
const key = createKeyElement(keyCode);
20-
keys.appendChild(key);
21-
});
1+
const keys = Array.from(document.querySelectorAll('.key'));
2+
3+
const keyCode = {
4+
A: 65,
5+
S: 83,
6+
D: 68,
7+
F: 70,
8+
G: 71,
9+
H: 72,
10+
J: 74,
11+
K: 75,
12+
L: 76,
13+
};
14+
15+
function removeTransition(e) {
16+
if (e.propertyName !== 'transform') return;
17+
e.target.classList.remove('playing');
18+
}
19+
20+
function playSound(e) {
21+
const audio = document.querySelector(
22+
`audio[data-key="${e.keyCode || keyCode[e.target.innerHTML]}"]`
23+
);
24+
25+
const key = document.querySelector(
26+
`div[data-key="${e.keyCode || keyCode[e.target.innerHTML]}"]`
27+
);
28+
29+
if (!audio) return;
30+
31+
key.classList.add('playing');
32+
audio.currentTime = 0;
33+
audio.play();
34+
}
35+
36+
37+
keys.forEach((key) => key.addEventListener('transitionend', removeTransition));
38+
39+
window.addEventListener('keydown', playSound);
40+
41+
keys.forEach((key) =>
42+
key.addEventListener('click', (e) => {
43+
playSound(e);
44+
})
45+
);

‎01 - Drum Kit/style.css‎

Lines changed: 36 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,69 @@
1-
*,
2-
*::before,
3-
*::after {
4-
box-sizing: border-box;
5-
}
6-
7-
@font-face {
8-
src: url("font/sans.ttf");
9-
font-family: "sans";
10-
}
11-
12-
html {
13-
font-size: 10px;
14-
background: url("https://wallpaperaccess.com/full/1524018.jpg") bottom center;
15-
overflow: hidden;
16-
user-select: none;
17-
background-position: center;
18-
background-attachment: fixed;
19-
padding-left: rgb(255, 0, 0);
20-
}
21-
22-
body,
23-
html {
1+
body,html {
242
margin: 0;
253
padding: 0;
26-
font-family: "sans";
4+
font-family: sans-serif;
5+
overflow: hidden;
6+
font-size: 10px;
7+
background-color: #19172e;
8+
user-select: none;
279
}
2810

29-
h1 {
30-
font-size: 5.5rem;
31-
color: #feffe2;
32-
font-family: "Arvo", cursive;
11+
h3,p{
12+
font-size: 3rem;
3313
text-align: center;
34-
text-shadow: 3px 0 #da0463;
35-
}
36-
37-
span {
38-
font-weight: 100;
39-
}
40-
41-
h4 {
42-
font-size: 2rem;
14+
color: white;
4315
text-align: center;
44-
top: 0;
45-
padding-top: 5px;
46-
color: #fff;
4716
}
4817

49-
.container {
50-
width: 95%;
51-
max-width: 1200px;
52-
margin: 0 auto;
53-
}
5418
.keys {
55-
display: grid;
56-
grid-template-columns: repeat(auto-fill, 125px);
19+
display: flex;
20+
flex: 1;
21+
min-height: 80vh;
22+
align-items: center;
5723
justify-content: center;
58-
grid-gap: 10px;
5924
}
6025

6126
.key {
62-
border: 10px solid white;
63-
font-size: 5rem;
64-
font-family: "Arvo", cursive;
65-
padding: 1rem 0.5rem;
66-
transition: all 0.07s ease;
67-
line-height: 1.5;
68-
font-weight: 900;
69-
color: #009dae;
70-
text-shadow: 3px 0 #e04db0;
71-
border-radius: 30px;
72-
display: inline-block;
73-
width: 125px;
74-
text-transform: uppercase;
75-
height: 125px;
27+
border: .4rem solid white;
28+
border-radius: .5rem;
29+
margin: 1rem;
30+
font-size: 1.5rem;
31+
padding: 1rem .5rem;
32+
transition: all .07s ease;
33+
width: 10rem;
7634
text-align: center;
77-
margin: 15px;
78-
background-color: white;
35+
color: white;
36+
background-color: #212121;
7937
}
8038

8139
.playing {
40+
transform: scale(1.1);
8241
border-color: #bb86fc;
83-
box-shadow: 0 0 2rem #bb86fc;
42+
box-shadow: 0 0 1rem #bb86fc;
8443
}
8544

8645
kbd {
8746
display: block;
88-
font-size: 4.3rem;
89-
font-family: "Arvo", cursive;
90-
color: #0f2c67;
91-
text-shadow: 3px 0 #dbedf3;
92-
cursor: pointer;
47+
font-size: 4rem;
9348
}
9449

9550
.sound {
9651
font-size: 1.2rem;
9752
font-weight: 700;
9853
text-transform: uppercase;
99-
letter-spacing: 0.1rem;
100-
color: #483434;
54+
letter-spacing: .1rem;
55+
color: #bb86fc;
10156
}
10257

103-
footer {
104-
text-align: center;
105-
color: white;
106-
font-size: 1.5rem;
107-
position: absolute;
108-
left: 0;
109-
right: 0;
110-
bottom: 0;
111-
margin-bottom: 0;
112-
padding: 5px;
58+
kbd{
59+
cursor: pointer;
11360
}
11461

115-
footer a:visited {
116-
color: inherit;
62+
footer{
63+
text-align: center;
64+
color: #fff;
11765
}
66+
67+
a{
68+
color: #fff;
69+
}

‎01 - Drum Kit/utils/util.js‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎15 - Joke Generator/script.js‎

Lines changed: 2 additions & 2 deletions

0 commit comments

Comments
 (0)