Tell us what’s happening:
My button elements ignored the grid-row. They take the previous button element as the beginning point.
Why is it like this?
(I also attached my codepen link below)
Many thanks!
Your code so far
const bankOne = [
{
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"
}
];
class DrumKey extends React.Component {
render() {
return (
<div className="drum-pad">
<button
name={this.props.name}
id={this.props.id}
onClick={this.props.onClick}
>
{this.props.name}
</button>
<audio
id={this.props.name}
className="clip"
src={this.props.src}
></audio>
</div>
);
}
}
/*function DrumKey (props){
return (
<div className="drum-pad" >
<button id={props.id}>{props.name}</button>
<audio id={props.name} className="clip" src={props.src}>
</audio>
</div>
)
}*/
class App extends React.Component {
constructor() {
super();
this.state = {
display: "Press to play",
bank: bankOne
};
this.handleClick = this.handleClick.bind(this);
this.handleKeyPress = this.handleKeyPress.bind(this);
}
handleClick(e) {
const { name, id } = e.target;
const mySrc = this.state.bank.find((x) => {
return x.keyTrigger === name;
});
const sound = document.getElementById(mySrc.keyTrigger);
sound.currentTime = 0;
sound.play();
this.setState({
display: "Currnt Key: " + id
});
}
componentDidMount() {
document.addEventListener("keydown", this.handleKeyPress);
}
componentWillUnmount() {
document.removeEventListener("keydown", this.handleKeyPress);
}
handleKeyPress(e) {
const { keyCode } = e;
const itemToPlay = this.state.bank.filter((x) => {
return keyCode === x.keyCode;
});
const soundToPlay = document.getElementById(itemToPlay[0].keyTrigger);
soundToPlay.currentTime = 0;
soundToPlay.play();
this.setState({
display: "Currnt Key: " + itemToPlay[0].id
});
}
render() {
const KeyComponent = this.state.bank.map((item) => (
<DrumKey
key={item.id}
name={item.keyTrigger}
id={item.id}
src={item.url}
keyCode={item.keyCode}
onClick={this.handleClick}
/>
));
return (
<div id="drum-machine">
<h1>Drum Machine</h1>
<div id="display">
<p>{this.state.display}</p>
</div>
<div> {KeyComponent} </div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
#root {
margin: 0;
padding: 0;
}
#display {
background: lightpink;
display: flex;
justify-content: center;
}
.drum-pad {
margin: 0;
padding: 0;
background: lightblue;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 1rem;
}
#Heater-1 {
background: lightpink;
grid-row: 2/3;
// button elements seems not working well with grid-row
grid-column: 5/6;
}
#Heater-2 {
background: lightpink;
grid-column: 5/6;
}
#Heater-3 {
grid-column: 5/6;
}
#Heater-4 {
grid-column: 5/6;
}
#Clap {
grid-row: 1/5;
grid-column: 6/7;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.122 Safari/537.36.
Challenge: Truncate a String
Link to my codepen: