A Pen by Francesca

Thumbnail
This awesome code was written by francjsca, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright francjsca ©
  • HTML
  • CSS
  • JavaScript
    <main ng-app="WikiApp" ng-controller="MainCtrl">
  <div id="search" class="wrapper fullHeight">
    <h1 class="page-header text-center titolo ">freeCodeCamp <strong class="text-primary"> Search </strong></h1>
    <form ng-submit="search()" class="text-center">
      <input type="text" ng-model="searchTxt" placeholder="Input text to search" />
      <div class="eks"></div>
    </form>
    <br>
    <p class="text-center"><small>oppure</small>
      <a href="http://en.wikipedia.org/wiki/Special:Random" target="_blank"><i class="fa fa-random fa-2x"></i> Random article</a>
      <br/>
    </p>
    <p id="help" class="text-center "><small>Click input box to search</small></p>
  </div>
   
</main>

/*Downloaded from https://www.codeseek.co/francjsca/a-pen-by-francesca-qbLjzw */
    input{
  padding:15px;
  margin-top:80px;
}

p#help small{
  color:gray;
}

body{
  
}



/*Downloaded from https://www.codeseek.co/francjsca/a-pen-by-francesca-qbLjzw */
    var app = angular.module('WikiApp', ['ngAnimate']);
app.controller('MainCtrl', function($scope, $http, $timeout) {
  var form = $('form');
  var close = $('.eks');
  var input = $('input');
  var search = $("#search");
  var help = $("#help");
  
  $scope.results = [];

  close.on('click', function() {
    form.toggleClass('open');
    
    if (!form.hasClass('open') && $scope.searchTxt !== '' && typeof $scope.searchTxt !== 'undefined') {
	    search.toggleClass('fullHeight')
      help.toggleClass('hide');
      $scope.searchTxt = '';
    } 
    $scope.results = [];
    $scope.$apply();
  })

  input.on('transitionend webkitTransitionEnd oTransitionEnd', function() {
    if (form.hasClass('open')) {
      input.focus();
    } else {
      return;
    }
  })

  $scope.search = function() {
    $scope.results = [];
    help.addClass('hide');
    search.removeClass('fullHeight');
    var title = input.val();
    var api = 'http://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=';
    var cb = '&callback=JSON_CALLBACK';
    var page = 'http://en.wikipedia.org/?curid=';
    
    $http.jsonp(api + title + cb)
    .success(function(data) {
      var results = data.query.pages;
      angular.forEach(results, function(v,k)  {
        $scope.results.push({title: v.title, body: v.extract, page: page + v.pageid})
      })
    });
  }
});

Comments