Front End Development Libraries Projects - Build a Drum Machine

JavaScript
1

Tell us what’s happening:

I have written the code but do not understand why I do not recieve an output. Here is a link to my code pen (https://codepen.io/RDL123/pen/zYQOVBM)

Your code so far

<!DOCTYPE html>
<html lang ="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, intitial-scale =1.0"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
--> 
<div id="drummachine">
</div>
    <script type="text/babel" src="./index.js"></script>

const audioClips = [
  {
        keyCode: 81,
        keyTrigger: "Q",
        id: "Heater-1",
        url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
    }, {
        keyCode: 87,
        keyTrigger: "W",
        id: "Heater-2",
        url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3"
    }, {
        keyCode: 69,
        keyTrigger: "E",
        id: "Heater-3",
        url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3"
    }, {
        keyCode: 65,
        keyTrigger: "A",
        id: "Heater-4",
        url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3"
    }, {
        keyCode: 83,
        keyTrigger: "S",
        id: "Clap",
        url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"
    }, {
        keyCode: 68,
        keyTrigger: "D",
        id: "Open-HH",
        url: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"
    }, {
        keyCode: 90,
        keyTrigger: "Z",
        id: "Kick-n'-Hat",
        url: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"
    }, {
        keyCode: 88,
        keyTrigger: "X",
        id: "Kick",
        url: "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"
    }, {
        keyCode: 67,
        keyTrigger: "C",
        id: "Closed-HH",
        url: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"
    }]
      , t = [{
        keyCode: 81,
        keyTrigger: "Q",
        id: "Chord-1",
        url: "https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3"
    }, {
        keyCode: 87,
        keyTrigger: "W",
        id: "Chord-2",
        url: "https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3"
    }, {
        keyCode: 69,
        keyTrigger: "E",
        id: "Chord-3",
        url: "https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3"
    }, {
        keyCode: 65,
        keyTrigger: "A",
        id: "Shaker",
        url: "https://s3.amazonaws.com/freecodecamp/drums/Give_us_a_light.mp3"
    }, {
        keyCode: 83,
        keyTrigger: "S",
        id: "Open-HH",
        url: "https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3"
    }, {
        keyCode: 68,
        keyTrigger: "D",
        id: "Closed-HH",
        url: "https://s3.amazonaws.com/freecodecamp/drums/Bld_H1.mp3"
    }, {
        keyCode: 90,
        keyTrigger: "Z",
        id: "Punchy-Kick",
        url: "https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3"
    }, {
        keyCode: 88,
        keyTrigger: "X",
        id: "Side-Stick",
        url: "https://s3.amazonaws.com/freecodecamp/drums/side_stick_1.mp3"
    }, {
        keyCode: 67,
        keyTrigger: "C",
        id: "Snare",
        url: "https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3"
    },
  ];       
function DrumMachine() {
  return <div className="bg-info min-vh-100 text-white">
    <div className= "text-center">
      <h2>Drum Machine </h2>
      {audioClips.map(clip => (
        <Pad key={clip.id} clip={clip}/>
      ))}
      </div>
      </div>
}
function Pad({clip}) {
        const [active,setActive] = React.useState(false);
        
        React.useEffect(() =>  {
          document.addEventListener("keyDown",handlePressKey);
          return() => {
   document.removeEventListener("keyDown",handlePressKey);
          };
        }, []);
  const handleKeyPress = (e) => {
    if (e.keyCode === clip.keyCode) {
      playSound();
    }
  }
        
        const playSound = () => {
          const audioTag = document.getElementById(audio.keyTrigger);
          setActive(true);
          setTimeout(() => setActive(false), 200);
          audioTag.currentTime = 0;
          audioTag.play();
        } 
        
        return(
          <div onClick={playSound} className={'btn btn-secondary p-4 n-3 ${active && "btn-warning"}'}>
            <audio className="clip" id={clip.keyTrigger} src={clip.url}/>
            {clip.keyTrigger}
          </div>
            );
      }      
/*render() {
return( 

<div> <div className ="drumMachineApp" id="drummachine"
        <div id="display">
    <div className = "drumpad" id="Q" <audio className="clip" src='https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'></audio>
      <a href="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"> Heater-1 </a>
    </div>
    <div className = "drumpad" id="W" <audio className="clip" src='https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'></audio>
      <a href="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3"> Heater-1 </a></div>
    <div className = "drumpad" id="E"></div>
    <div className = "drumpad" id="A"></div>
    <div className = "drumpad" id="S"></div>
    <div className = "drumpad" id="D"></div>
    <div className = "drumpad" id="Z"></div>
    <div className = "drumpad" id="X"></div>
    <div className = "drumpad" id="C"></div>
        </div>
        /div>
  </div>
      );
      }
 ]
      } */    
 ReactDOM.render(<DrumMachine />, document.getElementById("drummachine"));

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36 Edg/124.0.0.0

Challenge Information:

Front End Development Libraries Projects - Build a Drum Machine

2

Hello;
You haven’t installed your dependencies correctly in CodePen. Additionally, you commented out CDN links; HTML CDN scripts will work, and other dependencies such as Babel are unnecessary since Babel is already installed in the CodePen template as a JS Processor.

resim
resim685×1042 52.7 KB

Try to install Babel standalone cdn again is making a conflict to compile to JS code properly. Also you don’t use Marked or Bootstrap too but I don’t know why you try to install it.

Also, your functions are not correctly ordered; you are calling the function before it is declared.

Furthermore, you are trying to reach an element by ID, but the audio element is not correct; it should be the same as your dynamic ID which comes from function variable.

As a result there is several mistake on there. If you try to find solution from other projects, please don’t, try to make it with your knowledge. If you don’t and try to make this project, sorry and you will find the right solution after this comment I guess.
Happy coding.
Good luck…

3

thank you. I understand everything you saying, your advice was what was necessary. I thought one of the libraries are missing so i used as much as I used before. I thought if put it libraries in pen settings I do not have to call it in the html.

4

Also the Bootstrap was used so that when I use //return


\ and input the background specs it inputs command…

5

I attempted to run the code through visual studio but the live studio doesn’t run the code either. The youtuber that suggested these methods used visual studio.

6

After your comment, I went to YouTube and searched for ‘Drum Machine,’ where I found numerous videos. Many of them utilized the keyCode for keyboard event listeners and had a same structure to your code.

It’s unacceptable to simply copy or seek direct solutions from videos or other projects. You need to solve this using your own knowledge. Copying will only make you a copycat, preventing you from truly solving real problems or developing your skills. Moreover, this behavior constitutes cheating and violates freeCodeCamp’s Academic Honesty Policy…

7

I tried my method first, i used his advice so i could proceed as well as other sources. Most of my understanding is from Java I learned in high school, the C++ I did at university, and I did python through IBM and now I started react through FreeCodeCamp. I need sources of information else I will never finish, the coursework provided is not enough , I won’t submit something that I don’t understand or can’t do myself. The engineers that run and maintain power stations read textbooks to understand blueprints information. It doesn’t mean I am copying and pasting.

Also the audioClip is mapped to clip where the clip is called in the function.
{audioClips.map(clip => (

))}

8

Watching YouTube ‘Drum Machine’ videos is not equivalent to studying textbooks or documentation. Engineers don’t learn how to maintain power stations directly from school; they first study mathematics, physics, electrical circuits, and other basics of electricity.

Similarly, FCC effectively teaches the basics of JavaScript and frontend libraries through real projects. However, this doesn’t mean you can accomplish everything solely with this knowledge. You can’t learn everything from lessons, it become endless education. But coding is endless learning path. Coding involve problem-solving, researching, and finding the right solutions for your projects!

If you need more resources, here are some additional sources:
JavaScript,
Babel,
React,
JS Function,
Codepen,
and this forum is wonderful source of solving to problems.

There’s an abundance of documentation and resources available online! However, what did you do? You went to YouTube and searched for a direct solution, even seeking a ‘textbook’ or ‘blueprint.’

You declared a function after calling it (a very basic JavaScript rule), tried to install Babel just like you saw in a YouTube video on VS Code, installed React 16 (an outdated version), and your audioClips object directly copied from someone else’s project without making any modifications, perhaps just changing a variable name.

Despite all this, you still can’t figure out what’s wrong because you lack basic JavaScript knowledge but are attempting to earn a frontend libraries certificate. Good luck, buddy…

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.