Skip to content

Instantly share code, notes, and snippets.

@Armand-Lluka

Armand-Lluka/index.html

Created January 29, 2018 02:25
Show Gist options
  • Save Armand-Lluka/606dc8461cfb13dfe844462a8902b7f0 to your computer and use it in GitHub Desktop.
Save Armand-Lluka/606dc8461cfb13dfe844462a8902b7f0 to your computer and use it in GitHub Desktop.
Download ZIP
Wikipedia Viewer FreeCodeCamp
Raw
index.html
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Encode+Sans+Expanded|Roboto|Roboto+Mono" rel="stylesheet">
<title>Wikipedia Viewer</title>
</head>
<body>
<div class="container-fluid text-center">
<h1>Wikiepdia Viewer</h1>
<div id="block">
<input class="form-control mr-sm-2" type="text" id="searchTerm" placeholder="Search Wiki...">
<button class="btn btn-outline-success " type="submit" id="search">Search </button>
<a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">
<p> Random Article </h5>
</a>
</div> <!-- Search Bar and Button -->
</div> <!-- Container -->
<ul class="container-fluid text-center" id="output">
</ul>
</body>
</html>
Raw
script.js
// Run JQuery
$(document).ready(function() {
// When search clicked, run code
$('#search').click(function(){
// Get search input
var searchTerm = $('#searchTerm').val();
//API URL with searchterm
var url="https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&format=json&callback=?";
$.ajax({
type:"GET",
url: url,
async:false,
dataType: "json",
success: function(data) {
$('#output').empty()
for (var i = 0; i < data[1].length; i++){
$("#output").append("<li><a href= "+data[3][i]+">"+data[1][i] + "</a><p>"+data[2][i]+"</p></li>");
}
},
error: function(errorMessage){
alert("Error");
}
});
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Raw
style.css
body {
background-image: url(https://static.pexels.com/photos/264635/pexels-photo-264635.jpeg);
background-color: white;
}
.container-fluid {
position: relative;
top: 90px;
font-family: 'Roboto Mono', monospace;
font-weight: bold;
}
#block {
background-color: black;
opacity: .5;
padding: 70px;
width: 50%;
margin-right: auto;
margin-left: auto;
border-radius: 15px;
padding-bottom: 2%;
}
ul {
background-color: white;
opacity: .6;
border-radius: 40px;
}
button {
margin: 15px;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment