@@ -1,49 +1,76 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Speech Detection</title>
 </head>
+
 <body>
 
   <div class="words" contenteditable>
   </div>
 
-<script>
-  window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+  <script>
+    window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+
+    const recog = new SpeechRecognition();
+    recog.interimResults = true;
+
+    let p = document.createElement('p');
+    const words = document.querySelector('.words');
+    words.appendChild(p);
+
+    recog.addEventListener('result', e => {
+      const transcript = [...e.results]
+        .map(r => r[0])
+        .map(r => r.transcript)
+        .join('');
 
+      p.textContent = transcript;
+      if (e.results[0].isFinal) {
+        p = document.createElement('p');
+        words.appendChild(p);
+      }
+      if (transcript.includes('get the weather')) {
+        console.log('Getting the weather...');
+      }
+    });
 
-</script>
+    recog.addEventListener('end', recog.start);
+    recog.start();
+  </script>
 
 
   <style>
     html {
       font-size: 10px;
     }
-
+    
     body {
-      background:#ffc600;
+      background: #ffc600;
       font-family: 'helvetica neue';
       font-weight: 200;
       font-size: 20px;
     }
-
+    
     .words {
-      max-width:500px;
-      margin:50px auto;
-      background:white;
-      border-radius:5px;
-      box-shadow:10px 10px 0 rgba(0,0,0,0.1);
-      padding:1rem 2rem 1rem 5rem;
+      max-width: 500px;
+      margin: 50px auto;
+      background: white;
+      border-radius: 5px;
+      box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
+      padding: 1rem 2rem 1rem 5rem;
       background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
       background-size: 100% 3rem;
       position: relative;
-      line-height:3rem;
+      line-height: 3rem;
     }
+    
     p {
       margin: 0 0 3rem;
     }
-
+    
     .words:before {
       content: '';
       position: absolute;
@@ -57,4 +84,5 @@
   </style>
 
 </body>
-</html>
+
+</html>