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 @@
-
+
-
+
-
-

Activate Microphone

-
+

Speak a command!

Supported Commands

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