Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions challenge-music-keyboard/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ You must make a React app which presents a very simple musical keyboard made of

### Example Screenshot

![Example Screenshot](./example-screenshots/example1.png)
![Example Screenshot](./example-screenshots/example2.png)

## What you need to know before starting:

Expand All @@ -22,18 +22,13 @@ You _will_ need to know...
- how to create a component in React
- how to pass props
- how to populate components from an array
- how to handle events (button clicks)

In addition, you'll learn...

- How to install a library (in this case, tones.js)
- How to make synthesised sound with the tones.js library. This is one of many ways to make sound in a web app.

You DO NOT need to know about:

- state
- fetching JSON from an API
- promises

# Task: Install the "tones.js" library

- If you haven't created your app yet, use `create-react-app` to create the skeleton of the app.
Expand Down Expand Up @@ -99,9 +94,10 @@ If you need a hint, [use the first example in the docs, here.](https://tonejs.gi

Host your app and prove it works by viewing it on your phone!

We recommend you use Netlify. [Instructions are here](https://gist.github.com/nbogie/bf58a391fab6884f77a6adec66047181).
We recommend you use Netlify:

(You can instead use Heroku to host, or github pages, or codesandbox.io, or glitch.com...)
Site name: `cyf-GITHUBUSERNAME-tones`
Repo name: `tones-react`

## End of basic challenge!

Expand All @@ -123,6 +119,10 @@ Here's the names of the notes in a C pentatonic scale, for example: `C4 D4 E4 G4

- Add to the interface so that the user can choose what scale they want.

## Advanced Challenge: add controls to change the sound

- Add to the interface so that the user can modify the sound synthesis parameters.

## Advanced Challenge: make it look good

- Now is a good time to make it look good with CSS, colour, typography, images, and creativity. Or maybe you could ask someone to collaborate with you and do those aspects.
Expand Down
Binary file modified challenge-music-keyboard/example-screenshots/example2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.