freeCodeCamp.org-Front-End-Dev-Libraries/Drum-Machine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved responsiveness on small screens

Browse Source 
* better responsiveness and alignment especially on narrower screens
* removed rounded borders for drum pads and main card
This commit is contained in:
Manish 2022-07-03 20:41:18 +10:00
parent 74bf954cfd
commit 135e6597c4
4 changed files with 149 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
drum-machine/public/index.html
View File

@ -36,5 +36,6 @@
To begin the development, run `npm start` or `yarn start`. To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> -->
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body> </body>
</html> </html>

134
drum-machine/src/App.js
View File

@ -123,28 +123,22 @@ class App extends React.Component {
} }
render() { render() {
const drumPadRows = this.state.drumPadKeys.map((row, rowIndex) => { const drumPadKeys = [];
return ( this.state.drumPadKeys.forEach((drumPad, index) => {
<div drumPadKeys.push(
className="row justify-content-center" <DrumPad
id={`drum-pads-row-${rowIndex}`} drumPadKey={drumPad.key}
> isKeyPressed={this.state.latestKeyPressed === drumPad.key}
{row.map((note) => { noteName={this.state.bank ? drumPad.altName : drumPad.name}
return ( audioSrc={this.state.bank ? drumPad.altAudioSrc : drumPad.audioSrc}
<DrumPad power={this.state.power}
drumPadKey={note.key} volume={this.state.volume}
isKeyPressed={this.state.latestKeyPressed === note.key} displayDrumPadPress={this.displayDrumPadPress}
noteName={this.state.bank ? note.altName : note.name} />
audioSrc={this.state.bank ? note.altAudioSrc : note.audioSrc}
power={this.state.power}
volume={this.state.volume}
colSize={Math.trunc(12 / row.length || 1)}
displayDrumPadPress={this.displayDrumPadPress}
/>
);
})}
</div>
); );
if (index % 3 === 2) {
drumPadKeys.push(<div className="w-100"></div>);
}
}); });
return ( return (
<div <div
@ -152,45 +146,43 @@ class App extends React.Component {
id="drum-machine" id="drum-machine"
> >
<div className="container"> <div className="container">
<div className="card"> <div
<div className="card-body text-black"> className="row p-4 justify-content-center justify-content-md-left bg-white text-black"
<div id="drum-pads-and-controls"
className="row justify-content-center justify-content-md-left" >
id="drum-pads-and-controls" <div className="col-md-8 col-12">
> <div className="row pe-auto pe-md-3">{drumPadKeys}</div>
<div className="col-md-7 col-12">{drumPadRows}</div> </div>
<div className="col-md-3 col-sm-6 col-8"> <div className="col-md-4 col-sm-6 col-8">
<div className="row h-100"> <div className="row h-100">
<div className="col-12 mt-2 mb-0 my-md-0"> <div className="col-12 mt-2 mb-0 my-md-0">
<p className="m-0">Power</p> <p className="m-0">Power</p>
<Form.Switch <Form.Switch
id="Power" id="Power"
checked={this.state.power} checked={this.state.power}
onChange={this.togglePower} onChange={this.togglePower}
></Form.Switch> ></Form.Switch>
</div> </div>
<p <p
className="col-12 my-2 my-md-auto panel-bg-color" className="col-12 my-2 my-md-auto panel-bg-color"
id="display" id="display"
> >
{this.state.displayPanelText} {this.state.displayPanelText}
</p> </p>
<div className="col-12 my-2 my-md-auto"> <div className="col-12 my-2 my-md-auto">
<p className="m-0">Volume</p> <p className="m-0">Volume</p>
<Form.Range <Form.Range
onChange={this.handleVolumeChange} onChange={this.handleVolumeChange}
value={this.state.volume} value={this.state.volume}
/> />
</div> </div>
<div className="col-12 my-0"> <div className="col-12 my-0">
<p className="m-0">Bank</p> <p className="m-0">Bank</p>
<Form.Switch <Form.Switch
id="bank" id="bank"
checked={this.state.bank} checked={this.state.bank}
onChange={this.toggleBank} onChange={this.toggleBank}
></Form.Switch> ></Form.Switch>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -237,14 +229,20 @@ class DrumPad extends React.Component {
render() { render() {
return ( return (
<button <div className="col-4 p-1">
id={this.props.drumPadKey} <button
className={`drum-pad btn col-${this.props.colSize} m-1 custom-el-color`} id={this.props.drumPadKey}
style={{ height: 80, width: 100, fontWeight: "bold" }} className={`drum-pad w-100 h-100 btn custom-el-color rounded-0`}
onClick={this.handleClick} style={{
> paddingTop: "20%",
{this.props.drumPadKey} paddingBottom: "20%",
</button> fontWeight: "bold",
}}
onClick={this.handleClick}
>
{this.props.drumPadKey}
</button>
</div>
); );
} }
} }

20
drum-machine/src/App.scss
View File

@ -10,9 +10,9 @@ $font-family-base: quicksand, roboto !default;
@import "~bootstrap/scss/bootstrap"; @import "~bootstrap/scss/bootstrap";
:root { :root {
--custom-color: #666; --custom-color: #27ae60;
--custom-darker-color: #555; --custom-darker-color: darken(#27ae60, 10%);
--custom-super-light-color: #eee; --custom-super-light-color: fade-out(#27ae60, 0.9);
} }
$CustomColor: var(--custom-color); $CustomColor: var(--custom-color);
@ -55,3 +55,17 @@ $CustomSuperLightColor: var(--custom-super-light-color);
color: black; color: black;
border: 1px solid $CustomColor; border: 1px solid $CustomColor;
} }
/*@media (min-width: 576px) {
.drum-pad {
width: 100px;
height: 80px;
}
}
@media (max-width: 576px) {
.drum-pad {
width: 70px;
height: 56px;
}
}*/

137
drum-machine/src/drumPadKeys.js
View File

@ -1,74 +1,67 @@
export const drumPadKeys = [ export const drumPadKeys = [
[ {
{ key: "Q",
key: "Q", name: "Heater 1",
name: "Heater 1", altName: "Chord 1",
altName: "Chord 1", audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3",
audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3", altAudioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3",
altAudioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3", },
}, {
{ key: "W",
key: "W", name: "Heater 2",
name: "Heater 2", altName: "Chord 2",
altName: "Chord 2", audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3",
audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3", altAudioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3",
altAudioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3", },
}, {
{ key: "E",
key: "E", name: "Heater 3",
name: "Heater 3", altName: "Chord 3",
altName: "Chord 3", audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3",
audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3", altAudioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3",
altAudioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3", },
}, {
], key: "A",
[ name: "Heater 4",
{ altName: "Shaker",
key: "A", audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3",
name: "Heater 4", altAudioSrc:
altName: "Shaker", "https://s3.amazonaws.com/freecodecamp/drums/Give_us_a_light.mp3",
audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3", },
altAudioSrc: {
"https://s3.amazonaws.com/freecodecamp/drums/Give_us_a_light.mp3", key: "S",
}, name: "Clap",
{ altName: "Open HH",
key: "S", audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3",
name: "Clap", altAudioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3",
altName: "Open HH", },
audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3", {
altAudioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3", key: "D",
}, name: "Open HH",
{ altName: "Closed HH",
key: "D", audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3",
name: "Open HH", altAudioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Bld_H1.mp3",
altName: "Closed HH", },
audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3", {
altAudioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Bld_H1.mp3", key: "Z",
}, name: "Kick n' Hat",
], altName: "Punchy Kick",
[ audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3",
{ altAudioSrc:
key: "Z", "https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3",
name: "Kick n' Hat", },
altName: "Punchy Kick", {
audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3", key: "X",
altAudioSrc: name: "Kick",
"https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3", altName: "Side Stick",
}, audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3",
{ altAudioSrc: "https://s3.amazonaws.com/freecodecamp/drums/side_stick_1.mp3",
key: "X", },
name: "Kick", {
altName: "Side Stick", key: "C",
audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3", name: "Closed HH",
altAudioSrc: altName: "Snare",
"https://s3.amazonaws.com/freecodecamp/drums/side_stick_1.mp3", audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3",
}, altAudioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3",
{ },
key: "C",
name: "Closed HH",
altName: "Snare",
audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3",
altAudioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3",
},
],
]; ];