display random tone value

1 year ago · d772fe806e
parent ba1d995e3a
commit d772fe806e
2 changed files with 22 additions and 3 deletions
--- a/app.js
+++ b/app.js
@ -1 +1,12 @@
-console.log('hi');
+const lowest = 27.5
+const highest = 4186
+const range = highest - lowest
+
+const generateButton = document.querySelector('body > button')
+const toneDisplay = document.querySelector('section dd')
+let newTone
+
+generateButton.addEventListener('click', () => {
+	newTone = Math.random() * range + lowest
+	toneDisplay.innerHTML = newTone
+})
--- a/index.html
+++ b/index.html
@ -3,10 +3,18 @@
 <head>
 	<meta charset="UTF-8">
 	<title></title>
-	<script src="app.js"></script>
+	<script src="app.js" defer></script>
 </head>
 <body>
 	<h1>Tuner</h1>
-
+	<button>Generate Tone</button>
+	<section>
+		<dl>
+			<dt>Tone:</dt>
+			<dd></dd>
+		</dl>
+		<button>Play</button>
+		<button>Stop</button>
+	</section>
 </body>
 </html>