freeCodeCamp - Front End Development Libraries Project

Build a Drum Machine

This is a solution to the Build a Drum Machine, third of 5 projects to earn the Front End Development Libraries certification. FreeCodeCamp's mission is to help people learn to code for free.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Fulfill the user stories and get all of the tests to pass. You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project.

Screenshot

Links

• Solution URL: https://github.com/PavlinaPs/react-drum-machine
• Live Site URL: https://pavlinaps.github.io/react-drum-machine/

My process

Built with

• React - JS library
• mobile first approach

What I learned

The biggest challenge was to connect the locally stored audio file to the App. There isn't much help on the internet. When I included a link to an online file, it worked fine. In the end I figured it out this way, although I am not sure it is correct.

const bankOneData = [
  {
    key: "Q",
    code: "KeyQ",
    id: "cowbell",
    audio: require("../assets/audio/bankOne/mixkit-cowbell-sharp-hit-1743.wav"),
  },

I created a shared css file with custom variables and imported it to components where needed. Every component has its own css file as well. First I wanted to use Sass, but with these modular css files and in such a small project I decided against it. Of course I could have used mixins with Sass, but again, such a small project is fine without it.

import React from "react";
import "../shared.css";
import "./BankSwitch.css";

I learned to style a button when not disabled:

.switch-toggle-button:not(:disabled):hover {
  filter: drop-shadow(0.2rem 0.2rem 0.3rem var(--color-dark));
}

And when it is disabled:

.switch-toggle-button:disabled {
  background-color: rgba(239, 239, 239, 0.3);
  color: rgba(16, 16, 16, 0.3);
}

Continued development

I need to improve in React.js alone and in combination with Bootstrap & Sass customizations or Tailwind and code more complicated projects.

I would also like to code this project with Redux.

Useful resources

• create-react-app and Sass - set up documentation
• OhSnap! Sass Folder Structure For React
• React Folder Structure in 5 Steps [2022]
• how to use map in react to create multiple component? on Stack Overflow
• Require file with a variable in React JS on Stack Overflow
• onKeyPress Vs. onKeyUp and onKeyDown on Stack Overflow
• Creating A Custom Range Input That Looks Consistent Across All Browsers

Author

• Website - My portfolio
• freeCodeCamp - @pavlina1
• Frontend Mentor - @PavlinaPs
• Codewars - PavlinaPs
• Twitter - @PPsarsky

Acknowledgments

It is great that I can learn to code with freeCodeCamp. I really appreciate what they are doing for the coding community. The projects are all very useful for me. All of them. Thank you!