Tell us what’s happening:
When I use the keydown eventListener it prints tens to hundreds logs of the keypresses. I knew about React logging it twice but there is clearly something wrong here. Am I missing something?
Also, sometimes you can hear the buttons firing multiple times (only on keypresses, clicking them is fine tho)
###Your project link(s)
https://mchuachong.github.io/cc_drums/
<!--App-->
import Button from './Button'
import './App.css'
import { useState} from 'react'
import Slider from './Slider.tsx'
import {Heater_1,Heater_2,Heater_3,Heater_4,Clap,Closed_HH,Open_HH,Kick,KicknHat} from './audio/index.tsx'
const App = () => {
const [volume,setVolume] = useState(25);
const [pressedKey,setPressedKey] = useState ('');
const handleKeyDown = (e:any) => {
setPressedKey(e.key);
console.log(e.key)};
const handleKeyUp = () => {
setPressedKey('');}
/* useEffect(()=>{
document.addEventListener("keydown",handleKeyDown);
return document.removeEventListener("keydown",handleKeyDown);},[])
*/
document.addEventListener("keydown",handleKeyDown);
document.addEventListener("keyup",handleKeyUp);
return (
<div id="drum-machine">
<div id="soundCont">
<div className="btnRow">
<Button audio={Heater_1} ckey="7" pressedKey={pressedKey} volume={volume}/><Button audio={Heater_2} pressedKey={pressedKey} ckey="8" volume={volume}/><Button volume={volume} ckey="9" pressedKey={pressedKey} audio={Heater_3}/>
</div>
<div className="btnRow">
<Button volume={volume} ckey="4" pressedKey={pressedKey} audio={Heater_4}/><Button volume={volume} pressedKey={pressedKey} ckey="5" audio={Clap}/><Button volume={volume} ckey="6" pressedKey={pressedKey} audio={Closed_HH}/>
</div>
<div className="btnRow">
<Button volume={volume} ckey="1" pressedKey={pressedKey} audio={Open_HH}/><Button volume={volume} pressedKey={pressedKey} ckey="2" audio={Kick}/><Button volume={volume} ckey="3" pressedKey={pressedKey} audio={KicknHat}/>
</div>
</div>
<div id="rightCont">
<div id="slider"><Slider volume={volume} setVolume={setVolume} setPressedKey={setPressedKey}/></div>
<div id="display"></div>
</div>
</div>
)
}
export default App
<!--Button-->
const Button = ({audio,volume,ckey,pressedKey}:any) => {
const handleClick = () => {
const audioFile = new Audio (audio);
audioFile.volume=volume/100;
audioFile.play();
//Not this, I tried
document.getElementById("display")!.innerHTML=`<div>${dispUp(ckey)}</div>`;
document.getElementById(`${dispUp(ckey)}`)?.classList.add("on");
setTimeout(() => {
removeEff(ckey);
}, 200);
//
}
if(pressedKey===ckey){handleClick();}
return (
<div className="drum-pad" id={dispUp(ckey)} onClick={handleClick}>{ckey}</div>
)
}
const dispUp = (prompt:any) => {
switch (prompt) {
case '1':
return "Open HH"
case '2':
return "Kick"
case '3':
return "Kick n' Hat"
case '4':
return "Heater-4"
case '5':
return "Clap"
case '6':
return "Closed HH"
case '7':
return "Heater-1"
case '8':
return "Heater-2"
case '9':
return "Heater-3"
}
}
const removeEff = (c:any) => {
document.getElementById(`${dispUp(c)}`)?.classList.remove("on");
}
export default Button
<!-- Slider -->
const Slider = ({volume,setVolume,setPressedKey}:any) =>{
const handleChange = (e:any) => {
setVolume(e.target.value);
setPressedKey('');
}
return <div id="volCont">
<input id="volume" type="range" onChange={handleChange} min="0" max="100" value={volume} list="values"></input>
<datalist id="values">
<option value="0" label="0"></option>
<option value="12.5" label="12.5"></option>
<option value="25" label="25"></option>
<option value="37.5" label="37.5"></option>
<option value="50" label="50"></option>
<option value="62.5" label="62.5"></option>
<option value="75" label="75"></option>
<option value="87.5" label="87.5"></option>
<option value="100" label="100"></option>
</datalist>
</div>
}
export default Slider
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36
Challenge Information:
Front End Development Libraries Projects - Build a Drum Machine
