Day 20 - N/A

vanntile · vanntile · commit 3508a2c75fe0 · 2019-02-10T15:26:22.000+02:00
diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html
diff --git a/20 - Speech Detection/index.html b/20 - Speech Detection/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Speech Detection</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  <div class="words" contenteditable>
+  </div>
+  <script src="script.js"></script>
+
+</body>
+
+</html>
diff --git a/20 - Speech Detection/script.js b/20 - Speech Detection/script.js
@@ -0,0 +1,28 @@
+window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+
+const recognition = new SpeechRecognition();
+recognition.interimResults = true;
+recognition.lang = 'en-US';
+
+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('');
+
+  const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '💩');
+  p.textContent = poopScript;
+
+  if (e.results[0].isFinal) {
+    p = document.createElement('p');
+    words.appendChild(p);
+  }
+});
+
+recognition.addEventListener('end', recognition.start);
+
+recognition.start();
diff --git a/20 - Speech Detection/style.css b/20 - Speech Detection/style.css
@@ -0,0 +1,38 @@
+html {
+  font-size: 10px;
+}
+
+body {
+  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;
+  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;
+}
+
+.words:before {
+  content: '';
+  position: absolute;
+  width: 4px;
+  top: 0;
+  left: 30px;
+  bottom: 0;
+  border: 1px solid;
+  border-color: transparent #efe4e4;
+}
diff --git a/README.md b/README.md
@@ -37,7 +37,7 @@ Check the course at [https://JavaScript30.com](https://JavaScript30.com)
 18. [x] [Adding Up Times with Reduce](https://vanntile.github.io/JavaScript30/18%20-%20Adding%20Up%20Times%20with%20Reduce)
 19. [x] [Webcam Fun](https://vanntile.github.io/JavaScript30/19%20-%20Webcam%20Fun)
   and my [notes](./19%20-%20Webcam%20Fun)
-20. [ ] Speech Detection
+20. [ ] Speech Detection (not working in browsers for now)
 21. [ ] Geolocation
 22. [ ] Follow Along Link Highlighter
 23. [ ] Speech Synthesis
