JS30 wesbos#20 completed

= · = · commit 60f1879df0af · 2021-07-07T15:55:03.000+05:30
diff --git a/18 - Adding Up Times with Reduce/index-FINISHED.html b/18 - Adding Up Times with Reduce/index-FINISHED.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+  <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
diff --git a/20 - Speech Detection/index-FINISHED.html b/20 - Speech Detection/index-FINISHED.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+code<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html
@@ -1,19 +1,42 @@
 <!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 recognition = new SpeechRecognition;
+    recognition.interimResults = true;
 
+    let p = document.createElement('p');
+    const words = document.querySelector('.words');
+    words.appendChild(p);
+
+    recognition.addEventListener('result',e=>{
+      const transcript = Array.from(e.results)
+      .map(result => result[0])
+      .map(result => result.transcript)
+      .join('');
+      p.textContent = transcript;
+      if(e.results[0].isFinal){
+        p = document.createElement('p');
+        words.appendChild(p);
+      }
+      console.log(transcript)
+    });
+    recognition.addEventListener('end',recognition.start);
+    recognition.start();
+    
 
-</script>
+  </script>
 
 
   <style>
@@ -33,14 +56,14 @@
       margin: 50px auto;
       background: white;
       border-radius: 5px;
-      box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
+      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;
     }
-    
+
     p {
       margin: 0 0 3rem;
     }
@@ -58,4 +81,5 @@
   </style>
 
 </body>
-</html>
+
+</html>

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<!DOCTYPE html>`
	`1`	`+ <!DOCTYPE html>`
`2`	`2`	`<html lang="en">`
`3`	`3`	`<head>`
`4`	`4`	`<meta charset="UTF-8">`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<!DOCTYPE html>`
	`1`	`+code<!DOCTYPE html>`
`2`	`2`	`<html lang="en">`
`3`	`3`	`<head>`
`4`	`4`	`<meta charset="UTF-8">`