Codigotchi 4

03-codigotchi/index.html

@@ -33,22 +33,22 @@
             <!-- Add the codigotchi and its screen -->
             <section class="codigotchi">
                 <img src="images/codigotchi.png" />
-                <div class="codigotchi-screen"></div>
+                <div id="screen" class="codigotchi-screen"></div>
             </section>
 
             <!-- Add control elements -->
-            <section>
+            <section id="panels-data" class="panels">
 
                 <!-- Microphone controls -->
-                <div class="panel">
-                    <button>
+                <div class="panel panel-microphone">
+                    <button id="microphone">
                         <img src="images/mic.png" />
                     </button>
                     <h2>Activate Microphone</h2>
                 </div>
 
                 <!-- Commands -->
-                <div class="panel">
+                <div class="panel panel-commands">
                     <h2>Speak a command!</h2>
                     <h3>Supported Commands</h3>
 

03-codigotchi/script.js

@@ -0,0 +1,10 @@
+// Query the page for elements
+const micBtn = document.getElementById('microphone')
+const panelsData = document.getElementById('panels-data');
+
+// When button clicked, show the available commands
+function onStartListening() {
+    panelsData.classList.add('listening')
+}
+
+micBtn.addEventListener('click', onStartListening)

03-codigotchi/style.css

@@ -94,3 +94,23 @@ button {
     background-repeat: no-repeat;
     background-size: contain;
 }
+
+.panel-commands {
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.listening .panel-commands {
+    visibility: visible;
+}
+
+.listening .panel-microphone {
+    visibility: hidden;
+    transform: scale(0.1);
+}
+
+.panels {
+    position: relative;
+}