8000 Bro counter implemented · rohitkrai03/JavaScript30@e85d070 · GitHub
[go: up one dir, main page]
Skip to content

Commit e85d070

Browse files
rohitkrai03rohitkrai03
committed
Bro counter implemented
1 parent 8a64085 commit e85d070

File tree

4 files changed

+172
-8
lines changed

4 files changed

+172
-8
lines changed

‎20 - Speech Detection/bro.jpeg

80.7 KB
Loading

‎20 - Speech Detection/index.html

+50-8
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Speech Detection</title>
6+
<link rel="stylesheet" href="odometer-theme-plaza.css" />
67
</head>
78
<body>
89

9-
10+
<h2 class="heading">Bro Counter <span class='odometer'>0</span></h2>
1011
<div class="words" contenteditable>
1112
</div>
1213

@@ -16,6 +17,10 @@
1617
const recognition = new SpeechRecognition();
1718
recognition.interimResults = true;
1819

20+
let broCounter = 0;
21+
const odometer = document.querySelector('.odometer');
22+
const broRegex = new RegExp('bro', 'gi');
23+
1924
let p = document.createElement('p');
2025
const words = document.querySelector('.words');
2126
words.appendChild(p);
@@ -26,12 +31,17 @@
2631
.map(result => result.transcript)
2732
.join('');
2833

29-
p.textContent = transcript;
30-
if (e.results[0].isFinal) {
31-
p = document.createElement('p');
32-
words.appendChild(p);
33-
}
34-
console.log(transcript);
34+
35+
const content = transcript.replace(broRegex, '<span class="hl">Bro =></span> <img src="bro.jpeg" class="bro"></img>')
36+
p.innerHTML = content;
37+
38+
39+
if (e.results[0].isFinal) {
40+
broCounter += (transcript.match(broRegex) || []).length
41+
odometer.innerHTML = broCounter;
42+
p = document.createElement('p');
43+
words.appendChild(p);
44+
}
3545

3646
});
3747

@@ -48,12 +58,24 @@
4858
}
4959

5060
body {
51-
background:#ffc600;
61+
background: #193549;
5262
font-family: 'helvetica neue';
5363
font-weight: 200;
5464
font-size: 20px;
5565
}
5666

67+
.heading {
68+
text-align: center;
69+
color: white;
70+
}
71+
72+
.hl {
73+
color: #e34c26;
74+
font-size: 22px;
75+
font-weight: 400;
76+
}
77+
78+
5779
.words {
5880
max-width:500px;
5981
margin:50px auto;
@@ -80,7 +102,27 @@
80102
border: 1px solid;
81103
border-color: transparent #efe4e4;
82104
}
105+
106+
.bro {
107+
108+
/* make a square container */
109+
width: 40px;
110+
height: 40px;
111+
112+
/* fill the container, preserving aspect ratio, and cropping to fit */
113+
background-size: cover;
114+
115+
/* center the image vertically and horizontally */
116+
background-position: center;
117+
118+
/* round the edges to a circle with border radius 1/2 container size */
119+
border-radius: 50%;
120+
display: inline;
121+
vertical-align: middle;
122+
}
83123
</style>
84124

125+
<script type="text/javascript" src="odometer.min.js"></script>
126+
85127
</body>
86128
</html>

‎20 - Speech Detection/odometer-theme-plaza.css

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
@import url("//fonts.googleapis.com/css?family=Arimo");
2+
.odometer.odometer-auto-theme, .odometer.odometer-theme-plaza {
3+
display: -moz-inline-box;
4+
-moz-box-orient: vertical;
5+
display: inline-block;
6+
vertical-align: middle;
7+
*vertical-align: auto;
8+
position: relative;
9+
}
10+
.odometer.odometer-auto-theme, .odometer.odometer-theme-plaza {
11+
*display: inline;
12+
}
13+
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-plaza .odometer-digit {
14+
display: -moz-inline-box;
15+
-moz-box-orient: vertical;
16+
display: inline-block;
17+
vertical-align: middle;
18+
*vertical-align: auto;
19+
position: relative;
20+
}
21+
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-plaza .odometer-digit {
22+
*display: inline;
23+
}
24+
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-spacer {
25+
display: -moz-inline-box;
26+
-moz-box-orient: vertical;
27+
display: inline-block;
28+
vertical-align: middle;
29+
*vertical-align: auto;
30+
visibility: hidden;
31+
}
32+
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-spacer {
33+
*display: inline;
34+
}
35+
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-inner {
36+
text-align: left;
37+
display: block;
38+
position: absolute;
39+
top: 0;
40+
left: 0;
41+
right: 0;
42+
bottom: 0;
43+
overflow: hidden;
44+
}
45+
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-plaza .odometer-digit .odometer-ribbon {
46+
display: block;
47+
}
48+
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-ribbon-inner {
49+
display: block;
50+
-webkit-backface-visibility: hidden;
51+
}
52+
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-plaza .odometer-digit .odometer-value {
53+
display: block;
54+
-webkit-transform: translateZ(0);
55+
}
56+
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-plaza .odometer-digit .odometer-value.odometer-last-value {
57+
position: absolute;
58+
}
59+
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-up .odometer-ribbon-inner {
60+
-webkit-transition: -webkit-transform 2s;
61+
-moz-transition: -moz-transform 2s;
62+
-ms-transition: -ms-transform 2s;
63+
-o-transition: -o-transform 2s;
64+
transition: transform 2s;
65+
}
66+
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
67+
-webkit-transform: translateY(-100%);
68+
-moz-transform: translateY(-100%);
69+
-ms-transform: translateY(-100%);
70+
-o-transform: translateY(-100%);
71+
transform: translateY(-100%);
72+
}
73+
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-down .odometer-ribbon-inner {
74+
-webkit-transform: translateY(-100%);
75+
-moz-transform: translateY(-100%);
76+
-ms-transform: translateY(-100%);
77+
-o-transform: translateY(-100%);
78+
transform: translateY(-100%);
79+
}
80+
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
81+
-webkit-transition: -webkit-transform 2s;
82+
-moz-transition: -moz-transform 2s;
83+
-ms-transition: -ms-transform 2s;
84+
-o-transition: -o-transform 2s;
85+
transition: transform 2s;
86+
-webkit-transform: translateY(0);
87+
-moz-transform: translateY(0);
88+
-ms-transform: translateY(0);
89+
-o-transform: translateY(0);
90+
transform: translateY(0);
91+
}
92+
93+
.odometer.odometer-auto-theme, .odometer.odometer-theme-plaza {
94+
-moz-border-radius: 0.15em;
95+
-webkit-border-radius: 0.15em;
96+
-o-border-radius: 0.15em;
97+
-ms-border-radius: 0.15em;
98+
-khtml-border-radius: 0.15em;
99+
border-radius: 0.15em;
100+
background-color: #f0f8ff;
101+
font-family: "Helvetica Neue", sans-serif;
102+
font-weight: 100;
103+
padding: 0 0.12em;
104+
line-height: 1.2em;
105+
font-size: 1.2em;
106+
background-size: 16px 16px;
107+
}
108+
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-plaza .odometer-digit {
109+
-moz-border-radius: 0.1em;
110+
-webkit-border-radius: 0.1em;
111+
-o-border-radius: 0.1em;
112+
-ms-border-radius: 0.1em;
113+
-khtml-border-radius: 0.1em;
114+
border-radius: 0.1em;
115+
padding: 0 0.03em;
116+
color: #648baf;
117+
}
118+
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-inner {
119+
left: 0.03em;
120+
}

‎20 - Speech Detection/odometer.min.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)
0