Wikipedia Lookup Page

Developer
Bob Sutton
Size
4,066 Kb
Views
26,312
  1. Wikipedia Lookup Page Previews
  2. Wikipedia Lookup Page HTML Codes
  3. Wikipedia Lookup Page CSS Codes
  4. Wikipedia Lookup Page JS Codes

How do I make an wikipedia lookup page?

A simple front-end to Wikipedia articles. What is a wikipedia lookup page? How do you make a wikipedia lookup page? This script and codes were developed by Bob Sutton on 11 September 2022, Sunday.

Wikipedia Lookup Page Previews
IQ Test

Wikipedia Lookup Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wikipedia Lookup Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container well"> <h2 class="text-center"><strong>Search the Wikipedia</strong></h2> <form class="form-inline" action="javascript:onFormSubmit()"> <div class="text-center"> <div class="form-group"> <input class="form-control" type="text" name="search-term-field" value="" placeholder="Search term" autofocus autocomplete="off" title="Enter Wikipedia search term here" /> </div> <button id="submit-button" class="btn btn-default" type="submit" title="Click here to search the Wikipedia"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/763768/Wikipedia-logo-en-big.png" height="30" alt="Roll the dice for an article" /> </button> <button id="random-article-button" class="btn btn-default" type="button" title="Click here for random Wikipedia article" onclick="onRandomArticleButton()"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/763768/671px-Two_red_dice_01.svg.png" height="30" alt="Roll the dice for an article" /> </button> </div> </form> <div id="message-area" class="text-center"></div> <div id="wikipedia-api-response" style="display: none"> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Wikipedia Lookup Page - Script Codes CSS Codes

body
{ background: #dfdfdf;
}
.container
{ margin-top: 50px; margin-bottom: 50px; margin-left: auto; margion-right: auto;
}
form.form-inline
{ margin-top: 50px; margin-bottom: 50px;
}
.error-text
{ color: red;
}
.search-term-display
{ font-size: 20px;
}
#wikipedia-api-response
{ margin-top: 30px;
}
table
{ width: 100%;
}
.padded-thumbnail
{ padding-left: 10px;
}

Wikipedia Lookup Page - Script Codes JS Codes

var rightArrowIconURL = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/763768/right-arrow.svg";
var downArrowIconURL = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/763768/down-arrow.svg";
var disabledRightArrowIcon = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/763768/right-arrow-disabled.svg";
var searchResults;
function updateExtractPanel(pageId)
{ // Get page for the specified pageid var page = searchResults.query.pages[pageId]; // If a thumbnail is available, built HTML that will display that image along with the extract; // otherwise, just use the extract. var html; if (page.thumbnail) { html = "<table><tr>"; html += "<td><p class=\"text-justify\">" + page.extract + "</p></td>"; html += "<td class=\"padded-thumbnail text-right\"><img src=\"" + page.thumbnail.source + "\" width=\"" + page.thumbnail.width + "\" height=\"" + page.thumbnail.height + "\" /></td>"; html += "</tr></table>"; } else html = "<p>" + page.extract + "</p>"; // Insert HTML into DOM $("#panel-" + pageId).html(html);
}
function onArrowClick(pageId)
{ // If for some reason the searchResults have disappeared, stop there. if (!searchResults) return; // If extract panel is visible, display a right arrow on the left; otherwise, display a down arrow. if ($("#panel-" + pageId).css("display") != "none") { $("#img-" + pageId).attr("src", rightArrowIconURL) .attr("title", "Click here to show description"); } else { updateExtractPanel(pageId); $("#img-" + pageId).attr("src", downArrowIconURL) .attr("title", "Click here to hide description"); } // Fade the extract panel in or out. $("#panel-" + pageId).fadeToggle(700);
}
function getArrowIcon(pageId)
{ var start = "<a href=\"javascript:onArrowClick(" + pageId + ")\">"; var img = "<img id=\"img-" + pageId + "\" src=\"" + rightArrowIconURL + "\" width=\"13\" title=\"Click here to show description\" style=\"margin-right: 10px\" />"; var end = "</a>"; return start + img + end;
}
function getDisabledArrowIcon()
{ return "<img src=\"" + disabledRightArrowIcon + "\" width=\"13\" style=\"margin-right: 10px\" />";
}
function queryWikipedia(searchTerm)
{ $.ajax( { url: "https://en.wikipedia.org/w/api.php", method: "GET", dataType: "jsonp", data: { action: "query", format: "json", generator: "search", gsrnamespace: 0, gsrlimit: 50, prop: "pageimages|extracts", pilimit: "max", exintro: true, explaintext: true, exsentences: 1, exlimit: "max", gsrsearch: searchTerm }, success: processJsonResponse, error: onError });
}
function processJsonResponse(response)
{ var searchTerm = $("form input").val().trim(); if (!response.query) { $("#message-area").html("<h3 class=\"error-text\">Search term <em>\"" + searchTerm + "\"</em> was not found</h3>"); searchResults = undefined; return; } $("#message-area").html("<div class=\"well well-sm\">" + "<span class=\"search-term-display\"><u>" + "Showing results of search for term <em>\"" + searchTerm + "\"</em></u></span></div>"); searchResults = response; var html = ""; Object.keys(response.query.pages).forEach(function(pageId) { var page = response.query.pages[pageId]; var header; var desc; if (page.title && page.title.trim().length > 0) { header = page.title.trim(); if (page.extract && page.extract.trim().length > 0) desc = page.extract.trim(); } else if (page.extract && page.extract.trim().length > 0) header = page.extract.trim(); if (header) { var url = "https://en.wikipedia.org/?curid=" + pageId; html += "<div class=\"panel panel-default\">"; var icon = (desc ? getArrowIcon(pageId) : getDisabledArrowIcon()); html += "<div class=\"panel-heading\">" + icon + "<a href=\"" + url + "\" target=\"_blank\">" + header + "</a></div>"; if (desc) html += "<div id=\"panel-" + pageId + "\" class=\"panel-body\" " + "style=\"display: none\"><p></p></div>"; html += "</div>"; } }); $("#wikipedia-api-response").html(html); // Clear the form input field and give it the focus. $("form input").val("") .focus(); // Fade in the new response $("#wikipedia-api-response").fadeIn();
}
function onError(info, b)
{ console.log("Error: " + JSON.stringify(info)); window.alert("An error occurred: " + JSON.stringify(info));
}
function onFormSubmit()
{ var searchTerm = $("form input").val(); if (!searchTerm || searchTerm.trim().length == 0) return; queryWikipedia(searchTerm.trim()); $("#wikipedia-api-response").fadeOut();
}
function onRandomArticleButton()
{ window.open('https://en.wikipedia.org/wiki/Special:Random', '_blank');
}
Wikipedia Lookup Page - Script Codes
Wikipedia Lookup Page - Script Codes
Home Page Home
Developer Bob Sutton
Username anischyros
Uploaded September 11, 2022
Rating 3
Size 4,066 Kb
Views 26,312
Do you need developer help for Wikipedia Lookup Page?

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!

Bob Sutton (anischyros) Script Codes
Name
Contiguity Graph of Countries
Web calculator
Worldwide Meteor Strikes Map
The Recipe Engine
The Mark Twain Random Quote Machine
Winston Churchill
Tic-Tac-Toe
Generic Simon Game
Life in a Dungeon
Demonstration of Doping in Professional Bicycle Racing
Create amazing love letters 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!