Built a Wikipedia Viewer

Built a Wikipedia Viewer.markdown

Built a Wikipedia Viewer

A Pen by Chanthy on CodePen.

License.

index.html

<div class="container" style="max-width: 750px;">
  <div class="row" id="header">
    <div class="col-xs-12 text-center">
      <h1> Wikipedia Viewer </h1>
       <div class="form-inline">
        <input type="text" id="searchText" class="form-control" placeholder="Alan Turing" />
        <button id="btnSearch" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
      </div>
      <br>
      <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">A random Wikipedia article</a>
    </div>
  </div>
  
  <div class="container" id="contentResult">
    <!--
    <a href="" target="_blank">
      <div class="pageItem col-xs-12">
        <div>
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Einstein_1921_by_F_Schmutzer_-_restoration.jpg/114px-Einstein_1921_by_F_Schmutzer_-_restoration.jpg" 
               class=""/>
        </div>
        <div class="desc">
          <h2>Albert Einstein</h2>
          <p>
              German-American physicist and founder of the theory of relativity
          </p>
        </div>
       </div>
    </a>
    
    <a href="" target="_blank">
      <div class="pageItem col-xs-12">
        <div>
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Einstein_1921_by_F_Schmutzer_-_restoration.jpg/114px-Einstein_1921_by_F_Schmutzer_-_restoration.jpg" 
               class=""/>
        </div>
        <div class="desc">
          <h2>Albert Einstein</h2>
          <p>
              German-American physicist and founder of the theory of relativity
          </p>
        </div>

       </div>
    </a>
  -->
  </div>

  
<footer class="text-center">Coded by <a href="https://www.freecodecamp.com/thydev" target="_blank">Chanthy Ngin</a></footer>
</div>

script.js

$("document").ready(function(){

  console.log("Page Ready");
  
   //console.log($("#searchText").val());
  $("#searchText").focus(); //Do not put this line when developing in codepen.io ---> So annoying
  $("#searchText").change(function(){
    //console.log($("#searchText").val());
    var stxt = $("#searchText").val();
    if(stxt.trim() != ""){
      console.log("change" + stxt);
      searchContent(stxt);
    }
  });
  /*
  $("#btnSearch").click(function(){
    var stxt = $("#searchText").val();
    if(stxt.trim() != ""){
      console.log("click" + stxt);
      searchContent(stxt);
    }
  });
  */
});


//https://www.mediawiki.org/wiki/API:Page_info_in_search_results

function searchContent(str) {
  var searchText = "Alan tu";
  //console.log(str);
  searchText = str;
  $.ajax({
  url: '//en.wikipedia.org/w/api.php',
  data: { 
    action: 'query', 
    formatversion: 2,
    generator: 'prefixsearch',
    gpssearch: searchText, 
    gpslimit: 10,
    prop: 'pageimages|pageterms',
    piprop: 'thumbnail',
    pithumbsize: 100,
    pilimit: 10,
    wbptterms:'description',
    redirects:'',
    format: 'json'},
    dataType: 'jsonp',
    success: function (data) {
      //console.log(data.query.pages);
      var pages = data.query.pages;
      loadList(pages);

    }
  });
  
    
}

function loadList(pages){
  //https://en.wikipedia.org/?curid=xxxxxxx
  var wikiURL = "https://en.wikipedia.org/?curid=";   
  
  $("#contentResult").html("");
  pages.forEach(function(p){
    var pHTML = '<a href="' + wikiURL + '#curid#" target="_blank">' +
                '<div class="pageItem col-xs-12">' +
                  '<div style="">' +
                    '<img src="#imgURL#" class="hidden-xs"/>' +
                  '</div>' +
                  '<div class="desc">' +
                    '<h2>#title#</h2>' +
                    '<p>' +
                        '#desc#' +
                    '</p>' +
                  '</div>' +
                 '</div>' +
              '</a>';
    if(p.hasOwnProperty('pageid')) {
      curid = p.pageid;
      title = p.hasOwnProperty('title') ? p.title : "";
      description = p.hasOwnProperty('terms') ? p.terms.description[0] : p.title;
      imgURL = p.hasOwnProperty('thumbnail') ? p.thumbnail.source : "https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg";
      pHTML = pHTML.replace("#curid#", curid)
                .replace("#title#", title)
                .replace("#imgURL#", imgURL)
                .replace("#desc#", description);
      $("#contentResult").append(pHTML);  
    }
    
    //console.log(curid);
    //console.log(title);
    //console.log(description);
    //console.log(imgURL);
  });
  
}

/*
$.ajax({
  url: '//en.wikipedia.org/w/api.php',
  data: { 
    action: 'query', 
    list: 'search', 
    srsearch: 'Albert Ei', 
    prop: 'pageImages',
    format: 'json' },
  dataType: 'jsonp',
  success: function (x) {
    console.log(x);
    //console.log(x.query.search);
    //console.log('title', x.query.search[0].title);
  }
});
*/

//api.php?action=query&generator=allpages&gaplimit=3&gapfrom=Ba&prop=links|categories

//https://en.wikipedia.org/w/api.php?action=query&formatversion=2&generator=prefixsearch&gpssearch=Albert%20Ei&gpslimit=10&prop=pageimages%7Cpageterms&piprop=thumbnail&pithumbsize=50&pilimit=10&redirects=&wbptterms=description

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.css

#header {
  margin: 0 0 20px 0;
}

img {
  width: 100px;
  height:auto;
}
h2 {
  margin: 5px 0 0 0;
  /*display: inline-block; */
}
.pageItem {
  padding: 0px;
  margin: 0 0px 2px 0px;
  border: 1px solid #eee;
  border-left-width: 5px;
  border-radius: 3px;
  border-left-color: #1b809e;
  vertical-align: top;
  display: -webkit-flex;
  max-width: 700px;
  background: #f2f2f2;
}
.pageItem:hover {
  background: #fff2e6;
  border-left-color: #ff7b00;
}
.desc {
   margin-left: 10px;
}
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

h2 {
    font-size: 1.3em;
  } 

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />