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 |
Scatterplot Graph D3 | 5,762 Kb |
Calculator | 4,572 Kb |
React Leaderboard | 4,333 Kb |
Scrolling Effects Practice | 6,441 Kb |
Markdown Previewer | 3,929 Kb |
Heat Map Data Visualisation D3 | 5,591 Kb |
Map Data Across the Globe | 3,900 Kb |
Countdown Anagram Game | 7,625 Kb |
Wikipedia Viewer | 3,276 Kb |
The Crystal Maze | 16,117 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 |
Polygon Dodecahedron in CSS | Vennsoh | 7,606 Kb |
Flex Chart | James_zedd | 4,111 Kb |
Beautiful canvas stars | Matths | 2,399 Kb |
Dragonball Dragon Radar | DouglasGlover | 2,157 Kb |
Cartoon Bomb | Tcmulder | 4,929 Kb |
Dribbble Template | ExtremelyGinger | 2,204 Kb |
Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 Kb |
Fullscreen audio play button | 72 | 2,148 Kb |
React Template | Isac | 1,241 Kb |
CSS eye follow | Pedrocampos | 2,592 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!