Wikipedia Viewer(FCC project)

In this example below you will see how to do a Wikipedia Viewer(FCC project) with some HTML / CSS and Javascript

This is Wikipedia Viewer Web App. I made it like a FCC project. The app is not responsive. It looks good only on > 1170px screens.

Thumbnail
This awesome code was written by belodpav, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright belodpav ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Wikipedia Viewer(FCC project)</title>
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:700,900" rel="stylesheet">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!-- =====================
          Main Page
     =====================
-->
<div class="container text-center">
  <div class="entire-page">
    <h1 class="main-logo"><span class="logo-first-letter">W</span>ikipedia Viewer</h1>
    <div class="row">
      <div class="col-lg-6 col-lg-offset-3">
          <input class="search-input" type="text" placeholder="Your request here..">
      </div>
    </div>
    <div class="actions">
      <button class="myBtn btn-search">Search</button><!--
   --><a target="_blank" href=""><button class="myBtn btn-luck">I'm lucky</button></a>
    </div>
 </div> 
</div>
<!-- =====================
          Result Page
     =====================
-->
<div class="result-page">
  <div class="header">
    <div class="container">
      <a href=""><h1 class="result-logo"><span class="logo-first-letter">W</span>ikipedia Viewer</h1></a>
      <div class="col-lg-6">
        <input class="search-input" type="text" >
      </div>
      <button class="myBtn btn-search">Search</button>
      <div class="dataLang">
        <span class="title-sw">Wiki database</span>
        <div class="active lang-sw "><span>en</span></div><!--
     --><div class="lang-sw lang-default"><span></span></div>
      </div>
    </div>
  </div>
  <div class="content"></div>
  <div class="cards container">
      <!-- =====================
                Cards container
           =====================
-->
    </div>
</div>
<!-- =====================
         Footer
     =====================
-->
<footer><small>Designed by <a target="_blank" href="https://twitter.com/belodpav">Pavel Belodurin</a></small></footer>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/belodpav/wikipedia-viewerfcc-project-aBbeyv */
/* Basic */
body, html, h1, h3, p, input {
  padding: 0;
  margin: 0;
}
body {
  background-color: #24bce4;
  font: 400 16px/26px "Lato", sans-serif;
  letter-spacing: .06em;
  color: #555;
}
h1, h2, h3, h4 {
  color: #333;
}

/* Main Page */

.entire-page {
 
  padding: 160px 0 0 0;
}
/* Logo */

.main-logo {
  font: 300 60px/60px "Lato", sans-serif;
  color: #fff;
  margin-bottom: 50px;
}
.logo-first-letter {
  font: 700 60px/60px "Raleway", sans-serif;
  color: #111;
}
/* search input styles */
.search-input,
.myBtn {
  border: none;
  border-radius: 4px;
  height: 40px;
  letter-spacing: .06em;
  font: 400 16px/40px "Lato", sans-serif;
}
.search-input {
  padding: 0 15px;
  margin-bottom: 30px;
  width: 100%;
}
/* Button */
.myBtn {
  font-weight: 700;
  color: #333;
  padding: 0 35px;
  background-color: #f6f6f6;
}
.myBtn:hover {
  background-color: #f2f2f2;
}
.actions .myBtn:first-of-type {
  margin-right: 10px;
}

/* Result page */
.result-page {
  display: none;
}
.header {
  margin-bottom: 60px;
  height: 90px;
  line-height: 90px;
  text-align: left;
  background-color: #24bce4;
  
}
.result-logo {
  display: inline-block;
  font: 400 22px/22px "Lato", sans-serif;
  color: #fff;
}
.result-logo .logo-first-letter {
  font-size: 22px;
  line-heigth: 22px;
}

.header .col-lg-6 {
  float: none !important;
  padding: 0 10px 0 20px;
  display: inline-block;
}
.header a {
  line-height: 22px;
  display: inline-block;
  text-decorate: none;
}
input:-ms-input-placeholder {
  color: rgba(0, 0, 0, .4);
}
.lang-sw {
  cursor: pointer;
  display: inline-block;
  background-color: rgba(255, 255, 255, .3);
  line-height: 40px;
  padding: 0 10px;
  font-weight: 700;
  color: #24bce4;
}
.dataLang {
  display: inline-block;
  color: #fff;
  float: right;
}

.active {
  background-color: rgba(255, 255, 255, .9);
  color: #555;
}
.title-sw {
  margin-right: 10px;
}
/* Card's Styles */
.card-h,
.card-v {
  margin-bottom: 30px;
  width:  100%;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.15);
  overflow: hidden;
  transition: all .3s ease;
}
.card-h {
  height: 200px;
}
.card-v {
 
}
.card-h:hover,
.card-v:hover {
  transform: scale(1.02);
  transition: all .3s ease;
}

.text-card, .image-info {
  display: inline-block;
  vertical-align: top;
}
.text-card {
  padding: 30px;
  width: 60%;
  height: 200px;
  
  
}
h3 {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1em;
}
p {
  font-size: inherit; 
}
.text-card-full {
  padding: 30px;
  width: 100%;
  height: 100%;
}
/* Image style */
.image-info,
.img-bg,
.img-content,
.img-content img {
  height: 100%;
}
.image-info,
.img-bg {
  right: 0;
  top: 0;
}
.img-bg,
.img-bg img,
.img-content {
  width: 100%;
}
.img-bg,
.img-content {
  position: absolute;
}
.image-info {
  float: right;
  width: 40%;
  line-height: 0;
  background-color: #051448;
  text-align: center;
  position: relative;
}
.img-bg {
  z-index: 1;
  opacity: .3;
  filter: blur(3px);
  overflow: hidden;
}
.img-content {
  z-index: 1000;
  text-align: center;
}
.img-content img {
  display: inline-block;
}

.image-info-v, .text-card-v {
  display: block;
  
}
.image-info-v {
  height: 200px;
  width: 100%;
  overflow: hidden;
  background-color: #051448;
  position: relative;
}
.text-card-v {
  padding: 30px;
}


/* references */
.actions a {
  text-decorate: none;
}

.card-reference {
  color: inherit;
  text-decoration: none;
  display: block;
}
.card-reference:hover {
  color: inherit;
  text-decoration: none;
}
/* Footer */
footer {
  padding: 80px 0 30px 0;
  text-align: center;
  color: rgba(255,255,255,.7);
}
footer a {
  color: inherit;
  text-decoration: underline;
}

/*Downloaded from https://www.codeseek.co/belodpav/wikipedia-viewerfcc-project-aBbeyv */
var searchInput1 = $(".entire-page .search-input"),
    searchInput2 = $(".result-page .search-input"),
    countryCode = "",
    localLangSearch = false;

// Getting users request from input field

function getInputText(input) {
    return input.val();
}
function putInputRequest(request){
  searchInput1.val(request);
  searchInput2.val(request);
}

function getWikiData (request, country) {
      // ==============================================
      //          Getting data from Wikipedia
      // ===============================================
      var langSearch = "en";
      if (localLangSearch) {
        langSearch = country;
      }
      $.getJSON("https://" + langSearch + ".wikipedia.org/w/api.php?action=query&format=json&prop=pageimages%7Cpageterms%7Cextracts%7Cinfo&list=&generator=search&piprop=thumbnail&pithumbsize=500&pilimit=10&wbptterms=description&exsentences=3&explaintext=1&exlimit=10&inprop=url&exintro=1&gsrsearch=" + request + "&gsrlimit10=&callback=?", function(wikiData){

        var html = "",
            wikiPagesList = wikiData.query.pages,
            keys = [];

        // Getting pageid list
        for (var key in wikiPagesList) {
          keys.push(key);
        };
        // ==============================================
        //          Making horizontal cards left column
        // ===============================================
        $(".cards").append("<div class='row'><div class='col-lg-8'>");

        for (var i = 1; i < keys.length; i++) {
          //-------------
          html ="";
          var descr = wikiPagesList[keys[i]].extract, 
              imgUrl = "";


          if (descr.length > 140) {
            descr = descr.substring(0,140) + "...";
          }
          if (typeof(wikiPagesList[keys[i]].thumbnail) !== 'undefined') {
            html += "<a class='card-reference' target='_blank' href='" + wikiPagesList[keys[i]].fullurl + "'><div class='card-h'><div class='text-card'><h3>";
            html += wikiPagesList[keys[i]].title;
            html +="</h3>";
            html += "<p>" + descr + "</p>";
            html += "</div><!-- -->";
            html += "<div class='image-info'><div class='img-bg'><img class='' src='" + wikiPagesList[keys[i]].thumbnail.source + "'></div><div class='img-content'><img class='' src='" + wikiPagesList[keys[i]].thumbnail.source+ "'></div></div>";
           } else {
            html += "<a class='card-reference' target='_blank' href='" + wikiPagesList[keys[i]].fullurl + "'><div class='card-h'><div class='text-card-full'><h3>";
            html += wikiPagesList[keys[i]].title;
            html +="</h3>";
            html += "<p>" + descr + "</p>";
            html += "</div><!---->";

           }

           html += "</div></a>";
           $(".cards .col-lg-8").append(html);  
        }

        $(".cards").append("</div></div>")

        // ==============================================
        //          Making vertical card right column
        // ===============================================
       var descr = wikiPagesList[keys[0]].extract, 
           imgUrl = "";

       html = "<div class='col-lg-4'>";

       if (descr.length > 140) {
            descr = descr.substring(0,140) + "...";
         }

       if (typeof(wikiPagesList[keys[0]].thumbnail) !== 'undefined') {
        html += "<a class='card-reference' target='_blank' href='" + wikiPagesList[keys[0]].fullurl + "'><div class='card-v'>";
        html += "<div class='image-info-v'><div class='img-bg'><img class='' src='" + wikiPagesList[keys[0]].thumbnail.source + "'></div><div class='img-content'><img class='' src='" + wikiPagesList[keys[0]].thumbnail.source + "'></div></div>";
        html +="<div class='text-card-v'><h3>" + wikiPagesList[keys[0]].title;
        html +="</h3>";
        html += "<p>" + descr + "</p>";
        html += "</div><!---->";     
       } else {
        html += "<a class='card-reference' target='_blank' href='" + wikiPagesList[keys[0]].fullurl + "'><div class='card-v'>";
        html +="<div class='text-card-v'><h3>" + wikiPagesList[keys[0]].title;
        html +="</h3>";
        html += "<p>" + descr + "</p>";
        html += "</div><!---->";
       }

       html += "</div></a></div>";
       $(".cards .row").append(html); 

     // ==============================================
    });  
     // ==============================================
}

function goSearch(country) {
  if ($(".entire-page").css("display") !== "none") {
       var request = getInputText(searchInput1);
      } else {
        var request = getInputText(searchInput2);
      }
      $(".entire-page").css("display","none");
      $(".result-page").css("display","block");
      $("body").css("background-color","#bdebf7")
      $(".cards").html("");
      $("footer").css("color","#888");
      putInputRequest(request);
      getWikiData(request, country);
}


$(document).ready(function(){
  
   $.get("https://ipinfo.io/?callback=", function(ipData) {
    countryCode = ipData.country;
    countryCode = countryCode.toLowerCase();
    
    if (countryCode === "en") {
      $(".lang-default").css("display","none");
    }
    $(".lang-default span").text(countryCode);
     
    $('input').on("keypress", function(e){
      if (e.which === 13) {
        goSearch(countryCode);
      }
    });
     
    $(".btn-search").on("click",function() {
      goSearch(countryCode);
    });
  
     $("input").mouseout(function() {
      var request = getInputText(searchInput1);
      if (request === "") {
        $(".actions a").removeAttr("href");
        return;
      }
      $.getJSON("https://en.wikipedia.org/w/api.php?action=query&format=json&prop=info&list=&titles=" + request + "&callback=&inprop=url&callback=?", function(data){
        var wikiPages = data.query.pages;
        keys = [];
       
        // Getting pageid list
        for (var key in wikiPages) {
          keys.push(key);
        };
        $(".actions a").attr("href",wikiPages[keys[0]].fullurl);       
      });
     });
   
     $(".lang-sw").on("click", function() {
        $(".lang-sw").removeClass("active");
        $(this).addClass("active");
        if ($(this).hasClass("lang-default")) {
          localLangSearch = true;
        } else {
          localLangSearch = false;
        }
       goSearch(countryCode);
     });
   });
});

Comments