diff --git a/jsdrum/.vscode/settings.json b/jsdrum/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/jsdrum/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/jsdrum/01 - JavaScript Drum Kit_sounds_boom.wav b/jsdrum/01 - JavaScript Drum Kit_sounds_boom.wav new file mode 100644 index 00000000..8d6423bc Binary files /dev/null and b/jsdrum/01 - JavaScript Drum Kit_sounds_boom.wav differ diff --git a/jsdrum/01 - JavaScript Drum Kit_sounds_clap.wav b/jsdrum/01 - JavaScript Drum Kit_sounds_clap.wav new file mode 100644 index 00000000..ef952e5e Binary files /dev/null and b/jsdrum/01 - JavaScript Drum Kit_sounds_clap.wav differ diff --git a/jsdrum/01 - JavaScript Drum Kit_sounds_hihat.wav b/jsdrum/01 - JavaScript Drum Kit_sounds_hihat.wav new file mode 100644 index 00000000..885cb196 Binary files /dev/null and b/jsdrum/01 - JavaScript Drum Kit_sounds_hihat.wav differ diff --git a/jsdrum/01 - JavaScript Drum Kit_sounds_kick.wav b/jsdrum/01 - JavaScript Drum Kit_sounds_kick.wav new file mode 100644 index 00000000..8fe46dea Binary files /dev/null and b/jsdrum/01 - JavaScript Drum Kit_sounds_kick.wav differ diff --git a/jsdrum/01 - JavaScript Drum Kit_sounds_openhat.wav b/jsdrum/01 - JavaScript Drum Kit_sounds_openhat.wav new file mode 100644 index 00000000..50637521 Binary files /dev/null and b/jsdrum/01 - JavaScript Drum Kit_sounds_openhat.wav differ diff --git a/jsdrum/01 - JavaScript Drum Kit_sounds_ride (1).wav b/jsdrum/01 - JavaScript Drum Kit_sounds_ride (1).wav new file mode 100644 index 00000000..e5829dfe Binary files /dev/null and b/jsdrum/01 - JavaScript Drum Kit_sounds_ride (1).wav differ diff --git a/jsdrum/01 - JavaScript Drum Kit_sounds_ride.wav b/jsdrum/01 - JavaScript Drum Kit_sounds_ride.wav new file mode 100644 index 00000000..e5829dfe Binary files /dev/null and b/jsdrum/01 - JavaScript Drum Kit_sounds_ride.wav differ diff --git a/jsdrum/01 - JavaScript Drum Kit_sounds_snare.wav b/jsdrum/01 - JavaScript Drum Kit_sounds_snare.wav new file mode 100644 index 00000000..c4edfc75 Binary files /dev/null and b/jsdrum/01 - JavaScript Drum Kit_sounds_snare.wav differ diff --git a/jsdrum/bg.jpg b/jsdrum/bg.jpg new file mode 100644 index 00000000..630c5a03 Binary files /dev/null and b/jsdrum/bg.jpg differ diff --git a/jsdrum/bgr.jpg b/jsdrum/bgr.jpg new file mode 100644 index 00000000..cada88f3 Binary files /dev/null and b/jsdrum/bgr.jpg differ diff --git a/jsdrum/index.html b/jsdrum/index.html new file mode 100644 index 00000000..79da99fc --- /dev/null +++ b/jsdrum/index.html @@ -0,0 +1,66 @@ + + + + + + + + part1 + + +
+ +
USE OF EARPHONES IS MUST
+
Press the keys A , S ,D ,F....... ENJOY MUSIC
+ +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+ +
+ + + + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/jsdrum/main.js b/jsdrum/main.js new file mode 100644 index 00000000..063fcab1 --- /dev/null +++ b/jsdrum/main.js @@ -0,0 +1,31 @@ +// window.addEventListener('keydown', function(e) { +// // const audio = document.querySelector(`audio[data-key="${e.keycode}"]`); +// const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); +// if (!audio) return; +// audio.play(); +// audio.currentTime = 0; +// console.log(audio); +// }); + +function removeTransition(e) { + if (e.propertyName !== 'transform') return; + e.target.classList.remove('playing'); + } + +function playSound(e) { + const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); + const key = document.querySelector(`div[data-key="${e.keyCode}"]`); + if (!audio) return; + + key.classList.add('playing'); //changing the class of key div + audio.currentTime = 0; // it starts the music before the end of previous music + audio.play(); + } + + // the e represents event , here the key of keyboard keyCode is the property of event e + + const keys = Array.from(document.querySelectorAll('.key')); + keys.forEach(key => key.addEventListener('transitionend', removeTransition)); + + + window.addEventListener('keydown', playSound); //eventlistnersyntax addEventListener('event (i.e click ,keypress .key down ) , function due to that event ', playSound); \ No newline at end of file diff --git a/jsdrum/style.css b/jsdrum/style.css new file mode 100644 index 00000000..f368e77f --- /dev/null +++ b/jsdrum/style.css @@ -0,0 +1,74 @@ +.divine { + color: aqua; + background-image: url(bg.jpg); + height: 100vh; + width: 100%; + background-repeat: no-repeat; + background-size: cover; + + /* display: flex; */ + + /* flex-wrap: wrap; */ + + +} + +.heading { + text-align: center; + color: white; + background: rgba(0,0,0,0.4); + text-shadow: 0 0 .5rem black; + font-size: xx-large; +} + + .keys { + display: flex; + flex: 1; + min-height: 100vh; + align-items: center; + justify-content: center; + color: aqua; + background-image: url(bg.jpg); + height: 100vh; + width: 100%; + background-repeat: no-repeat; + background-size: cover; + + display: flex; + + flex-wrap: wrap; + + } + + .key { + border: .4rem solid black; + border-radius: .5rem; + margin: 1rem; + font-size: 1.5rem; + padding: 1rem .5rem; + transition: all .07s ease; + width: 5rem; + text-align: center; + color: white; + background: rgba(0,0,0,0.4); + text-shadow: 0 0 .5rem black; + + } + + .playing { + transform: scale(1.1); + border-color: #ffc600; + box-shadow: 0 0 1rem #ffc600; + } + + kbd { + display: block; + font-size: 4rem; + } + + .sound { + font-size: 1rem; + text-transform: uppercase; + letter-spacing: .1rem; + color: #ffc600; + }