Wikipedia Viewer
How do I make an wikipedia viewer?
Wikipedia Viewer as part of Free Code Camp course.. What is a wikipedia viewer? How do you make a wikipedia viewer? This script and codes were developed by Adam on 28 November 2022, Monday.
Wikipedia Viewer - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wikipedia Viewer</title> <link href="https://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Neuton" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h1><span>Search</span> Wikipedia</h1> <input type="search" name="search" placeholder="Search"> <button type="button" id="search-button" class="btn"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>Search</button> <button class="btn random">Random Article</button><br> <ul></ul>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Wikipedia Viewer - Script Codes CSS Codes
html { font-size: 16px;
}
body { text-align: left; font-family: 'Fira Sans', sans-serif; background-color: #0983AB; color: #fff;
}
h1 { font-size: 3.5rem; border-bottom: 3px solid #FFB504; margin-bottom: 20px; padding-bottom: 5px;
}
@media (max-width: 600px) { h1 { font-size: 2.5rem; }
}
@media (max-width: 400px) { h1 { font-size: 2rem; }
}
h1 span { color: #FFB504;
}
input { border-radius: 10px; height: 35px; width: 250px; color: #111111; border: 3px solid #FFB504;
}
.btn { margin: 10px 5px; color: #fff; background-color: #065e7b; border: none;
}
.btn:hover { color: inherit;
}
.btn.random { background-color: #FFB504;
}
.btn.random:hover { background: #eaa500;
}
ul { margin-top: 20px; font-size: 1rem;
}
li { list-style-type: none; margin-top: 10px;
}
li:hover { background-color: #065e7b; border-left: 5px solid #FFB504; padding-left: 5px;
}
li a { color: #FFB504;
}
li a:hover { color: #FFB504; text-decoration: none;
}
Wikipedia Viewer - Script Codes JS Codes
/*Wikipedia article search for Free Code Camp using Bootstrap and JQuery*/
$(document).ready(function() { //Search when button clicked $("#search-button").click(function() { //Clear previous search results $("ul").html(""); //Store search query and url var searchString = $("input").val(); var url = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=" + searchString + "&callback=?"; var searchInfo = []; //ajax call to get wikipedia data $.ajax({ type: "GET", url: url, dataType: "json", async: false, success: function(data) { searchInfo = data; //for loop to display data in html for (i = 0; i < 10; i++) { $("ul").append("<li>" + '<a href="' + searchInfo[3][i] + '">' + searchInfo[1][i] + "</a><br>" + searchInfo[2][i] + "</li>"); } }, error: function() { $("ul").html("error"); } }); //Open random wikipedia page $(".random").click(function() { window.open("https://en.wikipedia.org/wiki/Special:Random"); }); });
});
Developer | Adam |
Username | rzencoder |
Uploaded | November 28, 2022 |
Rating | 3 |
Size | 3,276 Kb |
Views | 6,072 |
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 |
The Crystal Maze | 16,117 Kb |
CSS World Flags | 8,782 Kb |
Map Data Across the Globe | 3,900 Kb |
React Betting App | 6,005 Kb |
Markdown Previewer | 3,929 Kb |
Playable Piano Keyboard with Demos | 10,019 Kb |
Random Movie Quote Generator | 3,861 Kb |
Countdown Anagram Game | 7,625 Kb |
React Game of Life | 7,264 Kb |
Scrolling Effects Practice | 6,441 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 |
Banner Ad | Raquellorenzana | 4,172 Kb |
Svg sky | Omodev | 7,070 Kb |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
Parallax scrolling scene | Iharosi | 2,485 Kb |
Android Play Store With Slick Carousel | -J0hn- | 4,982 Kb |
Simple Weather App | Cmwebby | 0 Kb |
Ghost Buttons with CSS3 | Mithicher | 2,509 Kb |
Main page display | BarryKe | 4,562 Kb |
Scroll effect with text with help from Skrollr | Luxonglassing | 2,935 Kb |
SVG Animation | Thepheer | 4,793 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!