Wikipedia Viewer
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 Donald on 10 September 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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<div class="container-fluid"> <div class = "box">
<a target="_blank" href="https://en.wikipedia.org/wiki/Special:Random"><p>Click here for a random Wikipedia article </p></a> <input type="text" class="form control text-center" placeholder="or Search" id ="userInput"></input> <button class="btn large" type="submit" id="search"><i class="fa fa-search" ></i></button> </div>
<div id="result"></div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Wikipedia Viewer - Script Codes CSS Codes
body { background-color: #99f; text-align: center;
}
.box { margin: 50px;
}
.box2 { border-style:solid; border-width: 1px; border-radius: 5px; background-color: lightgray; margin: 3px; padding: 10px 5px 10px 5px;
}
p { font-size: 20px; color: burgandy; font-weight: bold;
}
.large { font-size: 25px; color: blue;
}
#userInput { font-size: 20px; width: 300px; height: 45px;
}
#result { font-size: 24px; margin: 10px; padding: 10px;
}
Wikipedia Viewer - Script Codes JS Codes
$("#userInput").keyup(function(event){ if(event.keyCode == 13){ $("#search").click(); }
});
document.getElementById("search").addEventListener("click", lookUp);
function lookUp() { var searchThis = $("#userInput").val(); var apiURL = 'https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=' + searchThis + '&format=json&callback=?'; //clear the previous result $('#result').html('');
$.ajax({ url: apiURL, dataType: "jsonp", success: function(x) { var output = document.getElementById("result"); for (var i = 0; i < 10; i++) { output.innerHTML +='<div class="box2"> <a target="_blank" href="https://en.wikipedia.org/wiki/' + x.query.search[i].title + '">' + x.query.search[i].title +'</a>' + '<br>' + x.query.search[i].snippet + '<br>' + '</div>'; } } });
}
Developer | Donald |
Username | donaldk7 |
Uploaded | September 10, 2022 |
Rating | 3 |
Size | 2,469 Kb |
Views | 34,408 |
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 |
Quote of the Day | 2,224 Kb |
Show the Local Weather | 3,163 Kb |
Timestamp | 1,757 Kb |
Twitch TV Streamer | 3,006 Kb |
Simon game | 3,768 Kb |
Tic Tack Toe | 3,361 Kb |
A Pen by Donald | 1,274 Kb |
Code playground | 2,078 Kb |
Pomodoro clock | 2,859 Kb |
Calculator | 3,226 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 |
Blog | Rottingroom | 1,430 Kb |
Weather App | OmranAbazid | 2,596 Kb |
Spiralator 9000 | AdmiralPotato | 4,671 Kb |
Virtual vinyl | Davidpanik | 3,474 Kb |
Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
Super Discount | Orrinward | 3,225 Kb |
Wavy Road with Dashes | Jonobr1 | 2,679 Kb |
Process Accordion | Devilskitchen | 31,432 Kb |
Header Line Issue | Charlie-volpe | 1,768 Kb |
Flat buttons for Eliassen.com | Kdooley89 | 1,737 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!