Drum Machine is working and according to userstorys, but fails in two tests!

JavaScript
1

Tell us what’s happening:
I get errors on

  • user story 5: ‘The
  • user story 7: ‘Each time a drum pad is triggered, a unique string should be displayed in the element with the id “display”: expected false to be true’
    Here is my display div:
<div id='display' >
          {sound}
        </div>

Here is the link to the code: https://codepen.io/fooTios/pen/vvoOav?editors=0010
Thanks
Your code so far

const data = [
 {
   id: "Q",
   bird: "Ovenbird", // ορτύκι
   url: "http://www.uwgb.edu/birds/wbba/species/audios/OVENBIRD.mp3"
 },
 {
   id: "W",
   bird: "Waxing", // ...
   url: "http://www.birds-of-denmark.dk/Sounds/Bombycilla.garrulus.wav"
 },
 {
   id: "E",
   bird: "Eagle", //
   url: "http://www.falknatur.se/sound/Hieraaetus.pennatus.wav"
 },
 {
   id: "A",
   bird: "Albatross",
   url:
     "https://www.vogelstimmen.info/Vogelstimmen_GRATIS/Schwarzbrauenalbatros_Diomedea_melanophris_R_AMPLE-E0114.mp3"
 },
 {
   id: "S",
   bird: "Sandpiper",
   url:
     "https://www.vogelstimmen.info/Vogelstimmen_GRATIS/Terekwasserlaeufer_Xenus_cinereus_G_AMPLE-E0574.mp3"
 },
 {
   id: "D",
   bird: "Dove",
   url:
     "https://www.vogelstimmen.info/Vogelstimmen_GRATIS/Turteltaube_Streptopelia_turtur_G_AMPLE-E07651R.mp3"
 },
 {
   id: "Z",
   bird: "Zebra-finch",
   url:
     "https://www.vogelstimmen.info/Vogelstimmen_GRATIS/Zebrafink_Taeniopygia_guttata_AMPLE-814752D.mp3"
 },
 {
   id: "X",
   bird: "Flamingo",
   url:"https://www.vogelstimmen.info/Vogelstimmen_GRATIS/Rosaflamingo_Phoenicopterus_ruber_R_AMPLE-E0183.mp3"
 },
 {
   id: "C",
   bird: "Canary",
   url: "http://www.animal-sounds.org/Air/Canary%20trills%20animals011.wav"
 }
];

const DrumPad = props => {
 const audio = React.useRef(null);

 React.useEffect(() => {
   document.addEventListener("keydown", handleKeydown);
   window.focus();

   return () => document.removeEventListener("keydown", handleKeydown);
 });

 const handleKeydown = event => {
   if (event.keyCode === props.id.charCodeAt()) {
     audio.current.play();
     audio.current.time = 0;
     return props.handleKeydown();
   } else {
     return true;
   }
 };

 const handleClick = event => {
   audio.current.play();
   audio.current.time = 0;
   return props.onClick();
 };

 return (
   <div className="drum-pad" id={props.id + 1}>
     <button className="drum-pads"  id={props.id} onClick={handleClick}>
       {props.id}
     </button>
     <audio
       ref={audio}
       className="clip"
       src={props.url}
       id={props.id}
     ></audio>
   </div>
 );
};

function App() {
 const [sound, setSound] =React.useState("");

 const handleClick = letter => {
   setSound(letter);
 };

 return (
   <div style={styles.container}>
     {/* <h1>Drum machine</h1> */}
     <div id="drum-machine">
       <div id='display' >
         {sound}
       </div>
       <div style={styles.container}>
         {data.map((pad, i) => (
           <DrumPad
             key={pad.id + i}
             id={pad.id}
             url={pad.url}
             handleKeydown={() => handleClick(pad.bird)}
             onClick={() => handleClick(pad.bird)}
           />
         ))}
       </div>
     </div>
   </div>
 );
}

const styles = (StyleSheet = {
 container: {
   display: "flex",
   flexWrap: "wrap",
   justifyContent: "center",
   alignItems: "center"
 }
});

ReactDOM.render(
 <App />,
 document.getElementById('root')

);Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36.

Challenge: Build a Drum Machine

Link to the challenge:

2

You’ve got an extra element in your .drum-pad structure

<div class="drum-pad" id="E1">
	<button class="drum-pads" id="E">E</button>
	<audio class="clip" src="http://www.falknatur.se/sound/Hieraaetus.pennatus.wav" id="E"></audio>
</div>
  1. 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.
1 Like
3

Hey thanks Annestezia, it gets 8/8 now.
Happy coding :slight_smile:

1 Like