Following the advice under Thinking In React…
I’ve built out my UI first, with no real functionality to anything yet.
Now that you have your component hierarchy, it’s time to implement your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It’s best to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We’ll see why.
Passing 5 out of 8, for the DrumMachine at FreeCodeCamp.com
I’m trying to work on alignment versus horizontal and vertical spacing. I’m using React-BootStrap. At first, I had them in button groups but there was no space between them horizontally. So I took the groupings out and put break tags between each row. If I put 2 break tags it’s way too wide, but no break tag and it’s all on one row. I also tried putting justify or className="justify-content-center" on the Fragments but I’ve not noticed any difference from that. Now I’m thinking about putting the button groups back on and trying combinations of margin or padding. I’m sure there’s an industry best practice for this common scenario, but I must be overlooking something.
repo
live demo, be sure to use the NavBar to get to Drum
use the hamburger menu on the top left and select Drum to run the test suite, they say it’s designed for Chrome and may encounter bugs in other browsers.
Drum.js
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { Button } from 'react-bootstrap';
import Card from 'react-bootstrap/Card';
export class Drum extends Component {
render() {
return (
<div id="drum-machine">
<h4>
<a
className="App-link"
href="https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-drum-machine"
target="_blank"
rel="noopener noreferrer"
title="Drum Machine"
>
<i className="fas fa-drum"></i> Drum Machine <i className="fas fa-drum"></i>
</a>
</h4>
<Card style={{ width: '18rem' }}>
<Card.Body className="bg-dark text-white">
<Card.Title id="display">
<h3>
Card Title
</h3>
</Card.Title>
</Card.Body>
</Card>
<Fragment>
<Button className="drum-pad" value={9} variant="success" id="q">
<h5>
Q
</h5>
<audio
id="Q"
className="clip"
src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav">
Your browser does not support the
<code>audio</code> element.
</audio>
</Button>
{' '}
<Button className="drum-pad" value={10} variant="success" id="w">
<h5>
W
</h5>
<audio
id="W"
className="clip"
src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav">
Your browser does not support the
<code>audio</code> element.
</audio>
</Button>
{' '}
<Button className="drum-pad" value={10} variant="success" id="e">
<h5>
E
</h5>
<audio
id="E"
className="clip"
src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav">
Your browser does not support the
<code>audio</code> element.
</audio>
</Button>
{' '}
</Fragment>
<br></br>
<Fragment>
<Button className="drum-pad" value={9} variant="success" id="a">
<h5>
A
</h5>
<audio
id="A"
className="clip"
src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav">
Your browser does not support the
<code>audio</code> element.
</audio>
</Button>
{' '}
<Button className="drum-pad" value={10} variant="success" id="s">
<h5>
S
</h5>
<audio
id="S"
className="clip"
src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav">
Your browser does not support the
<code>audio</code> element.
</audio>
</Button>
{' '}
<Button className="drum-pad" value={10} variant="success" id="d">
<h5>
D
</h5>
<audio
id="D"
className="clip"
src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav">
Your browser does not support the
<code>audio</code> element.
</audio>
</Button>
{' '}
</Fragment>
<br></br>
<Fragment>
<Button className="drum-pad" value={9} variant="success" id="z">
<h5>
Z
</h5>
<audio
id="Z"
className="clip"
src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav">
Your browser does not support the
<code>audio</code> element.
</audio>
</Button>
{' '}
<Button className="drum-pad" value={10} variant="success" id="x">
<h5>
X
</h5>
<audio
id="X"
className="clip"
src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav">
Your browser does not support the
<code>audio</code> element.
</audio>
</Button>
{' '}
<Button className="drum-pad" value={10} variant="success" id="c">
<h5>
C
</h5>
<audio
id="C"
className="clip"
src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav">
Your browser does not support the
<code>audio</code> element.
</audio>
</Button>
{' '}
</Fragment>
<h5>
<a
className="App-link"
href="https://www.twitch.tv/collections/Zh4cSjzCVBaSEw"
target="_blank"
rel="noopener noreferrer"
title="These Episodes on Twitch I build a drum machine for my freeCodeCamp projects with React-BootStrap"
>
<i className="fab fa-twitch"></i> These Episodes on Twitch <i className="fab fa-twitch"></i>
</a>
</h5>
</div>
);
}
}
export default Drum;
