Skip to content

Commit 1bea473

Browse files
hadeebhadeeb
committed
Initial commit
0 parents  commit 1bea473

File tree

3 files changed

+130
-0
lines changed

3 files changed

+130
-0
lines changed

‎index.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
body {
2+
background-color: navajowhite;
3+
}
4+
.grow { transition: all .2s ease-in-out; }
5+
.grow:hover { transform: scale(1.1); }
6+
7+
.animated {
8+
-webkit-animation: myanim 1s infinite; /* Safari 4.0 - 8.0 */
9+
animation: myanim 1s infinite;
10+
}
11+
12+
@-webkit-keyframes myanim {
13+
from {transform: scale(1);}
14+
to {transform: scale(1.1);}
15+
}
16+
17+
@keyframes myanim {
18+
from {transform: scale(1);}
19+
to {transform: scale(1.1);}
20+
}

‎index.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>Light Bulb</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css" />
9+
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
10+
<link rel="stylesheet" type="text/css" media="screen" href="index.css" />
11+
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
12+
<script src="index.js"></script>
13+
</head>
14+
<body>
15+
<div class="container">
16+
<div class="row justify-content-center">
17+
<span class="fa-stack fa-lg fa-5x grow" id="voice-btn" onclick="startDictation()">
18+
<i class="fa fa-circle fa-stack-2x"></i>
19+
<i class="fa fa-microphone fa-stack-1x fa-inverse" id="mic-ico"></i>
20+
</span>
21+
</div>
22+
<div class="row justify-content-center">
23+
<label id="detect-text">.</label>
24+
</div>
25+
<div class="row justify-content-center">
26+
<i id="loading" class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
27+
</div>
28+
<div class="row justify-content-center">
29+
<div class="justify-content-center">
30+
<span class="fa-stack fa-lg fa-5x text-danger" onclick="toggle('red-bulb');">
31+
<i class="fa fa-circle fa-stack-2x"></i>
32+
<i class="fa fa-lightbulb-o fa-stack-1x fa-inverse" id="red-bulb"></i>
33+
</span>
34+
</div>
35+
<div class="justify-content-center">
36+
<span class="fa-stack fa-lg fa-5x text-success" onclick="toggle('blue-bulb');">
37+
<i class="fa fa-circle fa-stack-2x"></i>
38+
<i class="fa fa-lightbulb-o fa-stack-1x fa-inverse" id="blue-bulb"></i>
39+
</span>
40+
</div>
41+
</div>
42+
</div>
43+
</body>
44+
</html>

‎index.js

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
function startDictation() {
2+
3+
if (window.hasOwnProperty('webkitSpeechRecognition')) {
4+
5+
var recognition = new webkitSpeechRecognition();
6+
7+
recognition.continuous = false;
8+
recognition.interimResults = false;
9+
10+
recognition.lang = "en-US";
11+
recognition.start();
12+
document.getElementById("voice-btn").classList.add("animated");
13+
document.getElementById("mic-ico").classList.add("text-danger");
14+
document.getElementById('detect-text').innerHTML = ".";
15+
16+
recognition.onresult = function(e) {
17+
document.getElementById('detect-text').innerHTML
18+
= e.results[0][0].transcript;
19+
recognition.stop();
20+
document.getElementById("voice-btn").classList.remove("animated");
21+
document.getElementById("mic-ico").classList.remove("text-danger");
22+
/* Set URL
23+
axios.get('/console', {
24+
params: {
25+
text: e.results[0][0].transcript
26+
}
27+
})
28+
.then(function (response) {
29+
console.log(response.data);
30+
Actions here
31+
})
32+
.catch(function (error) {
33+
console.log(error);
34+
});
35+
*/
36+
};
37+
38+
recognition.onerror = function(e) {
39+
recognition.stop();
40+
document.getElementById("voice-btn").classList.remove("animated");
41+
document.getElementById("mic-ico").classList.remove("text-danger");
42+
43+
document.getElementById('detect-text').innerHTML
44+
= "Sorry,couldn't hear you";
45+
}
46+
47+
}
48+
else {
49+
document.getElementById('detect-text').innerHTML
50+
= "Sorry,your browser is not supported";
51+
}
52+
}
53+
54+
function switchOn(bulb) {
55+
document.getElementById(bulb).classList.add("fa-inverse");
56+
}
57+
function switchOff(bulb) {
58+
document.getElementById(bulb).classList.remove("fa-inverse");
59+
}
60+
61+
function toggle(bulb){
62+
if(document.getElementById(bulb).classList.contains("fa-inverse"))
63+
switchOff(bulb);
64+
else
65+
switchOn(bulb);
66+
}

0 commit comments

Comments
 (0)