diff --git a/src/App.css b/src/App.css index 4e004ba855e88c93e07c0a6d9e509b24f3c95202..e849f9b8bc3981cbc50df74197088a2061be1fc6 100644 --- a/src/App.css +++ b/src/App.css @@ -56,14 +56,11 @@ cursor: pointer; } -#soittimet { - font-size: 20px; - position: "absolute"; - bottom: 60; +#sfmenu { + font-size: 30px; cursor: pointer; } - #sharp { background-color: black; color: white; diff --git a/src/App.js b/src/App.js index 9a56c9eea467ddff7e4f70b45915fd6031a22009..ea5e81c73642a01aa777a615660a57fbe6376490 100644 --- a/src/App.js +++ b/src/App.js @@ -231,16 +231,13 @@ function App() { const handleFis4Click = () => { audioPlayer.stopNote(0) audioPlayer.playNote("F#4")} - const handlePianoClick = () => { - audioPlayer.setInstrument("acoustic_grand_piano")} - const handleSaxClick = () => { - audioPlayer.setInstrument("alto_sax")} - const handleAahClick = () => { - audioPlayer.setInstrument("choir_aahs")} - const handleShakuClick = () => { - audioPlayer.setInstrument("shakuhachi")} - const handleCelloClick = () => { - audioPlayer.setInstrument("cello")} + + function handleSoitinChange(e) { + audioPlayer.setInstrument(e.target.value) + + } + + return ( @@ -278,12 +275,21 @@ function App() { <button id="perus" onClick={handleE4Click}>.</button> <button id="thin" onClick={handleF4Click}>-</button> <button id="sharp" onClick={handleFis4Click}>ä</button> - - <button id="soittimet" onClick={handlePianoClick}>piano</button> - <button id="soittimet" onClick={handleSaxClick}>saksofoni</button> - <button id="soittimet" onClick={handleAahClick}>ihminen</button> - <button id="soittimet" onClick={handleShakuClick}>shakuhachi</button> - <button id="soittimet" onClick={handleCelloClick}>sello</button> + + <select id="sfmenu" + defaultValue="flute" + onChange={handleSoitinChange}> + <option value="shakuhachi">shakuhachi</option> + <option value="cello">sello</option> + <option value="flute">huilu</option> + <option value="bassoon">fagotti</option> + <option value="french_horn">torvi</option> + <option value="choir_aahs">ihminen</option> + <option value="grand_acoustic_piano">piano</option> + <option value="bagpipe">säkkipilli</option> + <option value="breath_noise">hengitys</option> + + </select> </div> )