Improved responsiveness on small screens

* better responsiveness and alignment especially on narrower screens
* removed rounded borders for drum pads and main card

drum-machine/public/index.html

@@ -36,5 +36,6 @@
       To begin the development, run `npm start` or `yarn start`.
       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>
 </html>

drum-machine/src/App.js

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

drum-machine/src/App.scss

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

drum-machine/src/drumPadKeys.js

@@ -1,74 +1,67 @@
 export const drumPadKeys = [
-  [
-    {
-      key: "Q",
-      name: "Heater 1",
-      altName: "Chord 1",
-      audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3",
-      altAudioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3",
-    },
-    {
-      key: "W",
-      name: "Heater 2",
-      altName: "Chord 2",
-      audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3",
-      altAudioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3",
-    },
-    {
-      key: "E",
-      name: "Heater 3",
-      altName: "Chord 3",
-      audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3",
-      altAudioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3",
-    },
-  ],
-  [
-    {
-      key: "A",
-      name: "Heater 4",
-      altName: "Shaker",
-      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",
-      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",
-      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:
-        "https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3",
-    },
-    {
-      key: "X",
-      name: "Kick",
-      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: "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",
-    },
-  ],
+  {
+    key: "Q",
+    name: "Heater 1",
+    altName: "Chord 1",
+    audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3",
+    altAudioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3",
+  },
+  {
+    key: "W",
+    name: "Heater 2",
+    altName: "Chord 2",
+    audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3",
+    altAudioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3",
+  },
+  {
+    key: "E",
+    name: "Heater 3",
+    altName: "Chord 3",
+    audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3",
+    altAudioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3",
+  },
+  {
+    key: "A",
+    name: "Heater 4",
+    altName: "Shaker",
+    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",
+    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",
+    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:
+      "https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3",
+  },
+  {
+    key: "X",
+    name: "Kick",
+    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: "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",
+  },
 ];