Wikipedia Viewer

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

App which will allow you to search through wikipedia for articles. Includes auto complete feature.

Thumbnail
This awesome code was written by haasDev, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright haasDev ©
  • HTML
  • CSS
  • JavaScript
    main(ng-app="WikiApp" ng-controller="MainCtrl")
  h1#title Wikipedia Search Tool
  #navigation-bar.clearfix
    form#search(ng-submit="search()")
      #label
        label#search-label(for="search-terms") search
      #input
        input#search-terms(type="text" name="search-terms" placeholder="What do you want to search for?")
  h1#directions Click the magnifying glass to begin a new search
  .results
    ul
      a(ng-href="{{result.url}}" target="_blank" ng-repeat="result in results")
        li
          h1 {{result.title}}
          p {{result.extract}}
          
          

/*Downloaded from https://www.codeseek.co/haasDev/wikipedia-viewer-LVdMOV */
    @import "bourbon";

$background-color: #23688b;
$base-size: 100px;
$input-size: 850px;
$image: url("http://www.clker.com/cliparts/8/n/U/M/V/E/search-icon-th.png");

html {
  height: 100%;
}

body {
  padding: 50px;
  @include transition(all 2s linear);
  height: 100%;
  background-color: $background-color;
}
#title {
  margin: 0 auto;
  padding-bottom: 50px;
  font-size: 5em;
}
#navigation-bar {
  position: relative;
  height: 100px;
  margin: 0 auto;
}
#search {
  position: absolute;
  top: 0;
  left: 0;
  width: $base-size;
  height: $base-size;
  background-color: $background-color;
}
#label {
  width: $base-size;
  height: $base-size;
  position: relative;
  z-index: 20;
  background-color: $background-color;
  
  label {
    display: block;
    width: $base-size;
    height: $base-size;
    background: $image 0 0;
    font-size: 0;
    color: rgba(0,0,0,0);
    text-indent: -9999px;
    cursor: pointer;
    background-color: $background-color;
  }
}
#directions {
  width: $input-size;
}
#input {
  position: absolute;
  top: 0;
  left: 0;
  width: $input-size;
  height: $base-size;
  z-index: 5;
  overflow: hidden;
  
  input {
    display: block;
    position: absolute;
    top: 0;
    left: -$input-size - 110;
    width: $input-size;
    height: 100%;
    margin: 0;
    padding: 0 0 0 110px;
    border: none;
    background-color: white;
    color: $background-color;
    font-size: 50px;
    backface-visibility: none;
    border-radius: 0;
    transition: left 0;
    
    &:focus {
      outline: none
    }
  }
  &.focus {
    z-index: 20;
    
    input {
      left: 0;
      transition: left 0.3s;
    }
  }
}

.results {
  width: 100%;
  
  
  ul {
    width: 100%;
    
    a {
      text-decoration: none;
      width: 100%;
      
      li {
        background-color: #fff;
        list-style: none;
        padding: 10px;
        margin: 10px;
      
        &:hover {
          border-left: 5px solid grayscale($background-color);
        }
      }
    }
  }  
}


/*Downloaded from https://www.codeseek.co/haasDev/wikipedia-viewer-LVdMOV */
    var app = angular.module('WikiApp', []);

app.controller('MainCtrl', function($scope, $http){

  var searchEl = $('#input');
  var labelEl = $('#label');

  $('#label').on('click', function(){
    $('#directions').hide();
    $('#input').children('input').css({'left': '0', 'transition': 'left 0.3s', 'background-color': 'white'});
    $(this).children('label').css('background-color', '#23688b');
  });

  $(document).on('click', function(e){
    var clickedID = e.target.id;
    if (clickedID != 'search-terms' && clickedID != 'search-label') {
      $('#directions').fadeIn();
      $('#label').css('background-color', 'white');
      $('#label').children('label').css('background-color', '#23688b');
      $('#input').children('input').css('left', '-1000px');
    }
  });
  
  $scope.search = function(){
    
    $scope.results = [];
    var title = $('input').val();
    
    var url = 'http://en.wikipedia.org/w/api.php?action=query&prop=extracts|pageimages&format=json&exsentences=1&exlimit=max&exintro=&explaintext=&pilimit=max&generator=search&gsrlimit=10&gsrsearch='
    var callback = '&callback=JSON_CALLBACK'
    var pageURL = 'http://en.wikipedia.org/?curid=';
    
    $http.jsonp(url + title + callback).success(function(data){
      var pages = data.query.pages;
      
      angular.forEach(pages, function(value, key){
        $scope.results.push({title: value.title, extract: value.extract, url: pageURL + value.pageid});
      });
    });
  };
});

Comments