diff --git a/challenge-music-keyboard/README.md b/challenge-music-keyboard/README.md index 8ae2150e6..5b8a126dc 100644 --- a/challenge-music-keyboard/README.md +++ b/challenge-music-keyboard/README.md @@ -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: @@ -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. @@ -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! @@ -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. diff --git a/challenge-music-keyboard/example-screenshots/example2.png b/challenge-music-keyboard/example-screenshots/example2.png index e69de29bb..8cb98c11a 100644 Binary files a/challenge-music-keyboard/example-screenshots/example2.png and b/challenge-music-keyboard/example-screenshots/example2.png differ