| <html> | |
| <head> | |
| <title>Wikipedia Search Engine</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content=""> | |
| <meta name="author" content="Ojini Chizoba Jude"> | |
| <link href="https://fonts.googleapis.com/css?family=Rubik:400" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"> | |
| <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> | |
| </head> | |
| <body> | |
| <div class="text-center container"> | |
| <div class="home"> | |
| <!-- heading section--> | |
| <div class="row col-md-12 isi"> | |
| <h1 class="headline header">Wikipedia Search Engine <img src="https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" alt="wikipedia logo"></h1> | |
| </div> | |
| <!-- search section--> | |
| <div class="searchSection"> | |
| <div class="row"> | |
| <div class="col-md-12 ochucho"> | |
| <input type="search" placeholder="Search Wikipedia..." id="searchField" class="form-control wiki-search-input"> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <button class="btn btn-default" id="searchBtn">Wiki Search</button> | |
| <a href="http://en.wikipedia.org/wiki/Special:Random" target="_blank" class="otutu"><button class="btn btn-default">View random article</button></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="answer"> | |
| <div class="row"> | |
| <div class="results"></div> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <p>Made with <i class="fa fa-coffee" aria-hidden="true"></i> and <i class="fa fa-headphones" aria-hidden="true"></i> by <a href="https://github.com/deityhub" title="Deityhub" target="_blank">Ojini Chizoba</a></p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
| $(document).ready(function(){ | |
| $('#searchField').focus(); | |
| //This works when you click a button | |
| $('#searchBtn').on('click', function(e){ | |
| var searchField = $('#searchField').val(); | |
| $('.results').html(''); | |
| e.preventDefault(); | |
| /*checks if the user typed any keyword*/ | |
| if(searchField !== ""){ | |
| $('.isi').addClass('hidden'); | |
| $('.otutu').addClass('hidden'); | |
| $('.ochucho').css({ | |
| 'background-color': 'whitesmoke' | |
| }); | |
| $('body').css({ | |
| 'background-color': 'whitesmoke' | |
| }); | |
| $.ajax({ | |
| url: 'https://en.wikipedia.org/w/api.php?action=opensearch&search=' + searchField + '&format=json&callback=?&limit=500', | |
| method: 'GET', | |
| dataType: 'jsonp', | |
| async: false, | |
| success: function(data){ | |
| for(var i=0; i < data[1].length; i++){ | |
| $('.results').append('<h2>' + '<a href="'+ data[3][i]+'" target="_blank">' + data[1][i] + '</a>' + '</h2>'+ '<h4>' + data[2][i] + '</h4>'); | |
| } | |
| }, | |
| error: function(err){ | |
| alert("An error just occured, refresh this page!!!"); | |
| } | |
| }); | |
| }else{ | |
| alert("Enter any keyword into the search field"); | |
| } | |
| }); | |
| //This works when the user presses enter key | |
| $('#searchField').bind('keypress', function(key){ | |
| if(key.keyCode == 13){ | |
| $('#searchBtn').click(); | |
| } | |
| }) | |
| }); |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
| body{ | |
| font-family: 'Lobster', cursive; | |
| background-color: whitesmoke; | |
| font-size: 1.5em; | |
| line-height: 1.6; | |
| font-weight: 400; | |
| color: #222; | |
| margin-top: 5px; | |
| } | |
| h1 { | |
| line-height: 1.2; | |
| letter-spacing: -.1rem; | |
| font-size: 1.5em; | |
| margin: 12px; | |
| } | |
| h2 { | |
| line-height: 1.25; | |
| letter-spacing: -.1rem; | |
| font-family: 'Rubik', sans-serif; | |
| } | |
| h4 { | |
| line-height: 1.3; | |
| letter-spacing: -.1rem; | |
| font-family:'Rubik', cursive; | |
| } | |
| #searchField{ | |
| padding: 3px; | |
| font-family: cursive; | |
| width: 50%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| font-family: 'Rubik', cursive; | |
| } | |
| button{ | |
| padding: 5px; | |
| margin: 15px; | |
| font-family:'Rubik', cursive; | |
| } | |
| a:active, | |
| a:hover { | |
| outline: 0; | |
| } | |
| a { | |
| color: lightskyblue; } | |
| a:hover { | |
| color: #0FA0CE; | |
| } | |
| @media (min-width: 550px) { | |
| h1 { font-size: 4.0rem; } | |
| h2 { font-size: 3.2rem; } | |
| h3 { font-size: 2.6rem; } | |
| } | |
| .results{ | |
| text-align: left; | |
| width: 50%; | |
| margin-right: auto; | |
| margin-left: auto; | |
| } | |
| .footer{ | |
| font-family:'Rubik', cursive; | |
| padding: 3px; | |
| margin: 5px; | |
| } | |
| .ochuchu{ | |
| width: 100%; | |
| } |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> |
This wikipedia search engine helps to successfully search for content on the wikipedia database, for various purposes ranging from studies, research, or even to complete ones assignment. This is app can be a an alternative, but it's just for wikipedia only.
A Pen by Ojini Chizoba Jude on CodePen.