Wikipeida Viewer

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

This awesome code was written by --Gordon--, you can see more from this user in the personal repository.
You can find the original code on
Copyright --Gordon-- ©


  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Wikipeida Viewer</title>
  <link rel='stylesheet prefetch' href=''>

      <link rel="stylesheet" href="css/style.css">



 <link href=" One" rel="stylesheet" typ="css/text">
 <div class="container text-center">
  <h1>Search for anything on Wikipedia</h1><br>
  <input class="form-control" type="text" id="searchTerm" /><br><br>
  <button id="search" type="button" class="btn btn-primary" target="_blank">Search</button><br><br>
	<!-- random article -->
  <p><a href="" target="_blank">
    <button type="button" id="random" class="btn btn-primary">Go Random</button></a></p>
   <ul id="output">

 <!-- container -->
  <script src=''></script>


    <script  src="js/index.js"></script>



/*Downloaded from */
body {
	background-image: url("");
	background-repeat: no-repeat;
	background-color: #203556;
	color: white;
	padding: 100px; 
	font-family: "Pauta One", sans-serif;

#searchTerm {
	width: 50%;
	margin: 0px 280px;
	border: 5px solid #7c7f84;
  border-radius: 10px;

#search {
	border: 5px solid #7c7f84;
  border-radius: 30px;

#random {
	border: 5px solid #7c7f84;
  border-radius: 30px;

/*Downloaded from */
/* This programme allows the user to search for any Wikipedia value and 
receive 10 immediate results, using the Wikipeida API. It also enables
a random value request */ 

	// run call when search button is clicked
		var searchTerm = $("#searchTerm").val();
		// API url with searchTerm
		var url = "" + searchTerm + "&format=json&callback=?";
		// call Wikipedia API for data
				type: "GET", 
				url: url, 
				async: false, 
				dataType: "json", 
				success: function(data){					
 				// start with fresh and blank info
					// iterate through data from API and output to screen
					for (var i = 0; i < data[1].length; i++){
						$("#output").prepend("<br><div class='well'><a target='_blank' href= " + data[3][i] + data[1][i] + "</a><p>" + data[2][i] + "</p></div>");
				error: function(errorMessage){
					alert("Could not retrieve data");
	// make enter key trigger search function as well
		if (e.which == 13){