Simple Wiki Search Using AngularJS, WebAPI (Speech recognition) and WikiAPI

index.html

<div ng-app="smartWiki" ngcloak>
	<div ng-controller="WikiCtrl">

		<div class="container">
			<br>
			<br>
			<br><br>
			<br>
			<br>
			<h1 class="header strong center blue-text">Sm<i class="material-icons medium">search</i>rt Wiki</h1>
			<div class="row">
				<div class="col s12 input-field">
					<input id="input_text" placeholder="" x-webkit-speech data-ng-model="searchText.text" ng-change="updateUserInput(searchText)" ng-focus="true" type="text">
					<a href="" id="speech-icon" class="search-icon blue-text">
						<div class="outer" ng-if="micStatus.text == 'mic_off'"></div>
						<div ng-if="micStatus.text == 'mic_off'" class="outer-2"></div> <i ng-click="startDictation()" class="material-icons">{{micStatus.text}}</i></a>
				</div>
				<div class="col s12 center">
					<a class="waves-effect waves-light transparent blue-text btn" ng-click="clearAll()" target="_blank"><i class="material-icons left" aria-hidden="true">clear_all</i>Clear</a>
					<a class="waves-effect waves-light blue white-text btn" ng-href="https://en.wikipedia.org/wiki/Special:Random" target="_blank"><i class="fa fa-random left" aria-hidden="true"></i>I'm feeling lucky</a>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-6">
					<ul>
						<li ng-repeat="item in searchResponsePosts">
							<div class="card horizontal">
								<div class="card-stacked">
									<div class="card-content">
										<a target="_blank" href="{{item.page}}">
											<h4 class="header">{{item.title}}</h4></a>
										<p>{{item.body}}</p>
									</div>
								</div>
							</div>
							<div class="ripple"></div>
						</li>
						<li ng-if="isSearchResultEmpty">
							<p>No Search Results Found </p>
						</li>
						<li ng-if="isSpeechResultEmpty">
							<p>{{errorMessage.text}}</p>
						</li>

					</ul>
				</div>
			</div>
			<br />
			<br />
			<br />
			<hr>
			<p class="center credit">Coded By <a href="https://github.com/venkateshwaran" target="_blank">Venkat</a></p>
			<p class="center credit">Inspired By <a href="https://google.com" target="_blank">Google</a></p>

		</div>

	</div>
</div>

lwmzdy.markdown

LWMZdY

A Pen by Venkateshwaran on CodePen.

License.

script.js

var smartWiki = angular.module('smartWiki' , []);

smartWiki.factory('config', [function(){
	var config = {};
	var api = {
		url : 'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&origin=*&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch='
	};
	config = api;
	return config;
}]);

smartWiki.factory('authFact', ['$http', 'config', function($http, config){
	var authFact = config;
	authFact.getWiki = function(searchQuery){
		var self = this;
		return $http({
			method : 'GET',
			url : self.url + searchQuery
		});
	};

	return authFact;
}]);

smartWiki.controller('WikiCtrl', ['$scope', 'authFact','$timeout', function($scope, authFact, $timeout){
	document.getElementById("input_text").focus();
	$scope.config = authFact;
	$scope.isSearchResultEmpty = false;
	$scope.results = [];
	$scope.searchText = {};
	$scope.micStatus = {};
	$scope.errorMessage = {};
	$scope.micStatus.text = 'mic';
	var page = 'https://en.wikipedia.org/?curid=';

	$scope.updateUserInput = function(userInput){
		if(!userInput || userInput.text.length == 0){
			return 0;
		}
		$timeout(function(){
			if(userInput.text == $scope.searchText.text){
				$scope.getUserInput(userInput.text);
			}
		},1000);
	};
	$scope.startDictation = function() {
		if (window.hasOwnProperty('webkitSpeechRecognition')) {
			$scope.recognition = new webkitSpeechRecognition();
			$scope.recognition.continuous = false;
			$scope.recognition.interimResults = false;
			$scope.recognition.lang = "en-US";
			$scope.micStatus.text = 'mic_off';
			$scope.errorMessages("Listening...");
			$scope.recognition.start();
			$scope.recognition.onresult = function(e) {
				$scope.micStatus.text = 'mic';
				$scope.searchText.text = e.results[0][0].transcript;
				$scope.recognition.stop();
				$scope.getUserInput($scope.searchText.text);

			};
			$scope.recognition.onerror = function(e) {
				$scope.getUserInput('');
				$scope.errorMessages("Please try again...");
				$scope.recognition.stop();
			}

		}
	}

	$scope.errorMessages = function(text){
		$scope.errorMessage.text= text;
		$scope.isSpeechResultEmpty = true;
	}
	$scope.getUserInput = function(searchText){
		$scope.micStatus.text = 'mic';
		authFact.getWiki(searchText).success(function(response){
			$scope.results = [];
			if(response.length != 0){
				$scope.isSearchResultEmpty = false;
				$scope.isSpeechResultEmpty = false;
				if(response.hasOwnProperty("query")){
					if(response.query.hasOwnProperty("pages")) {
						$scope.data = response.query.pages;
					}
				}
				else {
					return 0;
				}
				angular.forEach($scope.data, function(v,k){
					$scope.results.push({title: v.title, body: v.extract, page: page + v.pageid})
				})
				$scope.searchResponsePosts = $scope.results;
			}
			else{
				$scope.isSearchResultEmpty = true;
				$scope.searchResponsePosts = $scope.results;
			}
		}, function(data, status, headers, config) {
			$log.log(data.error + ' ' + status);
		});
	}

	$scope.clearAll = function(){
		$scope.searchText.text = '';
		$scope.searchResponsePosts = ''
	}
}]);

scripts

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>

style.scss

#speech-icon{
  position: absolute;
  bottom: 0px;
  right: 15px;
  width: 36px;
  cursor: pointer;
  height: 36px;
  top: 10px;
}
h1.header{
  text-transform: lowercase;
  font-weight: bold;
}
.header i{
  font-size: 40px;
vertical-align: middle;
}
html {
    font-family: GillSans, Calibri, Trebuchet, sans-serif;
  }

.input-field{
  position:relative;
    padding:0;
    margin:0;

}
.outer {
  width: 24px;
  height: 24px;
  -webkit-transform: scale(1);
  border-radius: 100%;
  position: absolute;
  background-color: transparent;
  border: 1px solid #7f8c8d;
  z-index: -1;
  transition: 1.5s all ease;
  -webkit-animation: woong 1.5s infinite;
}
.outer-2 {
  width: 24px;
  height: 24px;
  -webkit-transform: scale(1);
  border-radius: 100%;
  position: absolute;
  background-color: #bdc3c7;
  z-index: -1;
  transition: 1.5s all ease;
  -webkit-animation: woong-2 1.5s infinite;
  -webkit-animation-delay: 1s;
}
@-webkit-keyframes woong {
  0% {
    -webkit-trasform: scale(1.2);
  }
  50% {
    -webkit-transform: scale(1.8);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(2.4);
    opacity: 0;
  }
}
@-webkit-keyframes woong-2 {
  0% {
    -webkit-transform: scale(1.2);
    opacity: 0.6;
  }
  50% {
    -webkit-transform: scale(1.6);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(2);
    opacity: 0;
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />