DrumKit | A Virtual Drumkit for the Enthusiastic Drummer | Frontend Framework library

Here's an interesting one for you all. I've found myself in a implementation conundrum.

I'm developing a booking app in Laravel that allows people to book rooms and equipment for spaces at specific times. The amount of equipment available is limited, so the amount of stock has to be queried in tandem with the time slots associated with the booking.

I thought I'd solved the problem by iterating through the 'other bookings' that occur at the same time and count up the items that are currently in use -> then check that against what's available in stock.

For 90% of my tests this was working fine but have just managed to find a bug that won't allow me to do this.

I am learning web development and right now i'm working on vanilla javascript. I'm following a class on Udemy and everything is going well but there is a challenge where we are supposed to build a drumkit so everytime we click on a button it should trigger a function. So the solution the instructor is giving is using a for loop

I recently have been learning more JavaScript as I am going to be using it a lot for an upcoming internship. The company recommended many different resources for me to look at, but a friend of mine also suggested this website:

https://javascript30.com/

I decided to give it a try and started yesterday on the first project which was a JavaScript drumkit.

So the overall project wasn't hard, but I noticed a little bug that was happening. So the project attaches a 'keydown' event listener to several different HTML elements that trigger when either ASDFGHJKJL are pressed. In addition to playing a sound, the listener also attaches a class to the element that adds a little effect to the key being pressed.

To remove the class, we attached a transitionend listener to the elements. So when the CSS property finishes the transition after the key is pressed, the class is then removed and the graphic goes back to normal in the browser.

Now if you press the keys slowly, it works perfectly fine. But I noticed that if you were to hold a key down for a second or two, it appears as though the class that gets added is never removed and the graphic is permanent. I then checked the console and noticed that the transitionend event never fires once it gets stuck like that.

Here is the code from the finished file.

I have trawled through the internet for a solution to this and I still don't understand why I am getting the following error message:

"Error: Main method not found in class DrumKit, please define the main method as: public static void main(String[] args) or a JavaFX application class must extend javafx.application.Application"

Here is my code:

DrumKit.java

I'm attempting to add a HTML/Javascript drumkit I've made to my Gatsby site. Currently, no sounds play when keys are pressed, and the promise returned from audio.play() hangs at "pending".

I've gotten this to work with basic HTML/JS as well as with a standard React app. But when trying to incorporate it into my Gatsby site, I run into the below issues with the returned promises, and no sounds play.

Here is the JSON object:

I'm attempting to make a drumkit with js. It functions fine with the keyboard, however, I want the pads to also be clickable. I've attempted adding onclick events to the 'key' elements in the hmtl, adding 'window.addEventListener('click', playSound);' with no success. JS Fiddle - https://jsfiddle.net/JosueOrNoSway/hps2q940/

In this code, when keyboard event "A" was pressed its keycode 65 should match the >audio tag's attribute data-key = "65" and play. But when I querySelector it returning me null in console log.

Following this drumkit tutorial but wanted to change it to where I could click instead of pressing key(in this example pressing A triggers the animation and sound). Tried changing the 'keydown' in the window.addEventListener to 'click' but nothing happened. What am I doing wrong?

Extra details if needed.There are two functions. The first one plays the corresponding audio tag that matches the keycode of the data-key div. The second function just returns the transformation in the css back to its original state.