| <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 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> |
| 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(); | |
| }); | |
| }); |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> |
| /* | |
| 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; | |
| } | |
| } |
| <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" /> |
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.
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.
