<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
</head>
<body>
<div id="container">
<div id="devices">
<div class="device" id="light"><i class='fa fa-lightbulb'></i><p>Light</p></div>
<div class="device" id="tv"><i class='fa fa-tv'></i><p>Television</p></div>
<div class="device" id="printer"><i class='fa fa-print'></i><p>Printer</p></div>
</div>
<div id="button"><button onclick="speechRecognition()"><i id="status" class='fa fa-microphone'></i></button></div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
margin: 0px;
padding: 0px;
font-family: Arial;
}
#container {
margin: auto;
width: 360px;
height: 540px;
padding: 10px;
background: green;
border-radius: 10px;
}
#devices {
width: 360px;
height: 480px;
background: white;
border-radius: 10px;
}
div.device {
width: 100px;
height: 85px;
margin: 10px;
padding-top: 15px;
background: cyan;
font-size: 45px;
text-align: center;
border-radius: 10px;
float: left;
}
div.device p {
font-size: 12px;
margin: 0px;
margin-top: 5px;
padding: 0px;
}
#button {
width: 360px;
padding-top: 10px;
text-align: center;
}
button {
font-size: 30px;
width: 50px;
height: 50px;
background: white;
border-radius: 25px;
}
let command;
let light = 0;
let tv = 0;
let printer = 0;
var punctuation = /[!"#$%&'()*+,-./:;<=>?@[]^_`{|}~]/g;
function speechRecognition() {
var output = document.getElementById("output");
var action = document.getElementById("action");
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
var recognition = new SpeechRecognition();
recognition.onstart = function() {
document.getElementById("status").className = "fa fa-spinner fa-spin";
};
recognition.onspeechend = function() {
document.getElementById("status").className = "fa fa-microphone";
recognition.stop();
}
recognition.onresult = function(event) {
var transcript = event.results[0][0].transcript;
transcript = transcript.toLowerCase();
transcript = transcript.replace(punctuation, '');
command = transcript;
isOn = command.search("turn on");
isOff = command.search("turn off");
isLight = command.search("light");
isTV = command.search("TV");
isPrinter = command.search("printer");
if (isLight >= 0) {
if (isOn >= 0) {
document.getElementById("light").style.color = "red";
}
if (isOff >= 0) {
document.getElementById("light").style.color = "black";
}
}
if (isTV >= 0) {
if (isOn >= 0) {
document.getElementById("tv").style.color = "red";
}
if (isOff >= 0) {
document.getElementById("tv").style.color = "black";
}
}
if (isPrinter >= 0) {
if (isOn >= 0) {
document.getElementById("printer").style.color = "red";
}
if (isOff >= 0) {
document.getElementById("printer").style.color = "black";
}
}
};
recognition.start();
}