Build a Wikipedia Viewer [freeCodeCamp [Intermediate Projects]] (Challenge)

Build a Wikipedia Viewer [freeCodeCamp [Intermediate Projects]] (Challenge) .markdown

Build a Wikipedia Viewer [freeCodeCamp [Intermediate Projects]] (Challenge)

Rule #1: Don't look at the example project's code. Figure it out for yourself.

Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.

User Story: I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.

User Story: I can click a button to see a random Wikipedia entry.

Hint #1: Here's a URL you can use to get a random Wikipedia article: http://en.wikipedia.org/wiki/Special:Random.

Hint #2: Here's an entry on using Wikipedia's API: http://www.mediawiki.org/wiki/API:Main_page.

Hint #3: Use this link to experiment with Wikipedia's API.

A Pen by Svetlana Linuxenko on CodePen.

License.

index.html

<div class="wiki-container" ng-app="wikiApp" ng-controller="wikiCtrl">
  <div class="wiki-search">
    <div class="container text-center">
      <h1><i class="fa fa-wikipedia-w"></i></h1>
      <small><em>FREECODECAMP CHALLENGE</em></small>
        <form ng-submit="submit()">
            <div class="input-group">
              <input type="text" class="form-control" ng-model="searchText" placeholder="Search..">
              <div ng-click="submit()" type="submit"class="input-group-addon btn-primary">
                <i class="fa fa-search"></i>
               </div>
            </div>
        </form>
      
      <div class="alert alert-default" ng-show="errorMessage">{{errorMessage}}</div>
    </div>
      <div ng-if="isLoading" class="loading">
        <i class="fa fa-spinner fa-pulse"></i>
      </div>
  </div>
  

  
  <div class="container wiki-pages" ng-show="pages">
    <ul class="list-group">
      <div ng-repeat="page in pages">
        <li class="list-group-item">
          <a ng-href="{{page.page}}" target="_blank" class="btn-block">
          <h3>{{page.title}}</h3>
          <p>{{page.body}}</p>
           </a>
        </li>
      </div>
    </ul>
  </div>
  
  <div class="copy"><a href="http://www.linuxenko.pro">&copy; Svetlana Linuxenko</a></div>
</div>

script.js

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

app.factory('wikiAPI', function($http) {
  var wikiURI = '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&callback=JSON_CALLBACK&gsrsearch=';
  
  return function(text) {
    return $http.jsonp(wikiURI + encodeURIComponent(text));
  };
});

app.controller('wikiCtrl', function($scope, wikiAPI) {
  var page = 'http://en.wikipedia.org/?curid=';
  
  $scope.submit = function() {
    $scope.isLoading = true;
    $scope.errorMessage = '';
    
    wikiAPI($scope.searchText).success(function(data) {
      if (typeof data.query === 'undefined') {
        $scope.isLoading = false;
        $scope.errorMessage = 'Not Found';
        $scope.pages = [];
        return;
      }
      
      $scope.pages = Object.keys(data.query.pages).map(function(k) {
        $scope.isLoading = false;
        var i = data.query.pages[k];
        return {title: i.title, body: i.extract, page: page + i.pageid}
      });
    });
  }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

style.css

body,html, .wiki-container {
  width: 100%;
  height: 100%;
}

.wiki-container {
  display: flex;
  flex-direction: column;
}

.wiki-search {
  margin: auto;
}

.wiki-search .container {
  max-width: 450px;
}

.wiki-search h1 {
  font-size: 58px;
  color: #444;
}

.wiki-pages {
  margin-top: 15px;
}

.wiki-pages .list-group-item {
  margin-top: 5px;

}

.wiki-pages .list-group-item a {
  text-decoration: none;
  color: #444;
}

.wiki-pages .list-group-item {
  padding: 2px 20px;
  border: none;
  border-radius: 0px;
  box-shadow: 0px 0px 2px #ddd;
  border-left: 5px solid transparent;
}

.wiki-pages .list-group-item h3 {
  margin: 10px 0px;
}

.wiki-pages .list-group-item:hover {
    border-left: 5px solid #337ab7;
}

.wiki-container .copy {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px 0px;
}

.input-group-addon {
  cursor: pointer;
}

.loading {
  text-align: center;
  margin: 30px;
  font-size: 38px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />