Skip to content

Instantly share code, notes, and snippets.

@ewathedoer

ewathedoer/Wikipedia Viewer.markdown

Last active August 9, 2016 11:16
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 ewathedoer/495c16692f073caa90fa9f1f687b06ef to your computer and use it in GitHub Desktop.
Save ewathedoer/495c16692f073caa90fa9f1f687b06ef to your computer and use it in GitHub Desktop.
Download ZIP
Wikipedia Viewer
Raw
index.html
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Wikipedia Viewer</title>
<meta name="author" content="Designed and coded by the doer. Intro graphic designed by Freepik.">
<meta name="description" content="The project created during Free Code Camp course according to Vikipedia Viewer specification">
</head>
<body class="container-fluid">
<section class="search">
<form class="row text-center">
<div id="query-box" class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3">
<h1>I want to learn&nbsp;about</h1>
<div class="input-group">
<input id="query" type="text" class="form-control" accept="audio/*" autocomplete="on" autofocus aria-label="write here what you want to learn about">
<span class="input-group-btn">
<button id="query-button" class="btn btn-default" type="submit">Go!</button>
</span>
</div><!-- /input-group -->
</div> <!-- col -->
</form> <!-- row -->
<div class="row">
<div class="col-xs-8 col-xs-offset-2 text-center">
<div id="no-query" class="hidden">
<h2>Don't resign from a chance to learn something new.<br/>Try <span class="accent-hint">Choose For Me</span> option.</h2>
</div>
<button id="random" class="btn btn-default">
Choose For Me
</button>
</div> <!-- col -->
</div> <!-- row -->
</section>
<section class="intro row">
<img id="intro-image" alt="The picture showing a learning boy" class="img-responsive center-block" src="http://theonewhodo.es/wikipedia-viewer/learn.png"/>
</section> <!-- row -->
<section class="random-result row">
<div class="yellow-box col-xs-12 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
<h2 id="random-result-title"></h2>
<div id="random-result"></div>
</div> <!-- col -->
</section> <!-- row -->
<section class="list-result row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
<ul id="article-list"></ul>
</div> <!-- col -->
</section> <!-- row -->
<footer>
<div id="back-to-top" class="row text-right hidden">
<a id="arrow-top" href="#query-box" class="accent">
back to top
<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
</a>
</div> <!-- row -->
<div class="row text-center">
<div class="col-xs-12 col-sm-4">
To read the whole article in <a href="https://www.wikipedia.org/" target="_blank" class="accent-link">Wikipedia</a><br/>click/tap the title.
</div>
<div class="col-xs-12 col-sm-4">
Wiki Viewer App<br/>
Read, learn, practice!
</div>
<div class="col-xs-12 col-sm-4">
Created by the doer<br/>
Intro graphic by <a href="http://www.freepik.com/" target="_blank" class="accent-link">Freepik</a>
</div>
</div><!-- row -->
</footer>
</body>
</html>
Raw
script.js
function randomArticle() {
$.getJSON("https://en.wikipedia.org/w/api.php?action=query&prop=extracts&format=json&generator=random&grnnamespace=0&callback=?", function(result) {
// button Choose For Me ready to be clicked again
$("#random").attr("disabled", false);
// hiding intro (empty state) before displaying the response from API
cleanIntro();
$.each(result.query.pages, function(key, page){
$("#random-result-title").html('<a href="http://en.wikipedia.org/?curid=' + page.pageid + '">' + page.title + '</a>');
$("#random-result").html(page.extract);
return false; //to display 1st element and finish the loop
});
$(".random-result").slideDown(function () {
arrowBack();
});
});
}
function searchArticle(query){
$.getJSON("https://en.wikipedia.org/w/api.php?action=query&format=json&generator=search&grnnamespace=0&prop=extracts&exlimit=max&explaintext&exintro&gsrsearch=" + query + "&callback=?", function(result) {
// button Choose For Me ready to be clicked again
$("#query-button").attr("disabled", false);
// hiding intro (empty state) before displaying the result from API
cleanIntro();
if (result.hasOwnProperty("query")) {
$.each(result.query.pages, function(key, page){
var extract = page.extract.length > 464 ? page.extract.substring(0,464) + "..." : page.extract;
$("#article-list").append('<li><h2><a href="http://en.wikipedia.org/?curid=' + page.pageid + '">' + page.title + '</a></h2>' + '<p>' + extract + '</p>' + '</li>');
});
} else {
hintChange(true);
}
arrowBack();
});
}
function cleanIntro (){
$(".intro").hide();
}
function hintChange (turnOn) {
if (turnOn) {
$("#no-query").removeClass("hidden");
$("#random").addClass("look");
} else {
$("#no-query").addClass("hidden");
$("#random").removeClass("look");
}
}
// back-to-top link visibility set
function arrowBack (){
if (!$(".intro").is(":visible") && $("body").height() - $("footer").height() > $(window).height()){
$("#back-to-top").removeClass("hidden");
} else {
$("#back-to-top").addClass("hidden");
}
}
$(document).ready(function() {
$("#random").on("click", function(e) {
// random button unfocusing
$(this).blur();
// disable the button before getting the response from API
$(this).attr("disabled", true);
// hiding article-list
$("#article-list").hide();
// hiding no-query help text and removing yellow look background of random after random being chosen
hintChange(false);
randomArticle();
e.preventDefault();
});
$("#query-button").on("click", function(e) {
// cleaning after previous search
$("#article-list").html("");
// making article-list visible again
$("#article-list").show();
// cleaning random result if displayed
$(".random-result").slideUp(function (){
// when content slided up calling arrowBack() when query is empty back-to-top section
arrowBack();
});
if ($("#query").val() === "") {
// if input is empty let's display empty state help and clean intro image
cleanIntro();
hintChange(true);
// if random hovered over #no-query span class removed else visible
$("#random").hover(function() {
$("#no-query span").removeClass("accent-hint");
}, function() {
$("#no-query span").addClass("accent-hint");
});
} else {
// disable the button before getting the response from API
$(this).attr("disabled", true);
// passing input text
searchArticle($("#query").val());
hintChange(false);
}
e.preventDefault();
});
// back-to-top focus
$("#arrow-top").on("click", function() {
$("#query").focus().select();
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Raw
style.css
/*
action color (links, buttons on hover and focus): #F50057;
secondary button color: #FFECB3;
*/
body {
font-family: 'Roboto Slab', serif;
color: #424242;
background: #00BCD4;
}
h1, #no-query h2, .btn {
color: #FFF;
}
#no-query h2 {
font-size: 1.5em;
}
.list-result ul {
padding-left: 0;
}
.list-result li h2, #random-result-title {
font-size: 2em;
background-color: #0097A7;
padding: 0;
border-radius: 0 10px 10px 0;
margin-left: -1em;
}
.list-result li h2 a, #random-result-title a {
display: block;
padding: 1em;
color: #FFF;
}
.list-result li {
list-style-type: none;
background-color: #B2EBF2;
margin-bottom: 2em;
padding: 1em 2em 2em;
border-radius: 10px;
}
.list-result li h2 a:hover,
.list-result li h2 a:focus,
.list-result li h2 a:active,
#random-result-title a:hover,
#random-result-title a:focus,
#random-result-title a:active {
background-color: #F50057;
border-radius: 0 10px 10px 0;
}
#query-button {
background-color: #FF4081;
}
#random, .list-result {
margin-top: 1.5em;
}
#random {
background-color: transparent;
border-color: #FFF;
}
#random.look {
background-color: #FFECB3;
color: #616161;
}
#random:hover,
#query-button:hover,
#random:focus,
#query-button:focus {
color: #FFF;
background-color: #F50057;
}
.random-result {
display: none;
}
.random-result > * {
background-color: #FFECB3;
padding: 0 2em 2em;
}
.random-result, .intro {
margin-top: 5em;
}
#intro-image {
height: 300px;
width: auto;
border-radius: 50%;
}
footer {
color: #B2EBF2;
margin-bottom: 5em;
}
footer div {
padding-bottom: 2em;
}
.accent {
color: #FFF;
}
.accent-link {
color: #FFF;
}
.accent-hint {
color: #FFECB3;
}
footer a:hover,
footer a:focus {
color: #F50057;
}
#arrow-top {
padding-right: 1em;
}
.list-result p, #random-result p,
.list-result li, #random-result li {
font-size: 1.2em;
}
.yellow-box {
overflow: hidden;
border-radius: 0 10px 10px 0;
}
/* media queries */
@media screen and (min-width: 1200px){
#no-query h2 {
font-size: 2em;
}
footer {
margin-top: 100px;
}
.search {
padding-top: 3em;
}
#arrow-top {
padding-right: 5em;
}
}
@media screen and (max-width:1199px){
footer {
margin-top: 5em;
}
}
@media screen and (max-width:767px){
.list-result p, #random-result p,
.list-result li, #random-result li {
font-size: 1em;
}
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300,100" rel="stylesheet" />
Raw
Wikipedia Viewer.markdown

Wikipedia Viewer

The pen uses Wiki API. A user can read a random article, search for a term, and see whole articles by clicking/tapping each title.
The app is designed according to Free Code Camp Wiki Viewer task specification.

A Pen by Ewa the doer on CodePen.

License.

Raw
wikipedia-viewer.markdown

Wikipedia Viewer

The pen uses Wiki API. A user can read a random article, search for a term, and see whole articles by clicking/tapping each title.
The app is designed according to Free Code Camp Wiki Viewer task specification.

A Pen by Ewa the doer on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment