Wikipedia Viewer

Developer
Sky
Size
3,538 Kb
Views
2,024
  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 Sky on 29 January 2023, 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='https://code.jquery.com/ui/1.12.1/themes/vader/jquery-ui.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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.1/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Wikipedia Viewer - Script Codes CSS Codes

html { min-height: 100vh;
}
body { background-image: -webkit-linear-gradient( 315deg, #52E5E7 0%, #130CB7 100%); background-image: linear-gradient( 135deg, #52E5E7 0%, #130CB7 100%); color: #222; font-family: 'Roboto', sans-serif; font-size: 16px; margin: 0 auto; max-width: 1024px; min-width: 280px;
}
#form { color: #333; font-size: 16px; padding-top: 38vh; text-align: center;
}
.search-icon { color: #333; font-size: 5em; font-weight: bold; margin-right: 10px; vertical-align: middle;
}
#form { cursor: pointer;
}
#input { background-color: #222; border-radius: 4px; border-style: none; color: #eee; font-weight: bold; height: 3.5em; margin-top: 1em; padding: .5em; text-indent: .75em; width: 16px;
}
#input:focus { outline: none;
}
.random-link { margin-top: .75em;
}
.random-link a { color: #222; font-size: 14px;
}
#results { margin: 2em auto 4em; width: 90%;
}
.article { border-bottom: 1px solid rgba(255,255,255, 0.1); color: inherit; display: block; padding: 1.25em; text-decoration: none;
}
.article:hover { background-color: #222; border-radius: 5px; box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); color: #EEE; -webkit-transition: all .5s; transition: all .5s;
}
.article-title { font-size: 1.2em; font-weight: bold; margin: 0 0 .25em 0;
}
.article-extract { margin: 0;
}

Wikipedia Viewer - Script Codes JS Codes

$(initializePage)
// Register the `esc` key on keyup to reset the page
$(document).keyup((e) => { const key = e.which || e.keyCode || e.charCode; if (key === 27) initializePage();
});
// This function gets called on page load and when the user presses `esc` to reset the search
// It creates the HTML for the search icon which can be clicked to generate a search field
function initializePage() { $('body').html( `<form id="form" class="ui-widget"> <i class="fa fa-search search-icon"></i> <span class="page-title">Search Wikipedia</span> </form> <div id="results"></div>` ).css({height: '100vh'}); $('#form').on('submit', search); $('.search-icon, .page-title').on('click', generateInputField)
}
// Fade everything out, replace the search icon with an input field,
// then fade it all back in with some animation effects
function generateInputField () { $('#form').fadeOut(250, () => { $('#form').html( `<input id="input" type="search" autocomplete="off" placeholder="Search Wikipedia..."> <div class="random-link"> <a href="https://en.wikipedia.org/wiki/special:random" target="_blank"> Or, view a random article instead? </a> </div>` ); $('#input').on('input', showAutoComplete).animate({'width': '250px'}, 350, function() { $(this).focus().animate({'border-radius': '25px'}, 750); }); }).fadeIn(250);
}
// Call the Wikipedia API to populate the autocomplete menu
function showAutoComplete() { $('.random-link').hide(); var url = 'https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&search=' + $('#input').val(); $.getJSON(url, function(data) { $("#input").autocomplete({ source: data[1], select: (e, ui) => search(e, ui.item.value) }); });
}
// Call the Wikipedia API to present search results when search is submitted
function search(event, searchTerm) { event.preventDefault(); if (!searchTerm) searchTerm = $('#input').val(); $('#input').val(searchTerm).autocomplete('close'); $('#results').empty(); $('.random-link').hide(); $('#form').animate({'padding-top': '1em'}, 1000, function() { var url = 'https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&search=' + searchTerm; $.getJSON(url, showResults); });
}
// show the final search results
function showResults(data) { if (data[1].length === 0) { $('#results').html( `<div class="article" style="text-align: center"> No results for: ${$('#input').val()} Please try another search. </div>` ); $('#results').on('click', initializePage); return; } // Show each result every 200ms and adjust body height to 100% to avoid repeated background image data[1].forEach(function(e, i) { setTimeout(function() { $('#results').append( `<a class="article animated slideInUp" target="_blank" href="${data[3][i]}"> <p class="article-title">${data[1][i]}</p> <p class="article-extract">${data[2][i]}</p> </a>` ); if(i === data[1].length - 1) $('body').css({'height': '100%'}); }, i * 100); });
}
Wikipedia Viewer - Script Codes
Wikipedia Viewer - Script Codes
Home Page Home
Developer Sky
Username skycoder
Uploaded January 29, 2023
Rating 3
Size 3,538 Kb
Views 2,024
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!

Sky (skycoder) Script Codes
Name
Use the Twitch.tv JSON API
Vanilla JS Forismatic Example
Bootstrap 3 Grid Example
Show the Local Weather - and a local background image
Dark Sky - Simple 5-day Forecast
Feather Icons
A Pen by Sky
Colors and Sounds
JSONP Examples with the Dark Sky API
Ionicons
Create amazing video scripts 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!