Wikipedia Viewer

Developer
Victor Hall
Size
2,665 Kb
Views
30,360
  1. Wikipedia Viewer Previews
  2. Wikipedia Viewer HTML Codes
  3. Wikipedia Viewer CSS Codes
  4. Wikipedia Viewer JS Codes

How do I make an wikipedia viewer?

What is a wikipedia viewer? How do you make a wikipedia viewer? This script and codes were developed by Victor Hall on 13 September 2022, Tuesday.

Wikipedia Viewer Previews
IQ Test

Wikipedia Viewer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wikipedia Viewer</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="row"> </div><!-- /.col-lg-6 -->
</br> <div class="col-xs-12"> <div class="input-group"> <input id="text" type="text" class="form-control" placeholder="Enter Wiki Search...."> <span class="input-group-btn"> <button id="button" class="btn btn-default" type="button">Go!</button> </span> </div><!-- /input-group --> </div><!-- /.col-lg-6 -->
</div>
<div id="list"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js'></script>
<script src='https://npmcdn.com/[email protected]/dist/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Wikipedia Viewer - Script Codes CSS Codes

div{ text-align: center;
}
ul{ list-style: none;
}
a{ color: white;
}
body{ background-color: #262626;
}

Wikipedia Viewer - Script Codes JS Codes

$( "#button" ).click(function() { var searchTerm = document.getElementById("text").value;
search(searchTerm);
});
function search(searchTerm){
var response = [];
var lengthOfList;
//this list will be added into the componenent
//var list; $.ajax({ // request type ( GET or POST )	type: "GET", // the URL to which the request is sent	url: "https://en.wikipedia.org/w/api.php?", // data to be sent to the server	data: { action:'query', format:'json', list: 'search', srsearch: searchTerm, srwhat: 'text', srprop: 'timestamp', continue: ''}, // The type of data that you're expecting back from the server	dataType: 'jsonp', crossDomain : true, // Function to be called if the request succeeds	success: function( jsondata ){ for (var i = 0; i < jsondata.query.search.length; i++){ //pushes each result into the array named list response.push(jsondata.query.search[i].title); } lengthOfList = jsondata.query.search.length; createList(lengthOfList, response);	}
});
}
function createList(lengthOfList, response){ //clears content from search result list $("div#list").empty(); var list = document.createElement("ul"); for(var a = 0; a < lengthOfList; a++){ var anchor = document.createElement("a"); anchor.href = "https://en.wikipedia.org/wiki/" + response[a]; anchor.innerText = response[a]; var elem = document.createElement("li"); elem.appendChild(anchor); list.appendChild(elem); } //http://stackoverflow.com/questions/21192763/how-to-dynamically-add-list-items-in-jquery //renders the component when the ajax call is returned var div = document.getElementById("list"); div.appendChild(list);
}
Wikipedia Viewer - Script Codes
Wikipedia Viewer - Script Codes
Home Page Home
Developer Victor Hall
Username vhall_io
Uploaded September 13, 2022
Rating 3
Size 2,665 Kb
Views 30,360
Do you need developer help for Wikipedia Viewer?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Victor Hall (vhall_io) Script Codes
Name
Sum All Primes
Culinary Arts Institute
Search and Replace
Culinary Arts Institute at MCCC
Tribute Page
FCC Test
A Pen by Victor Hall
DNA pairing
Everything be true
Random Quote Machine Complete
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!