Wikipedia API

Developer
Claudia Contreras
Size
2,802 Kb
Views
68,816
  1. Wikipedia API Previews
  2. Wikipedia API HTML Codes
  3. Wikipedia API CSS Codes
  4. Wikipedia API JS Codes

How do I make an wikipedia api?

What is a wikipedia api? How do you make a wikipedia api? This script and codes were developed by Claudia Contreras on 14 October 2022, Friday.

Wikipedia API Previews
IQ Test

Wikipedia API - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wikipedia API</title> <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Raleway" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="conatiner"> <div class="text-center"> <h1>Wikipedia API Search</h1> <h4>Free Code Camp Challenge</h4> <a href = "https://en.wikipedia.org/wiki/Special:Random" target = "_blank"> <img src = "http://www.seoandsemservices.com/images/wikipedia.png" width = 100px> </a><br> <input class="formControl" id="searchWiki"> <button id="search" type="button" class="btn">Search</button> <p id="instructions"> Press the wikipedia button for a random article <br>or input your search term.</p> </div> <center> <ul id="output"> <li></li> </ul> </center>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Wikipedia API - Script Codes CSS Codes

body { margin: 25px; font-family: 'Raleway', sans-serif; color: #18677F;
}
h1 { font-family: 'Alfa Slab One', cursive; color: #3E707F;
}
button { font-family: 'Alfa Slab One', cursive; color: #3E707F;
}
#instructions { padding: 10px;
}
img { margin: 15px;
}
a { font-family: 'Alfa Slab One', cursive; font-weight: normal; color: #3E707F;
}
ul { list-style-type: none;
}
li { text-align: left; border-radius: 25px; width: 85%; padding: 10px 5px 5px 5px; margin: 25px 10px 0px 10px; background: #d3d3d3; border-left: 5px solid transparent; border-right: 5px solid transparent; box-shadow: 10px 10px 10px 2px rgba(0, 0, 0, 0.5);
}
li:hover { border-left: 5px solid #3E707F; border-right: 5px solid #3E707F;
}

Wikipedia API - Script Codes JS Codes

//Run JQuery
$(document).ready(function() { //When search is clicked run the code $("#search").click(function() { //Search the input var searchTerm = $("#searchWiki").val(); //API url with searchTerm var wikiURL = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&limit=5&format=json&callback=?"; $.ajax({ type: "GET", url: wikiURL, async: false, dataType: "json", success: function(data) { //Get Heading //console.log(data[1][0]); //Get Description //console.log(data[2][0]); //Get Link //console.log(data[3][0]); //This will clear out entry if any $("#output").html(" "); //For loop to diplay the first 5 entries for (var i = 0; i < data[1].length; i++) { $("#output").prepend("<li><a href=" + data[3][i] + " target = '_blank'>" + data[1][i] + "</a><p>" + data[2][i] + "</p></li>"); } //clears search box after entry is retrieved $("#searchWiki").val(" "); }, error: function(errorMessage) { alert("Error"); } }); }); $(document).keypress(function(e) { if (e.which == 13) { $("#search").click(); } });
});
Wikipedia API - Script Codes
Wikipedia API - Script Codes
Home Page Home
Developer Claudia Contreras
Username coderpilot
Uploaded October 14, 2022
Rating 3
Size 2,802 Kb
Views 68,816
Do you need developer help for Wikipedia API?

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!

Claudia Contreras (coderpilot) Script Codes
Name
Weather App
Random Quote Generator
Walt Disney Tribute Page
Twitch API
Coder Pilot Portfolio
TEst
Create amazing blog posts with AI!

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!