Wikipedia Viewer

Developer
Mihkel
Size
3,078 Kb
Views
10,120
  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?

Wikipedia browser with autocomplete. What is a wikipedia viewer? How do you make a wikipedia viewer? This script and codes were developed by Mihkel on 08 December 2022, Thursday.

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/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta name="viewport" content="width=device-width, initial-scale=1">
<div class="container"> <img src="http://www.upload.ee/image/5694659/logo.png" alt="big-logo" width="400" height="400" class="page-logo img-responsive"> <div class="row"> <div class="col-sm-8 col-sm-offset-2"> <form method="post"> <div class="form-group has-feedback"> <input type="text" class="form-control" name="search" placeholder="Search.."> <span class="glyphicon glyphicon-search form-control-feedback"></span> </div> <div class="text-center"> <div class="btn-group"> <input type="submit" value="Search" class="btn btn-primary"> <button type="button" class="btn btn-primary random-article">Random</button> </div> </div> </form> </div> </div> <div class="row"> <div class="col-sm-8 col-sm-offset-2"> <div class="list-group article-list"></div> </div> </div>
</div>
<script id="article-template" type="x-tmpl-mustache"> <div class="list-group-item wiki-article"> <h3 class="list-group-item-heading"><a href="{{ href }}" target="_blank">{{ title }}</a></h3> <p class="list-group-item-text">{{ description }}</p> </div>
</script> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js'></script>
<script src='https://code.jquery.com/ui/1.12.0/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Wikipedia Viewer - Script Codes CSS Codes

body {	background-color: #eee;
}
.page-logo {	margin: 0 auto;	display: block;
}
.glyphicon-search {	opacity: 0.5;
}
.wiki-article {	margin-top: 1em;	background-color: #fff; border: 1px solid #E0E0E0; box-shadow: 0 1px 2px #E0E0E0;
}

Wikipedia Viewer - Script Codes JS Codes

$(document).ready(function () {	var template = $("#article-template").html();	var $input = $("input[name=search]"); var $articleList = $(".article-list");	Mustache.parse(template);	var http = {	base: "https://en.wikipedia.org/w/api.php?format=json&utf8",	get: function (query) {	return $.ajax({	url: this.base + query + "&callback=?",	context: this,	method: "get",	dataType: "jsonp"	});	}	};	var Article = function (title, description) {	this.title = title;	this.description = description;	this.href = "http://en.wikipedia.org/wiki/" + title;	}	// get 10 articles	function getArticles(e) {	e.preventDefault();	if (!$input.val()) {	return 0;	}	var uri = "&action=query&prop=extracts&exsentences=2&explaintext=&exlimit=max&exintro&generator=search&gsrsearch=";	var query = $input.val().toLowerCase();	http.get(uri + query)	.done(function (res) {	var rendered = "";	for (var id in res.query.pages) {	var article = new Article(res.query.pages[id].title, res.query.pages[id].extract);	rendered += Mustache.render(template, article);	}	$articleList.html(rendered);	$input.val("");	})	.fail(function (xhr, status, error) {	alert("Search error");	});	}	// get random article	function random() {	var uri = "&action=query&prop=extracts&exsentences=2&explaintext=&generator=random&grnnamespace=0";	http.get(uri)	.done(function (res) {	var id = Object.keys(res.query.pages);	var article = new Article(res.query.pages[id].title, res.query.pages[id].extract)	var rendered = Mustache.render(template, article);	$articleList.html(rendered);	})	.fail(function (xhr, status, error) {	alert("Random article error");	});	}	// show suggestions for user	function autocomplete(request, response) {	var uri = "&action=opensearch&search=" + request.term;	http.get(uri)	.done(function (data) {	response(data[1]);	})	.fail(function (xhr, status, error) {	alert("Autocomplete error");	}); }	$("form").on("submit", getArticles);	$(".random-article").on("click", random);	$input.autocomplete({	source: autocomplete	});
});
Wikipedia Viewer - Script Codes
Wikipedia Viewer - Script Codes
Home Page Home
Developer Mihkel
Username Krokodill
Uploaded December 08, 2022
Rating 3
Size 3,078 Kb
Views 10,120
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!

Mihkel (Krokodill) Script Codes
Name
Loading animation
Twitch Status 2.0
Pomodoro Timer
React Weather Broadcast
Tic-Tac-Toe
Game of Life
Mobile navigation bar
React Pokedex
Form validation with jQuery
React Markdown Preview
Create amazing sales emails 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!