Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/simonapiz/drum-machine

A Drum Machine app
https://github.com/simonapiz/drum-machine

freecodecamp-project html-css javascript libraries react redux redux-toolkit webapp

Last synced: 5 days ago
JSON representation

A Drum Machine app

Host: GitHub
URL: https://github.com/simonapiz/drum-machine
Owner: SimonaPiz
Created: 2024-04-10T13:34:48.000Z (9 months ago)
Default Branch: main
Last Pushed: 2024-05-06T12:10:36.000Z (8 months ago)
Last Synced: 2024-05-07T12:04:13.786Z (8 months ago)
Topics: freecodecamp-project, html-css, javascript, libraries, react, redux, redux-toolkit, webapp
Language: JavaScript
Homepage: https://drum-machine-simonapiz.netlify.app/
Size: 254 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # Drum Machine

A Drum Machine app

>  ***FreeCodeCamp certification project***



## Links

- ➡ Solution URL: [Repo GitHub SimonaPiz/](https://github.com/SimonaPiz/Drum-Machine)

- ☑ Live Site URL: [drum-machine-simonapiz.netlify.app](https://drum-machine-simonapiz.netlify.app/)

## Table of contents

- [Links](#links)

- [Overview](#overview)

- [My process](#my-process)

- [Built with](#built-with)

- [Author](#author)

- [Acknowledgements](#acknowledgements)

## Overview

### Objective 

Build an app that is functionally similar to this: [drum-machine.freecodecamp]( https://drum-machine.freecodecamp.rocks/).



### User Stories:

   - [x] I should be able to see an outer container with a corresponding `id="drum-machine"` that contains all other elements.

   - [x] Within `#drum-machine` I can see an element with a corresponding `id="display"`.

   - [x] Within `#drum-machine` I can see 9 clickable drum pad elements, each with a class name of `drum-pad`, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. The drum pads MUST be in this order.

   - [x] Within each `.drum-pad`, there should be an HTML5 `audio` element which has a `src` attribute pointing to an audio clip, a class name of `clip`, and an id corresponding to the inner text of its parent `.drum-pad` (e.g. `id="Q"`, `id="W"`, `id="E"` etc.).

   - [x] When I click on a `.drum-pad` element, the audio clip contained in its child `audio` element should be triggered.

   - [x] When I press the trigger key associated with each `.drum-pad`, the audio clip contained in its child `audio` element should be triggered (e.g. pressing the `Q` key should trigger the drum pad which contains the string `Q`, pressing the `W` key should trigger the drum pad which contains the string `W`, etc.).

   - [x] When a `.drum-pad` is triggered, a string describing the associated audio clip is displayed as the inner text of the `#display` element (each string must be unique).

## My process

1. 🗂 Initialize the project on [GitHub](https://github.com/SimonaPiz/Drum-Machine) and use Git for log my commits and versioning my work.

2. ✏ I looked at the designs to start planning how to approach the project

  

3. ⚙ Implemented project features:

   ### - Create React Elements [☑issue #1](https://github.com/SimonaPiz/Drum-Machine/issues/1)

   ![React Components](https://github.com/SimonaPiz/Drum-Machine/assets/91121660/ec4a53a7-05ff-4056-a583-fcfabe3c7076)

  - [x] 🟧 Main component `id="drum-machine"`

    - [x] 🟩 pads container

      - [x] 🟦  9 clickable drum `.drum-pad` elements, , each with a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: Q, W, E, A, S, D, Z, X, C. The drum pads MUST be in this order.

      - [x] Within each `.drum-pad`, there should be an HTML5 `audio` element which has a `src` attribute pointing to an audio clip, a class name of `clip`, and an id corresponding to the inner text of its parent `.drum-pad` (e.g. `id="Q"`, `id="W"`, `id="E"` etc.).

    - [x] 🟥 element `id="display"`

   ### - Add Interactivity [☑issue #4](https://github.com/SimonaPiz/Drum-Machine/issues/4)

       

   - [x] Menage Status with Redux [☑ issue #5](https://github.com/SimonaPiz/Drum-Machine/issues/5)

   - [x] 🟦 When I click on a `.drum-pad` element, the audio clip contained in its child `audio` element should be triggered.

   - [x] 🟦 When I press the trigger key associated with each `.drum-pad`, the audio clip contained in its child `audio` element should be triggered (e.g. pressing the `Q` key should trigger the drum pad which contains the string `Q`, pressing the `W` key should trigger the drum pad which contains the string `W`, etc.).

   - [x] 🟥 When a `.drum-pad` is triggered, a string describing the associated audio clip is displayed as the inner text of the `#display` element (each string must be unique). 

      

   ### Test suite provided

   

   ✔ All tests passed

       

## Built with

- Semantic HTML5 markup

- CSS/SCSS custom properties

- Flexbox

- React 18

- Redux 5

- react-redux 9

- @reduxjs/toolkit 2

## Author

- Website - [Simona Pizio](https://github.com/SimonaPiz)

- Codepen - [SimonaPiz/pen](https://codepen.io/SimonaPiz/pen/qBweyZB)

- Freecodecamp - [freecodecamp/SimonaPiz](https://www.freecodecamp.org/SimonaPiz)

## Acknowledgements

This is a solution to the [Build a Drum Machine](https://www.freecodecamp.org/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine) project to earn the [Front End Development Libraries certification](https://www.freecodecamp.org/learn/front-end-development-libraries/) by FreeCodeCamp.