Wikipedia Viewer

index.html

<div class="container">
  <h1>Wikipedia Viewer</h1>
  <div class="subcontainer">
    <input type="text">
    <div class="ssubcontainer">
      <button id="search">Search</button>
      <button id="random">Random Search</button>
    </div>
  </div>
</div>

script.js

$(document).ready(function() {
  // show the list of the recommended terms
  $("input[type='text']").autocomplete({
    source: function(req, res) {
      $.getJSON("https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=" + req.term + "&callback=?", function(data) {
        res(data[1]);
      });
    },
    select: function(event, ui) {
      getData(ui.item.value, event, 1);
    },
    delay: 0
  });

  // get the real data by the information provided by input
  // and show the list when press enter
  $("input[type='text']").on("keypress", function(event) {
    getData($(this).val(), event, 0);
  });

  // or search button
  $("#search").on("click", function(event) {
    getData($("input[type='text']").val(), event, 1);
  });

  // this button is for random search
  $("#random").on("click", function() {
    window.open("https://en.wikipedia.org/wiki/Special:Random", "_blank");
  });
});

// this is for showing the result of searching on the screen
function showDataOnScreen(data) {
  // prefer remove but doesn't work well with autocomplete so just clean the ul
  $("ul").html("");
  $(".container").css("margin-top", "0");
  
  // Create element and make some necessary attribute for them
  var ulist = document.createElement("ul");
  var keys = Object.keys(data.query.pages);
  keys.forEach(function(key) {
    var list = document.createElement("li");
    var link = document.createElement("a");
    link.setAttribute("href", "http://en.wikipedia.org/?curid=" + key);
    link.setAttribute("target", "_blank");
    var title = document.createElement("h3");
    var sum = document.createElement("p");
    var cont1 = document.createTextNode(data["query"]["pages"][key]["title"]);
    var cont2 = document.createTextNode(data["query"]["pages"][key]["extract"] + "..");

    // officially put each of the element into each other (in a proper way)
    title.appendChild(cont1);
    sum.appendChild(cont2);
    link.appendChild(title);
    list.appendChild(link);
    list.appendChild(sum);
    ulist.appendChild(list);
  });
  document.body.appendChild(ulist);
}

// this is for getting the json to manipulate the data we needed
function getData(keyword, event, clicked) {
  $.getJSON('https://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&titles=&generator=search&exsentences=max&exlimit=20&exintro=1&explaintext=1&excontinue=&gsrsearch=' + keyword + '&callback=?', function(data) {
    if (event.which === 13 && clicked === 0) {
      showDataOnScreen(data);
    }
    if (clicked === 1) {
      showDataOnScreen(data);
    }
  });
}

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

style.css

.container {
  margin: 0 auto;
  margin-top: 200px;
}

.subcontainer{
  margin: 0 auto;
  padding: 0;
  width: 50%;
  text-align: center;
}

.ssubcontainer {
  margin: 10px auto;
}

.ui-autocomplete { 
  position: absolute;
  cursor: pointer;
  background: white;
}

.ui-menu {
	list-style:none;
	padding: 2px;
	margin: 0;
	display:block;
	float: left;
}

.ui-state-focus {
    color: white;
    background: steelblue;
    outline:none;
}

#search, #random {
  border: none;
  padding: 3%;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  margin: 1%;
  font-weight: bold;
}

#search:hover, #random:hover {
   box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}

h1 {
  text-align: center;
  margin: 20px auto;
  font-family: monospace;
  color: steelblue;
  font-size: 48px;
  font-weight: bold;
}

input[type="text"] {
  display: block; 
  margin: 0 auto;
  width: 100%;
  font-size: 28px;
}

ul li {
  list-style: none;
}

ul li a {
  text-decoration: none;
  color: steelblue;
  font-size: 28px;
  display: inline-block;
  height: 0;
}

ul li a:hover {
  text-decoration: underline;
  color: black;
}

.ui-autocomplete {
  box-shadow: 0 0 3px rgba(0,0,0,0.3);  
}

.ui-helper-hidden-accessible { 
  display: none; 
}

wikipedia-viewer.markdown

Wikipedia Viewer

A Pen by Hoang Vo on CodePen.

License.