Skip to content

Instantly share code, notes, and snippets.

@emygeek

emygeek/index.html

Last active February 10, 2017 13:57
Show Gist options
  • Save emygeek/8c22256628afa93703d55abf7107d465 to your computer and use it in GitHub Desktop.
Save emygeek/8c22256628afa93703d55abf7107d465 to your computer and use it in GitHub Desktop.
Download ZIP
Wikipedia Viewer (FreeCodeCamp)
Raw
index.html
<section id="main">
<div class="container">
<div class="col-md-6 col-md-offset-3 text-center">
<div class="row">
<img src="http://res.cloudinary.com/emygeek/image/upload/v1486628599/icon-wiki_ypfgf1.png" class="img-responsive" >
<h2>Wikipedia Viewer Project by <a href="#">Marie</a></h2>
</div>
<div class="row">
<input type="search" name="search" id="search" placeholder="Search...">
<input type="submit" name="btn-search" id="btn-search" class="btn btn-primary" value="Search">
<div class="articles" id="articles">
</div>
</div>
</div>
</div>
</section>
Raw
script.js
$(document).ready(function(){
$("#btn-search").click(function(){
var user_search = $("#search").val();
/*var url = "https://en.wikipedia.org/w/api.php?action=query&titles=" + user_search + "&prop=revisions&rvprop=content&format=json";*/
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + user_search + "&prop=revisions&rvprop=content&format=json&callback=?";
$.ajax({
url: url,
dataType: "jsonp",
success: function(data){
$("hr").remove(); //Remove hr and children elements if any
$("#articles").empty(); //Removes all children elements of articles
$("#articles").before("<hr>");
$("#articles").append("<h3>" + data[1].length + " Results for " + user_search + "</h3>");
/* The array we get is a multi-dimensional array
Array[0] is search item
Array[1] is results titles
Array[2] is results descriptions
Array[3] is links to the articles
Array[1], Array[2], Array[3] have the same length */
$.each(data[1], function(index, value){
$("#articles").append("<div class='item'><a href='" + data[3][index] + "' target='_blank'><div class='item-title'>" + value + "</div><div class='item-desc'>" + data[2][index] + "</div></a></div>");
});
}
});
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Raw
style.css
body{
font-size: 16px;
line-height:2;
background: #eaf9fc;
font-family: cursive;
}
h2{
margin-bottom: 30px;
}
p{
font-size:16px;
line-height:2;
}
hr{
margin-top: 40px;
margin-bottom:40px;
border-width: 3px;
}
input[type=search]{
border-radius: 0px;
border: 1px solid #cdcdcd;
height:40px;
vertical-align:middle;
box-shadow: 0px 0px 4px #c8a4a4;;
}
input[type=submit]{
border-radius: 0px;
width:100px;
height:40px;
}
#main img{
height:170px;
margin: 30px auto;
}
#articles .item{
padding:30px 20px;
border: 1px solid #b6cee0;
border-left:9px solid #b6cee0;
border-radius: 3px;
margin: 20px auto;
background:#fff;
}
#articles .item:hover{
box-shadow:3px 5px 15px rgba(44, 42, 42, 0.51);
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Raw
wikipedia-viewer-freecodecamp.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment