Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5f969bf

Browse files
Day 20 - Speech Detection
1 parent 69d57a2 commit 5f969bf

File tree

6 files changed

+103
-1
lines changed

6 files changed

+103
-1
lines changed

‎20_day/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>20 Day</title>
7+
<link rel="stylesheet" href="main.css">
8+
</head>
9+
10+
<body>
11+
<div class="words" contenteditable>
12+
</div>
13+
<script type="text/javascript" src "main.js">
14+
</script>
15+
</body>
16+
17+
</html>

‎20_day/main.css

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
html {
2+
font-size: 10px;
3+
}
4+
5+
body {
6+
background: #587cc3;
7+
font-family: 'helvetica neue';
8+
font-weight: 200;
9+
font-size: 20px;
10+
}
11+
12+
.words {
13+
max-width: 500px;
14+
margin: 50px auto;
15+
background: white;
16+
border-radius: 5px;
17+
box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
18+
padding: 1rem 2rem 1rem 5rem;
19+
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
20+
background-size: 100% 3rem;
21+
position: relative;
22+
line-height: 3rem;
23+
}
24+
25+
p {
26+
margin: 0 0 3rem 0;
27+
}
28+
29+
.words:before {
30+
content: '';
31+
position: absolute;
32+
width: 4px;
33+
top: 0;
34+
left: 30px;
35+
bottom: 0;
36+
border: 1px solid;
37+
border-color: transparent #efe4e4;
38+
}

‎20_day/main.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
2+
3+
const recognition = new SpeechRecognition();
4+
recognition.interimResults = true;
5+
6+
let p = document.createElement('p');
7+
const words = document.querySelector('.words');
8+
words.appendChild(p);
9+
10+
recognition.addEventListener('result', e => {
11+
const transcript = Array.from(e.results).map(result => result[0]).map(result => result.transcript).join('');
12+
13+
const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '💩');
14+
p.textContent = poopScript;
15+
16+
if (e.results[0].isFinal) {
17+
p = document.createElement('p');
18+
words.appendChild(p);
19+
}
20+
});
21+
22+
recognition.addEventListener('end', recognition.start);
23+
24+
recognition.start();

‎20_day/package.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "gum",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "scripts.js",
6+
"scripts": {
7+
"start" : "browser-sync start --directory --server --files '*.css, *.html, *.js'"
8+
},
9+
"author": "",
10+
"license": "ISC",
11+
"devDependencies": {
12+
"browser-sync": "^2.12.5"
13+
}
14+
}

‎README.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,21 +98,29 @@ Tested all new buttons. Data is also persisting on page reload:-
9898
![Day 15 new taks](https://pbs.twimg.com/media/C2EYda5XUAAdUdh.jpg)
9999

100100
### Day 16: 3 Jul 2018
101+
101102
Today learned about assigning to new variable names using ES6 Object destructuring and how we can update CSS rules like textShadow or anything using javascript. Just like canvas this was a fun challenge today. I tried some css effects like this:-
102103

103104
![Day 16 new taks](https://pbs.twimg.com/media/C2IFDhkWQAAv-Ck.jpg)
104105

105106
### Day 17: 4 Jul 2018
107+
106108
Updated code to show modified band names on which sort actually happens and on right side the actual band names. After code modifications it looks like this:-
107109

108110
![Day 17 new taks](https://pbs.twimg.com/media/C2N0IDsWIAA9hLT.jpg)
109111

110112
### Day 18: 5 Jul 2018
113+
111114
Learned more about `Array.prototype.reduce()` and its usability test case scenario. `reduce()` is quite simple & effective in specific scenarios like in the example below:-
112115

113116
![Day 18 new taks](https://pbs.twimg.com/media/C2eCp-xWgAAbhJz.jpg)
114117

115118
**Tools/Sites Found:**
116-
- New, interactive Chrome Dev Tools tutorial: [How to analyze page load performance ⚡️🚀🔎](https://developers.google.com/web/tools/chrome-devtools/network-performance/)
119+
120+
- New, interactive Chrome Dev Tools tutorial: [How to analyze page load performance ⚡️🚀🔎](https://developers.google.com/web/tools/chrome-devtools/network-performance/)
117121
### Day 19: 6 Jul 2018
118122
It was too much fun today. Learned a lot about canvas and pipelining real-time images.
123+
124+
### Day 20: 7 Jul 2018
125+
126+
Learned about native [SpeechRecognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition) interface of the Web Speech API and how we can make use of it. Something like we do in google voice search. I think we can use it in various ways. Only limit is our imagination. Also liked the use npm [browser-sync](https://browsersync.io/) for time-saving synchronised browser testing.

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
<a class="active" href="./17_day/index.html">17 Day</a>
2929
<a class="active" href="./18_day/index.html">18 Day</a>
3030
<a class="active" href="./19_day/index.html">19 Day</a>
31+
<a class="active" href="./20_day/index.html">20 Day</a>
3132
</div>
3233
</body>
3334

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /