Skip to content

Commit b35717c

Browse files
SANTHOSH17-DOTSANTHOSH17-DOT
committed
34 folder added successfully
1 parent 800a00f commit b35717c

31 files changed

Lines changed: 517 additions & 235 deletions

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎30DaysOfJavaScript/assets/34.png‎

1.23 MB
Loading

‎34 - Virtual Piano/app.js‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
const keys = document.querySelector('#keys');
2+
const volPlus = document.querySelector('.fa-plus')
3+
const volMinus = document.querySelector('.fa-minus');
4+
const volume = document.querySelector('#volume')
5+
6+
volPlus.addEventListener('click', () => {
7+
if (volume.textContent != 2) {
8+
volume.textContent = parseInt(volume.textContent) + 1;
9+
}
10+
11+
})
12+
volMinus.addEventListener('click', () => {
13+
if (volume.textContent != 0) {
14+
volume.textContent = parseInt(volume.textContent) - 1;
15+
}
16+
17+
})
18+
const notBlack = [4, 7, 11, 14];
19+
var j = 1;
20+
21+
for (let i = 0; i < 14; i++) {
22+
let whitekey = document.createElement('div');
23+
whitekey.classList.add('whiteKeys', 'key');
24+
whitekey.classList.add(`key${j}`)
25+
whitekey.style.left = (i * 7) + '%';
26+
keys.appendChild(whitekey);
27+
j += 1
28+
}
29+
for (let i = 1; i < 14; i++) {
30+
if (!notBlack.includes(i)) {
31+
let blackKey = document.createElement('div');
32+
blackKey.classList.add('blackKeys', 'key');
33+
blackKey.classList.add(`key${j}`)
34+
blackKey.style.left = (i * (7) - 1.75) + '%'
35+
keys.appendChild(blackKey);
36+
j += 1;
37+
}
38+
}
39+
40+
41+
42+
var key = Array.from(document.querySelectorAll('.key'))
43+
44+
key.forEach(k => {
45+
k.addEventListener('click', () => {
46+
47+
let keySound = new sound(`sounds/${k.classList[2]}.mp3`, parseInt(volume.textContent))
48+
keySound.play();
49+
})
50+
})
51+
var keyPressed = {};
52+
const keyPress = (event) => {
53+
let keyCode = event.keyCode;
54+
let keyDown = (event.type == 'keydown');
55+
56+
keyPressed[keyCode] = keyDown;
57+
58+
if (keyPressed[37]) {
59+
const eventVal = {
60+
'65': 'key1',
61+
'83': 'key2',
62+
'68': 'key3',
63+
'70': 'key4',
64+
'71': 'key5',
65+
'72': 'key6',
66+
'74': 'key7'
67+
}
68+
Object.keys(eventVal).forEach(key => {
69+
70+
if (keyPressed[key]) {
71+
document.querySelector(`.${eventVal[key]}`).style.background = 'linear-gradient(to bottom, rgb(248, 248, 248), rgb(238, 238, 238), grey)';
72+
document.querySelector(`.${eventVal[key]}`).style.boxShadow = ' 2px -2px black inset, -4px -2px black inset';
73+
setTimeout(() => {
74+
document.querySelector(`.${eventVal[key]}`).style.background = 'white';
75+
document.querySelector(`.${eventVal[key]}`).style.boxShadow = ' none';
76+
}, 250)
77+
let keySound = new sound(`sounds/${eventVal[key]}.mp3`, parseInt(volume.textContent))
78+
keySound.play();
79+
}
80+
81+
})
82+
83+
}
84+
if (keyPressed[39]) {
85+
const eventVal = {
86+
'65': 'key8',
87+
'83': 'key9',
88+
'68': 'key10',
89+
'70': 'key11',
90+
'71': 'key12',
91+
'72': 'key13',
92+
'74': 'key14'
93+
}
94+
Object.keys(eventVal).forEach(key => {
95+
96+
if (keyPressed[key]) {
97+
document.querySelector(`.${eventVal[key]}`).style.background = 'linear-gradient(to bottom, rgb(248, 248, 248), rgb(238, 238, 238), grey)';
98+
document.querySelector(`.${eventVal[key]}`).style.boxShadow = ' 2px -2px black inset, -4px -2px black inset';
99+
setTimeout(() => {
100+
document.querySelector(`.${eventVal[key]}`).style.background = 'white';
101+
document.querySelector(`.${eventVal[key]}`).style.boxShadow = ' none';
102+
}, 250)
103+
let keySound = new sound(`sounds/${eventVal[key]}.mp3`, parseInt(volume.textContent))
104+
keySound.play();
105+
}
106+
107+
})
108+
109+
}
110+
111+
const eventVal = {
112+
'81': 'key15',
113+
'87': 'key16',
114+
'69': 'key17',
115+
'82': 'key18',
116+
'84': 'key19',
117+
'89': 'key20',
118+
'85': 'key21',
119+
'73': 'key22',
120+
'79': 'key23',
121+
'80': 'key24'
122+
}
123+
Object.keys(eventVal).forEach(key => {
124+
125+
if (keyPressed[key]) {
126+
document.querySelector(`.${eventVal[key]}`).style.background = 'black';
127+
setTimeout(() => { document.querySelector(`.${eventVal[key]}`).style.background = 'rgb(71, 71, 71)'; }, 250)
128+
let keySound = new sound(`sounds/${eventVal[key]}.mp3`, parseInt(volume.textContent))
129+
keySound.play();
130+
}
131+
132+
})
133+
134+
135+
136+
137+
}
138+
window.addEventListener('keydown', keyPress)
139+
140+
window.addEventListener('keyup', (event) => {
141+
142+
keyPressed[event.keyCode] = false;
143+
})
144+
145+
function sound(src, vol) {
146+
this.sound = document.createElement('audio')
147+
this.sound.src = src;
148+
this.sound.setAttribute("preload", "auto");
149+
this.sound.setAttribute("controls", "none");
150+
this.sound.volume = vol * 0.5;
151+
this.sound.style.display = "none";
152+
document.body.appendChild(this.sound);
153+
this.play = function() {
154+
this.sound.play();
155+
}
156+
}

‎34 - Virtual Piano/assets/background1.jpg‎

1.61 MB
Loading

‎34 - Virtual Piano/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Piano</title>
9+
<link rel="stylesheet" href="style.css" type='text/css'>
10+
<link rel="icon" type='image/gif' href="background.jpg">
11+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
12+
</head>
13+
14+
<body>
15+
<div id='volumeBar'>
16+
<div><i class="fas fa-volume-up"></i></div>
17+
<div>
18+
<i class="fas fa-plus"></i>
19+
<span id='volume'>2</span>
20+
<i class="fas fa-minus"></i></div>
21+
</div>
22+
23+
<div id='piano'>
24+
<div id='keys'></div>
25+
</div>
26+
<script src="app.js"></script>
27+
</body>
28+
29+
</html>

‎34 - Virtual Piano/sounds/key1.mp3‎

224 KB
Binary file not shown.

‎34 - Virtual Piano/sounds/key10.mp3‎

224 KB
Binary file not shown.

‎34 - Virtual Piano/sounds/key11.mp3‎

224 KB
Binary file not shown.

‎34 - Virtual Piano/sounds/key12.mp3‎

224 KB
Binary file not shown.

‎34 - Virtual Piano/sounds/key13.mp3‎

224 KB
Binary file not shown.

0 commit comments

Comments
 (0)