In this example below you will see how to do a wiki_search with some HTML / CSS and Javascript

This awesome code was written by 19920612, you can see more from this user in the personal repository.
You can find the original code on
Copyright 19920612 ©


  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
      <link rel="stylesheet" href="css/style.css">



    <main ng-app="wikiApp" ng-controller="myController">
        <div id="search">
        <div><a href="" target="_blank">Click here for a random article</a></div>
            <form ng-submit="searchInWiki()">
                <input type="text" ng-model="searchTxt" />
                <div class="innerIcon"></div>
        <div id="reminder">Click <span id="click-search" ng-click="searchInWiki()">HERE</span> to search</div>
        <div id="search-result">
                <li ng-repeat="result in results">
                    <a ng-href="{{}}" target="_blank" >
  <script src=''></script>
<script src=''></script>


    <script  src="js/index.js"></script>



/*Downloaded from */
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    background-color: #092B40;
    position: fixed;
    height: 100%;
    width: 100%;
    height: 100%;
    overflow: auto;
    text-align: center;
    font-family: "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif;
    top: 40%;
    position: relative;
#search a{
    color: white;
    text-decoration: none;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: 4px solid #D96F32;    
    transition: all 0.25s linear 0.3s;
    cursor: pointer;
    margin: 15px auto;
    width: 260px;
    content: '';
    display: block;
    width: 16px;
    height: 3px;
    background-color: #D96F32;
    transform: rotate(45deg);
    position: relative;
    left: 25px;
    top: 35px;
    transition: all 0.15s ease 0.5s;
    width: 0px;
    height: 0px;
    transition: all 0.15s ease 0s;
    width: 30px;
    height: 30px;
    top: -30px;
    position: relative;
} .innerIcon{
    left: 220px;
    display: none;
} .innerIcon:before, .innerIcon:after{
    content: '';
    width: 15px;
    height: 2px;
    background-color: #D96F32;
    display: inline-block;
    position: relative;
    margin-top: 12px;
} .innerIcon:before{
    transform: rotate(-45deg);
    left: 9px;
} .innerIcon:after{
    transform: rotate(45deg);
    right: 6px;
form input{
    width: 100%;
    height: 100%;
    padding: 0 30px 0 15px;
    opacity: 0;
    background-color: transparent;
    color: white;
    border: none;
    outline: none;
} input {
    opacity: 1;
    transition-delay: 0.15s;
    position: relative;
    cursor: pointer;
    color: yellow;
    font-size: 1.5em;
#search-result a{
    color: black;
    text-decoration: none;
#search-result ul{
    list-style: none;
    margin-top: 5%;
    padding: 0px;
#search-result li{
    background-color: white;
    padding: 10px 20px;
    margin: 15px 2%;

/*Downloaded from */
var app = angular.module('wikiApp', []);
app.controller('myController', function($scope, $http){
    var innerIcon = $('.innerIcon');
    var form = $('form');
    var input = $('input');
    innerIcon.on('click', function(){
            $scope.results = [];
            $('#search').css("top", "40%");
            $(' .innerIcon').css("display", "none");
            setTimeout(function(){ $(' .innerIcon').css("display", "block"); }, 1000);
    $scope.searchInWiki = function(){
        var api = '|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=';
        var cb = '&callback=JSON_CALLBACK';
        var prePage = '';
        $http.jsonp(api + $scope.searchTxt + cb)
            $scope.results = [];
            $('#search').css("top", "5%");
            var results = data.query.pages;
            angular.forEach(results, function(v,k){
                $scope.results.push({title: v.title, content: v.extract, link: prePage + v.pageid});