Piano Scales And Chords

A helpful tool for Jon who is trying to teach himself how to play piano. This was a really fun little project to work on and the first project I created completely on my own.

Table of Contents

---

• General Info
• Technologies Used
• Features
• Screenshots
• Setup
• Dependencies
• Available Commands
• Usage
• Project Status
• Room for Improvement
• Acknowledgements
• Contact

General Information

---

Jon, a friend of mine, bought himself a new piano and is currently trying to teach himself how to play. He asked if I could come up with a simple application to help with his training, and so I obliged. This is a simple React made application to cycle through random chords and scales to test Jon's knowledge. I applied some basic styling imported from a Semantic UI stylesheet as well as using some Semantic UI-React components. The styling proved to be some of the trickiest tasks to get it to look exactly the way I wanted.

Tech Stack

---

Features

---

Note Card

• A card with the name of a note, indicates if the note is sharp or flat and in major or minor.
• You can personally choose if you want to play the chord of that note or the scale.

Start/Stop Button

• Starts the timer that switches the note card that is displayed.
• Press the start button to start the timer and the note changes depending on the time you have set.

Slider Timer

• Adjust the timer to specify how long you want the note to be displayed before the card changes to another note. Chords might be fast to play, but scales can take an extra second. You can play a few chords that change every 10 seconds then play a few scales that change every 30 seconds. Change the time between cards as you like.
• You can adjust the timer before you press start, or while the note cards are changing.
• You can start and stop the time with the spacebar and adjust the time slider with arrow keys.

Hint Button

• If you are stuck thinking of the chord or scale that matches the note, click on the hint button to reveal an image of both the chord and the scale - chords in red, scales in blue.

Custom greeting and fun fact

• Enjoy a personalised and randomised greeting on each load & refresh AND learn a little with a randomly generated music fact each time you load the app:

Setup

---

Run Locally

1. Clone repo locally
2. Run npm install in your bash/command line
3. Run npm start in your bash/command line
4. Open http://localhost:3000 to view it in the browser.

Available Commands

In the project directory, you can run:

"npm start" : "react-scripts start",

The app is built using create-react-app so this command Runs the app in Development mode. Open http://localhost:3000 to view it in the browser. You will also see any lint errors in the console.

Usage

---

This is really a basic flash card memory game and could be changed to show anything on the card. By updating the db.js you can change the chordsAndScales array to hold anything you like:

export const chordsAndScales = { AMJ: { name: 'A MAJOR', chordImage: A_majorChord, scaleImage: A_majorScale, }, ...

   export const plantCare = {
 p1: {
   name: 'Daisy',
   sunRequirements: 'Full Sun',
   waterNeeds: 'Once a week',
 },
 ...


 export const foodCookingInstructions = {
 f1: {
   name: 'Chicken',
   temperature: 350,
   time: '25-30min',
 },
 ...

Project Status

---

Project is: COMPLETE

Room for Improvement

---

Currently, the project is complete, (although could use some fun styling) however I'll make any adjustments Jon requests as he improves his piano skills. Additionally, I'd like to add in some custom chords for Jon, to spice things up a bit.

Perhaps it could use some routes for other features as Jon's skills improve, so there is potential for that.

To do:

• Add custom chords to chord db
• Add routes for other features
• Update styling
• Improve app as Jon requests (ongoing)

Acknowledgements

---

Shout-out to Jon Eubank for letting me help him out, when he was perfectly capable of doing it himself! 💚

##Contact

---

Created by @azulverdosa - feel free to contact me!

• LinkedIn

🤝 Support

---

Contributions, issues, and feature requests are welcome!

Give a ⭐️ if you like this project!

Licence

MIT License Copyright (c) [2022] [AvaElise]

---