From 0d18267a74ff1d7a2745965ddc1a2c5a97f8d03d Mon Sep 17 00:00:00 2001
From: Nathan King <nathanking3590@gmail.com>
Date: Wed, 18 Jan 2023 10:56:16 +0000
Subject: [PATCH] add step 4

---
 03-codigotchi/index.html | 10 +++++-----
 03-codigotchi/script.js  | 10 ++++++++++
 03-codigotchi/style.css  | 20 ++++++++++++++++++++
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/03-codigotchi/index.html b/03-codigotchi/index.html
index 193e615..198a23a 100644
--- a/03-codigotchi/index.html
+++ b/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>
                     
diff --git a/03-codigotchi/script.js b/03-codigotchi/script.js
index e69de29..babaa99 100644
--- a/03-codigotchi/script.js
+++ b/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)
\ No newline at end of file
diff --git a/03-codigotchi/style.css b/03-codigotchi/style.css
index 887c275..9c0b013 100644
--- a/03-codigotchi/style.css
+++ b/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;
+}
\ No newline at end of file