Hello i completed my Drum Machine but i would like to invite you to check the behavior of the bundle.js, it is a little bit wear. i left the link here. I hope you like it and all your opinions are importante and will helpme to improve my work.
3 Likes
Pretty cool! I would
finish the rest of the test cases and add texts to the pads so that I can read before playing them.
Good luck 
I agree with @shimphillip It’s very pretty, and I can see the name on the display. But you are only passing 2 out of 8 tests.
Start with requirement 3.
Within #drum-machine I can see 9 clickable “drum pad” elements, each with a class name of “drum-pad”, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: Q, W, E, A, S, D, Z, X, C. The drum pads MUST be in this order.
It’s going to be great when you are finished.
ahh ok i forgot it…!! thanks
Thanks for your opinion but ther is a problem. I know that i must to wriht the letters, with it the people can know that pressing a key can make music, but i thought i could feel me free to make a design a bit minimal, and for the other hand, the result is the same, the logic i used it is not the same thar the bundle.js requires , but i dont understand, if you want to see statics button why i have learned to work with react, i made the buttons with map, and that is why the script dont want to recognize my buttons… What is more important to make what the scrit says or to practice with react and the libraries. I think that the logic of my work is fine and the result is pretty close, i really dont understand the point. thanks
i finished it. the bundle js dont give me the 8 points because i decided to use new Audio from js to make the audio…, but i think that the end is the same. It has the letters already, Thanks for the help.
Hi i fixed the problem. the other aspects from the bundle.js is because the audio. I decided to make the audio with JS directly. I feel my self more confortable working as much as possible with js. i used for that new Audio from JS directly and thats why bundlejs dont give the 8 points. Thanks for your comments. I really appreciate that. Thanks and happy coding
I totally understand your frustration. I would prefer to do some of these challenges in a different format or with a different logic.
I think the challenges are three-fold:
Following a specific format such as a team would follow shows that we can work well with others.
It also shows us one way to code that is helpful for those who don’t know where to start.
And it still allows us room to be creative.
You will need to pass all of the tests to get credit for it.
I don’t understand what you mean by making the audio directly in JavaScript. You can grab some sounds free online at sites such as looperman.
mmm ok, a bit disappointing, i thought it wont be just a one way in programming, or you must to do like that to receive the credits, i will try it better.
@rubendmatos1985
It’s only with these challenges that we have to behave.
You can still create it your way for your personal portfolio at a different Pen. But keep the fCC approved project for your cert.
VERY VERY VERY COOL. NICE COLOR LAY OUT.
VERY WELL done USING vanilla Javascript.
1 Like
I did it with react and vanilla js. I will make it again but. I did not know that the bundle js script would be so important. I thought that the final result was more important. But ok thanks i will do it this way. For me the most important it is not a paper. It is the experience. Thanks a lot. You helped me to improve my self
thanks i love vanila js. I think it is amazing
yes it is true but i was answering something. Could you please tell me if i must obligatory to make the project according with the script bundle.js. Because the problem is that it has a logic but i like to think by my self, to improve my logic. I am doing right or i must to make the projects according with the bundle.js??
yes but someone told me that if i dont pass the test it is not worth it but i think that the final result it is the most important. The problem is that according the logic i used i make the audios of the pads using const sound = new Audio and the script it is looking for a tag and that is the reason why it is not working
You are correct. It is looking for a “drum-pad” element that has a “ID” of a specific letter with a class of “clip”, and a corresponding child “audio” element.
If you can find a way to pull them altogether then you will pass your test and still make the React project closer to your certificate.
The purpose of this section in the curriculum is to show the work with other libraries besides vanilla JavaScript.
@rubendmatos1985, I apologize. You and @camperextraordinaire were correct in that React is only a suggestion.
You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks.
However, you do still need to add the class of “clip” into the audio src tag.