Wikipedia Viewer

Developer
Sam Koshy
Size
4,681 Kb
Views
8,096
  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?

Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/pgNRvJ.. What is a wikipedia viewer? How do you make a wikipedia viewer? This script and codes were developed by Sam Koshy on 06 November 2022, Sunday.

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='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="text-center searchBar container-fluid"> <form action=""> <input type="text" id="searchText" placeholder="Search Wikipedia" autocomplete="off" spellcheck="false"/> <i class="fa fa-search fa-lg"></i><span class="verticleLine"></span> <i class="fa fa-times-circle fa-lg"></i> <input type=button class="btn btn-warning" onClick="location='http://en.wikipedia.org/wiki/Special:Random'" value="I'm feeling lucky"> </form>
</div>
<div class="container-fluid displayResults searchContainer"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Wikipedia Viewer - Script Codes CSS Codes

body { background-color: #3D5058;
}
.searchBar { position: absolute; top: 40%; right: 0; left: 0; font-size: 120%;
}
.btn { color: rgb(250, 250, 250); font-weight: 500;
}
.btn-warning { margin-left: 10px; margin-bottom: 3px;
}
#searchText { border-radius: 10px; padding-left: 44px; padding-right: 33px; height: 38px; width: 360px; border: none; background: rgb(250, 250, 250);
}
.fa-search { color: rgb(70, 70, 70); margin-left: -355px; margin-bottom: 20px;
}
.verticleLine { border-left: 1px solid #555; height: 39px; opacity: 0.5; display: inline-block; margin-bottom: -14px; margin-left: 5px;
}
.fa-times-circle { color: rgb(70, 70, 70); margin-left: 292px;
}
.fa-times-circle:hover { cursor: pointer;
}
.searchContainer { margin-top: 54px; margin-left: 30px; margin-right: 30px;
}
.searchResultsContainer { width: 100%; padding: 15px; background: rgb(250, 250, 250); border-left: 5px solid transparent; //border-radius: 5px; //box-shadow: 10px 10px 10px 2px rgba(0, 0, 0, 0.5);
}
.searchResultsContainer:hover { border-left: 5px solid #CF9840;
}
a { color: rgb(0, 0, 0);
}
a:hover { text-decoration: none; color: rgb(0, 0, 0);
}
.next { float: right; margin-bottom: 20px;
}
input:focus,
textarea:focus { outline: none; /*gets ride of blue highlight around input area*/
}

Wikipedia Viewer - Script Codes JS Codes

/********* Notes about using Wikipedia's API ******************** -Use format=jsonfm when debugging (display is human friendly) -Specify formatversion=2 to get json format responses in a cleaner format -Cannot use list=search and prop=info in same API call -Note: list=search&srsearch='search text' and generator=search&gsrsearch='search text' give similar values (however gsrsearch is sorted by pageid value) -prop=info&inprop=url provides links -gsrsearch='search text' provides list of titles with 'search text' in them -callback=? is used for a JSONP call since otherwise request wasn't being loaded -continue= is going to return continue=|| if more results can be loaded -gsroffset='number' use to continue paging -unfortunately setting gsroffset='number' won't necessarily produce the same query each time on page reload -gsrprop=snippet not producing intended output, hence the work around was to use prop=extract (needs exintro initialized, otherwise exlimit=max is too large a request) *****************************************************************/
var pageNum = 1, sroffset, prev_sroffset, searchItem,animationComplete=false;
$(document).ready(function() { $('#searchText').keypress(function(e) { //keypress (or keydown) is better than keyup since we can suppress form submit on 'enter' key being pressed searchItem = $('#searchText').val().replace(/\s+/g, '%20'); //user input. Also, replace space ('+' means any amount) with %20 (single space) to meet Wiki API call parameters var wikiLink = 'https://en.wikipedia.org/w/api.php?action=query&prop=extracts|info&exintro&exlimit=max&inprop=url&generator=search&gsroffset=&format=json&formatversion=2&callback=?&gsrsearch=' + searchItem + '&continue='; pageNum = 1; if (e.which === 13) { //if user returns enter key. Also e.keyCode is not implemented the same way by all browsers but JQuery normalizes the vale of e.which for all browsers document.getElementById("searchText").spellcheck=true; //spell check suggestion couldn't be animated along with searchBar, so spellcheck is initially turn off and activated here $(".searchBar").animate({top: "2.4%"}, 500); animationComplete=true; setTimeout(function() {wikiCall(wikiLink);}, 200); //passing wikiCall(wikiLink) would invoke function immediately. Instead we need to pass it as a function to be invoked for the delay to work. e.preventDefault(); //prevents implicit submit of form when enter is pressed. API call is interupted on page refresh otherwise. } }); /************************************************************/ $('.fa-search').on('click', function() { var wikiLink = 'https://en.wikipedia.org/w/api.php?action=query&prop=extracts|info&exintro&exlimit=max&inprop=url&generator=search&gsroffset=&format=json&formatversion=2&callback=?&gsrsearch=' + $('#searchText').val().replace(/\s+/g, '%20') + '&continue='; pageNum = 1; document.getElementById("searchText").spellcheck=true; if(!animationComplete && $('#searchText').val()!=""){ $(".searchBar").animate({top: "2.4%"}, 500); setTimeout(function() {wikiCall(wikiLink);}, 200); }else{wikiCall(wikiLink);} }); /************************************************************/ $('.fa-times-circle').on('click', function() { $('#searchText').val(""); //clears value in text box $(".displayResults").html(""); //clears all the appended divs pageNum = 1; }); /************************************************************/ $('.displayResults').on('click', '.next', function() { //.displayResults is the stationary object into which the dynamically created .next is created pageNum += 1; prev_sroffset = sroffset; //this gives the value of sroffset before it increments up when wikiCall function is called var wikiLink = 'https://en.wikipedia.org/w/api.php?action=query&prop=extracts|info&exintro&exlimit=max&inprop=url&generator=search&format=json&formatversion=2&callback=?&gsrsearch=' + $('#searchText').val() + '&gsroffset=' + sroffset; wikiCall(wikiLink); }); /************************************************************/ $('.displayResults').on('click', '.back', function() { //.displayResults is the stationary object into which the dynamically created .back is created var diff = sroffset - prev_sroffset; if (pageNum > 2) { pageNum -= 1; prev_sroffset -= diff; var wikiLink = 'https://en.wikipedia.org/w/api.php?action=query&prop=extracts|info&exintro&exlimit=max&inprop=url&generator=search&format=json&formatversion=2&callback=?&gsrsearch=' + $('#searchText').val() + '&gsroffset=' + prev_sroffset; wikiCall(wikiLink); } else if (pageNum === 2) { pageNum -= 1; var wikiLink = 'https://en.wikipedia.org/w/api.php?action=query&prop=extracts|info&exintro&exlimit=max&inprop=url&generator=search&format=json&formatversion=2&callback=?&gsrsearch=' + $('#searchText').val() + '&continue='; wikiCall(wikiLink); } });
});
//**********************************************************************//
//**********************************************************************//
function wikiCall(link) { $(".displayResults").html(""); //clears display for each new call $(".displayResults").append("<br>"); $.getJSON(link, function(searchResults) { if (typeof searchResults.continue === 'undefined') { //if there are no further search results to load for (var i = 0; i < searchResults.query.pages.length; i++) { $(".displayResults").append("<a href=" + searchResults.query.pages[i].fullurl + "><div class='searchResultsContainer'><span style='font-weight:bold; font-size:150%; margin-bottom:100px;'>" + searchResults.query.pages[i].title + "</span><br></br>" + searchResults.query.pages[i].extract + "</div></a>"); $(".displayResults").append("<br>"); } } else { sroffset = searchResults.continue.gsroffset; for (var j = 0; j < searchResults.query.pages.length; j++) { $(".displayResults").append("<a href=" + searchResults.query.pages[j].fullurl + "><div class='searchResultsContainer'><span style='font-weight:bold; font-size:150%; margin-bottom:100px;'>" + searchResults.query.pages[j].title + "</span><br></br>" + searchResults.query.pages[j].extract + "</div></a>"); $(".displayResults").append("<br>"); } if (pageNum === 1) { $(".displayResults").append("<span class='btn btn-success next'>Load More</span>"); } else { $(".displayResults").append("<span class='btn btn-info back'><i class='fa fa-reply'></i> Back</span><span class='btn btn-success next'>Load More</span>"); } } }).fail(function(jqxhr, textStatus, error) { //if .getJSON call fails alert(textStatus + ": " + error); });
}
Wikipedia Viewer - Script Codes
Wikipedia Viewer - Script Codes
Home Page Home
Developer Sam Koshy
Username codinger
Uploaded November 06, 2022
Rating 3
Size 4,681 Kb
Views 8,096
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!

Sam Koshy (codinger) Script Codes
Name
Data Visualization - US GDP
Heat Map
Personal Portfolio Webpage
Random Quote Machine
Simon
Tic Tac Toe _ Alternate
Twitchtv Status
Tic Tac Toe
Camper News
Pomodoro Clock
Create amazing marketing copy 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!