Skip to content

Instantly share code, notes, and snippets.

@JayDevelopment

JayDevelopment/index.html

Last active August 17, 2018 11:46
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 JayDevelopment/cf0df6b0fdb27d154e35ec439ab91f80 to your computer and use it in GitHub Desktop.
Save JayDevelopment/cf0df6b0fdb27d154e35ec439ab91f80 to your computer and use it in GitHub Desktop.
Download ZIP
WikiQuest: A Wikipedia Search Engine App
Raw
index.html
<body>
<div class='container-fluid'>
<nav class='navbar navbar-inverse navbar-fixed-top bar'>
<div class='navbar-header'>
<a class='navbar-brand' href='#top'> WikiQuest </a>
</div>
<ul class='nav navbar-nav'>
<li class='active'>
<a href='https://en.wikipedia.org/wiki/Special:Random' target='blank'><span class='glyphicon glyphicon-education'></span> Click Me for a Random WikiQuest</a>
</li>
</ul>
<ul class='nav navbar-nav navbar-right'>
<li class='right-padding'>
<a href='https://codepen.io/JayDevelopment' target='blank'><span class='glyphicon glyphicon-user'></span> Jordan's Pens </a>
</li>
</ul>
</nav>
<a name='top'></a>
<div class='spacerTop'></div>
<div class='block'>
<h1>Every Quest Begins with Curiosity</h1>
<input type='text' class='form-control' id='searchItem' placeholder='Your WikiQuest Begins Here'>
<button id='searchButton' type='button' class='btn btn-primary'>Search</button>
</div>
<div class='spacer'></div>
<div class='block'>
<h1>Results<hr><br><span id='results'></span>
</div>
<div class='spacer'></div>
</div>
</body>
Raw
script.js
$(function() {
$("#searchButton").click(function() {
var searchItem = $("#searchItem").val();
$.ajax({
type: "GET",
url:
"https://en.wikipedia.org/w/api.php?action=opensearch&search=" +
searchItem +
"&callback=?",
async: false,
dataType: "json",
success: function(data) {
// console.log(data) it works
$('#results').html('');
// FOR EVAN: Integrating this for loop into the call was strenuous.
for (var i = 0; i < data[1].length; i++) {
$("#results").append(
"<a href=" +
data[3][i] +
' target="blank">' +
data[1][i] +
'</a><h3>' + data[2][i] + '</h3><br>'
);
}
},
error: function(error) {
alert("Error");
}
});
});
//type enter on keyboard to search
$('#searchItem').bind('keypress', function(x){
if(x.keyCode == 13) {
$('#searchButton').click();
};
}
)});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Raw
style.css
h1 {
text-align: center;
font-family: Bebas Neue;
}
.block {
background-color: black;
opacity: 0.8;
color: white;
padding: 1em;
width: 50%;
margin-right: auto;
margin-left: auto;
border-radius: 0.5em;
font-size: 1.5em;
}
.spacerTop {
padding-top: 5%;
}
.spacer {
padding: 2%;
}
body {
background: url('http://i65.tinypic.com/2py3o0k.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: white;
}
.right-padding {
padding-right: 1em;
}
hr {
width: 5em;
}
a {
color:white;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Raw
wikiquest-a-wikipedia-search-engine-app.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment