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 |
Tic Tack Toe | 3,361 Kb |
A Pen by Donald | 1,274 Kb |
Timestamp | 1,757 Kb |
Twitch TV Streamer | 3,006 Kb |
Pomodoro clock | 2,859 Kb |
Calculator | 3,226 Kb |
Code playground | 2,078 Kb |
Tribute page | 2,142 Kb |
Wikipedia Viewer | 2,469 Kb |
Personal Portfolio | 3,826 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 |
Canvas Background Effect | Sonick | 3,513 Kb |
Gulpfile | Aimhigherwebdesign-amy | 1,765 Kb |
A Pen by Patrick Cox | Pcridesagain | 2,899 Kb |
CSS Tooltips | Darylldoyle | 2,599 Kb |
Loading animation with css | Icebob | 2,947 Kb |
No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
Perforated foil | 0x04 | 2,617 Kb |
SVG Hover Animations | Kjbrum | 10,557 Kb |
Svg sky | Omodev | 7,070 Kb |
Classy Blockquote Styling | Andrewwright | 3,212 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!