Wikipedia viewer
How do I make an wikipedia viewer?
View the summary of a wikipedia article.. What is a wikipedia viewer? How do you make a wikipedia viewer? This script and codes were developed by Christian on 15 October 2022, Saturday.
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.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <section class="jumbotron flex-center"> <h1 class="text-center">Wikipedia viewer</h1> </section> <section class="flex-top form-group"> <input class="form-control" type="text" id="searchWiki" autofocus placeholder="Search what you need from wikipedia" /> <button class="ml-2 btn btn-danger" id="clearResults">Clear</button> </section> <section class="flex-center mt-4"> <a class="btn btn-primary pos-center" target="_blank" href="https://en.wikipedia.org/wiki/Special:Random">Random article</a> </section>
</header>
<main> <section class="container"> <ul class="list-group" id="wikiResults"> </ul> </section>
</main>
<footer class="text-center"> <p> Made with <span class="text-danger">❤</span> by <a href="https://codepen.io/chpecson">Christian Pecson</a> </p>
</footer> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Wikipedia viewer - Script Codes CSS Codes
html { height: 100%; }
body { background-color: #eee; min-height: 100%; position:relative; padding-bottom: 7vh;
}
footer { position: absolute; left: 0 ; right: 0; bottom: 0; height: 7vh;
}
.jumbotron { background: linear-gradient(rgba(0,0,0,0.5), rgba(0,1,10,0.8)), url("https://static.pexels.com/photos/207153/pexels-photo-207153.jpeg") no-repeat center center fixed; background-size: cover; height: 50vh;
}
.jumbotron > h1 { background-color: rgba(255,255,255,0.8); border-radius: 4em; padding: 2rem;
}
.flex-center { align-items: center; display: flex; justify-content: center;
}
.flex-top { align-items: flex-start; display: flex; margin: auto; justify-content: center; width: 50vw;
}
main > .container .list-group-item { overflow-x: auto; }
main > .container .list-group-item:odd { background-color: #fff;
}
Wikipedia viewer - Script Codes JS Codes
$(function() { var $searchWiki = $('#searchWiki'), $wikiResults = $('#wikiResults'), $clearResults = $('#clearResults'), wikiUrl = '//en.wikipedia.org'; $searchWiki.on('keydown', function(event) { var searchInput = event.target.value; if ($searchWiki.val().length !== 0) { $.ajax({ url: `${wikiUrl}/w/api.php`, data: { action: 'query', list: 'search', srsearch: searchInput, format: 'json' }, dataType: 'jsonp', success: function (wikiResults) { $wikiResults.html(''); $.each(wikiResults.query.search, function(result) { $wikiResults.prepend(` <li class="list-group-item my-2"> \r<a target="_blank" href="${wikiUrl}/wiki/${wikiResults.query.search[result].title}"> \r<h3 class="card-title my-4"> \r${wikiResults.query.search[result].title} \r</h3> \r</a> <section class="card-block"> ${wikiResults.query.search[result].snippet} </section> </li>`); }); } }); }; }) $searchWiki.on('keypress', function() { if($searchWiki.val() === '') { $wikiResults.html(''); } }); $clearResults.click(function() { $searchWiki.val(''); $wikiResults.html(''); });
});
Developer | Christian |
Username | chpecson |
Uploaded | October 15, 2022 |
Rating | 3 |
Size | 2,865 Kb |
Views | 24,288 |
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!
Name | Size |
Day 18 - Cruise ship | 3,491 Kb |
Day 16 - Charitable Organization | 3,314 Kb |
Tribute Page v1 | 5,740 Kb |
Journal | 2,059 Kb |
Layout and transition experiment | 2,201 Kb |
Portfolio | 5,958 Kb |
Day 10 -Photography | 3,550 Kb |
Day 3 - Tourist Spot | 2,682 Kb |
Day 12 - Club | 3,497 Kb |
Day 7 -Movie Trailer | 3,155 Kb |
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!
Name | Username | Size |
DFF Website | Hawcubite | 10,123 Kb |
Simple Responsive Text | Fbrz | 2,282 Kb |
Pomodoro Timer | Sdas13 | 2,900 Kb |
Sticky div | Kaslab | 2,225 Kb |
Button fills | Zubfatal | 5,205 Kb |
Drop Cap | Gsaiki | 1,571 Kb |
Super Discount | Orrinward | 3,225 Kb |
Ipad Mini Showcase | Hornebom | 10,479 Kb |
Text Blocks Over Image, Updated | KatieK2 | 3,122 Kb |
Horizontal slider on scroll | Alojzije | 2,672 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!