START PROJECT 20.

jdstein1 · jdstein1 · commit 2e57a92caae6 · 2017-02-06T14:55:42.000-06:00
diff --git a/20--Speech_Detection/index-jds.html b/20--Speech_Detection/index-jds.html
@@ -0,0 +1,60 @@
+<!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>
+
+
+  <style>
+    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 0;
+    }
+
+    .words:before {
+      content: '';
+      position: absolute;
+      width: 4px;
+      top: 0;
+      left: 30px;
+      bottom: 0;
+      border: 1px solid;
+      border-color: transparent #efe4e4;
+    }
+  </style>
+
+</body>
+</html>
diff --git a/20--Speech_Detection/index.html b/20--Speech_Detection/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Speech Detection</title>
+</head>
+<body>
+
+<ul>
+  <li><a href="index-START.html">START</a></li>
+  <li><a href="index-FINISHED.html">FINISHED</a></li>
+  <li><a href="index-jds.html">jds</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -26,7 +26,7 @@
   <li><a href="17--Sort_Without_Articles/index.html">17 - Sort Without Articles</a></li>
   <li><a href="18--Adding_Up_Times_with_Reduce/index.html">18 - Adding Up Times with Reduce</a></li>
   <li><a href="19--Webcam_Fun/index.html">19 - Webcam Fun</a></li>
-  <!-- <li><a href="20--Speech_Detection/index.html">20 - Speech Detection</a></li> -->
+  <li><a href="20--Speech_Detection/index.html">20 - Speech Detection</a></li>
   <!-- <li><a href="21--Geolocation/index.html">21 - Geolocation</a></li> -->
   <!-- <li><a href="22--Follow_Along_Link_Highlighter/index.html">22 - Follow Along Link Highlighter</a></li> -->
   <!-- <li><a href="23--Speech_Synthesis/index.html">23 - Speech Synthesis</a></li> -->
