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:
