Skip to content

Instantly share code, notes, and snippets.

@marcuszierke
Last active October 19, 2017 17:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marcuszierke/15e02e2813b9afe32d529f8f744380bd to your computer and use it in GitHub Desktop.
Save marcuszierke/15e02e2813b9afe32d529f8f744380bd to your computer and use it in GitHub Desktop.
As part of the FreeCodeCamp (FCC) I was suppose to create a wikipedia viewer with Ajax and jQuery.
<!DOCTYPE html>
<html>
<head>
<title>Wikipedia Viewer</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<style>
input[type=text] {
width: 250px;
box-sizing: border-box;
border: 3px solid #ccc;
border-radius: 40px;
font-size: 16px;
background-color: white;
background-image: url("https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png");
background-position: 12px 15px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
transition: width 0.4s ease-in-out;
text-align: left;
font-family: "Arial";
outline: none;
}
input[type=text]:focus {
float: middle;
width: 60%;
}
body {
font-family: "Cinzel", serif;
background-color: white;
}
#search {
padding-top: 7%;
padding-left: 595px;
}
h1 {
padding-top: 10%;
text-align: center;
}
#button {
padding-top: 2%;
text-align: center;
font-size: 17px;
font-family: 'Quicksand', sans-serif;
}
button {
align-items: center;
border: 3px solid #ccc;
background-color: white;
outline: none;
}
#output {
margin-top: 1%;
border-radius: 25px;
font-family: "Cinzel";
text-decoration: none;
}
#button a {
text-decoration: none;
}
#searchClick {
border: none;
font-style: bold;
width: 30px;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="wikipediaViewerJS.js"></script>
</head>
<body>
<h1>WIKIPEDIA PAGE VIEWER</h1>
<div id="search">
<input type="text" id="searchText" placeholder="Search ...">
</div>
<div id="button">
<button><a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">
GET A RANDOM QUOTE
</button>
</div>
<div id="output"></div>
</body>
</html>
$(function() {
$("#searchText").keypress(function(e) {
if(e.keyCode === 13) {
var searchText = $("#searchText").val();
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchText + "&format=json&callback=?";
$.ajax({
url: url,
type: "GET",
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json",
success: function(data, status, jqXHR) {
console.log(data);
$("#output").html();
for(var i = 0; i < data[1].length; i++) {
$("#output").prepend("<div><div class = 'well'><a href = " + data[3][i] + "><h2>" + data[1][i] + "</h2>" + "<p>" + data[2][i] + "</p></a></div></div>");
}
}
});
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment