Wikipedia Viewer(FCC project)

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.

<!DOCTYPE html>
<html >
<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/ */
/* 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/ */
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);
     });
   });
});

This awesome code ( Wikipedia Viewer(FCC project) ) is write by Pavel, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Pavel