Skip to content

Instantly share code, notes, and snippets.

@ValentinTT
Last active August 5, 2017 21:38
Show Gist options
  • Save ValentinTT/526b5c167f126e8ce7415ad1bc9bec56 to your computer and use it in GitHub Desktop.
Save ValentinTT/526b5c167f126e8ce7415ad1bc9bec56 to your computer and use it in GitHub Desktop.
Wikipedia viewer
<div class="container">
<h2 class="center-align"> <i class="fa fa-wikipedia-w left-align" aria-hidden="true"></i>ikipedia viewer</h2>
<div class="row">
<div class="offset-m3 col s10 m6">
<div class="input-field">
<input id="search-input" type="text" name="search" class="validate">
<label for="search-input">Search</label>
</div>
</div>
<div class="col s1">
<a class="btn-floating btn-large waves-effect waves-light red search-button"><i class="material-icons right">search</i></a>
</div>
<p class="col s12 center-align"><a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Click here to read a random article.</a></p>
</div>
<div class="center-align">
<div class="preloader-wrapper big hide">
<div class="spinner-layer spinner-blue">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-yellow">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-green">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
<div class="right-align"><a href="#" class="white-anchor hide"><i class="fa fa-2x fa-times" aria-hidden="true"></i></a></div>
<div class="search-results">
<ul class="collapsible popout" data-collapsible="accordion">
</ul>
</div>
</div>
$(document).ready(function() {
console.log("Un mensaje de prueba");
$("#search-input").on("keydown", function(e) {
if ((e.keyCode === 13) & ($("#search-input").val().trim() !== "")) {
searchWikipedia();
}
});
$(".search-button").on("click", function(e) {
if ($("#search-input").val().trim() !== "") {
searchWikipedia();
}
});
$(".white-anchor").on("click", function(e) {
$(".white-anchor").addClass("hide");
$("li").remove();
});
function searchWikipedia() {
var searchText = $("#search-input").val().trim();
$("#search-input").val("");
$(".preloader-wrapper").removeClass("hide");
$(".preloader-wrapper").addClass("active");
$.ajax({
url: "https://en.wikipedia.org/w/api.php",
data: {
action: "query",
list: "search",
srsearch: searchText,
format: "json"
},
dataType: "jsonp",
success: function(x) {
$(".preloader-wrapper").addClass("hide");
$(".preloader-wrapper").removeClass("active");
$(".white-anchor").removeClass("hide");
try {
$("li").remove();
x.query.search.forEach(function(searchResult) {
console.log(searchResult.title.replace(/ /g, "_"));
var searchResultCollapsible =
'<li><div class="collapsible-header">' +
searchResult.title +
'</div><div class="collapsible-body">' +
searchResult.snippet +
'... <a class="read-more-link" href="https://en.wikipedia.org/wiki/' +
encodeURI(searchResult.title.replace(/ /g, "_")) +
'" target="_blank">Read More</a></div></li>';
$(".search-results ul").append(searchResultCollapsible);
}, this);
console.log("search length: ", x.query.search.length);
console.log("search: ", x.query.search);
} catch (TypeError) {}
}
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/ace5bce722.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
body, html {
margin: 0px;
padding: 0px;
background-color: #1e1e1e;
color: #f4f4f4;
}
.search-results {
color: #1e1e1e;
}
.collapsible-body {
background-color: #f4f4f4;
}
a {
text-decoration: none;
outline: 0;
}
.white-anchor {
color: white;
}
.read-more-link {
transition: color .3s linear;
-moz-transition: color .3s linear;
-webkit-transition: color .3s linear;
}
.read-more-link:hover {
color: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment