Added lamp for visual feedback on tones

index.html

@@ -54,6 +54,7 @@ available towards the bottom.</p>
   <br>
   <div class="button-container">
     <button id="submitButton" class="interaction-button" disabled="disabled">Enter</button>
+    <button id="beepLamp" class="lamp" disabled="disabled"/>
     <button id="resetButton" class="interaction-button" disabled="disabled">Replay</button>
   </div>
 </div>

morse-code_files/morse-code.js

@@ -30,11 +30,13 @@ async function initializeAudioContext() {
 function startNotePlaying() {
   // Pass a start time of 0 so it starts ramping up immediately.
   gain_node.gain.setTargetAtTime(0.1, 0, 0.001)
+  $("#beepLamp").addClass("lamp-on")
 }
 
 function stopNotePlaying() {
   // Pass a start time of 0 so it starts ramping down immediately.
   gain_node.gain.setTargetAtTime(0, 0, 0.001)
+  $("#beepLamp").removeClass("lamp-on")
 }
 
 

morse-code_files/styles.css

@@ -24,6 +24,18 @@
     font-size: 20px;
   }
 
+  .lamp {
+    width: 100px;
+    height: 100px;
+    border-radius: 100%;
+    margin: 10px;
+    font-size: 20px;
+  }
+
+  .lamp-on {
+    background: darkgray;
+  }
+
   .game-container {
     display: flex;
     justify-content: center;
@@ -57,4 +69,4 @@
   #speed-table {
     max-width: 100%;
     overflow: scroll;
-  }
+  }