set min/max for tone generation

app.js

@@ -1,17 +1,22 @@
-const lowest = 27.5
-const highest = 4186
-const range = highest - lowest
-
 const generateButton = document.querySelector('#generate-tone > button:nth-of-type(1)')
 const playButton = document.querySelector('#generate-tone > button:nth-of-type(2)')
 const stopButton = document.querySelector('#generate-tone > button:nth-of-type(3)')
 const toneDisplay = document.querySelector('#generate-tone dd')
+const minInput = document.querySelector('#generate-tone input:nth-of-type(1)')
+const maxInput = document.querySelector('#generate-tone input:nth-of-type(2)')
+
 const synth = new Tone.Synth().toDestination()
+
 let newTone
+let lowest = 27.5
+let highest = 4186
+
+minInput.setAttribute('placeholder', lowest)
+maxInput.setAttribute('placeholder', highest)
 
 generateButton.addEventListener('click', () => {
 	Tone.start()
-	newTone = Math.random() * range + lowest
+	newTone = (Math.random() * (highest - lowest)) + lowest
 	toneDisplay.innerHTML = newTone
 })
 
@@ -23,3 +28,10 @@ stopButton.addEventListener('click', ()=>{
 	synth.triggerRelease()
 })
 
+minInput.addEventListener('change', ()=>{
+	lowest = parseFloat(minInput.value)
+})
+
+maxInput.addEventListener('change', ()=>{
+	highest = parseFloat(maxInput.value)
+})

index.html

@@ -15,6 +15,8 @@
 			<dt>Tone:</dt>
 			<dd></dd>
 		</dl>
+		<input type="number" />
+		<input type="number" />
 		<button>Generate Tone</button>
 		<button>Play</button>
 		<button>Stop</button>