freeCodeCamp: Wikipedia Viewer

In this example below you will see how to do a freeCodeCamp: Wikipedia Viewer with some HTML / CSS and Javascript

A responsive webpage that allows users to search for and link to Wikipedia articles. Connected to the MediaWiki API via https://en.wikipedia.org/w/api.php/. Built with HTML, CSS, JavaScript, and jQuery/JSON. My fifth project completed for freecodecamp.org

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>freeCodeCamp: Wikipedia Viewer</title>
  <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0" />
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Libre+Baskerville'>

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

  
</head>

<body>

  <div id="search-container">
  <h1>Search Wikipedia</h1>

  <div id="search-bar-container">
    <input id="search-bar" type="text" placeholder="Search for Wikipedia Articles" />
    <i id="search-icon" class="fa fa-search fa-lg" aria-hidden="true"></i>
  </div>

  <div id="button-container">
    <div id="wiki-search-button">Search for Article</div>
    <a class="button-link" href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">
      <div id="wiki-random-button">Random Article</div>
    </a>
  </div>
</div>

<div id="results-container"></div>

<div class="footer">
  <p class="footer-text-top">Coded & Written by</p>
  <p class="footer-text-bottom">Chris McGraw</p>
  <div class="social-media-container">
    <a href="https://codepen.io/cmcgraw/" target="_blank">
      <i class="footer-icon fa fa-codepen fa-2x">
      </i>
    </a>
    <a href="https://www.freecodecamp.org/chris-mcgraw/" target="_blank">
      <i class="footer-icon fa fa-free-code-camp fa-2x">
      </i>
    </a>
    <a href="https://github.com/Chris-McGraw/" target="_blank">
      <i class="footer-icon fa fa-github-square fa-2x">
      </i>
    </a>
  </div>
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/cmcgraw/freecodecamp-wikipedia-viewer-xpxaMR */
* {
  margin: 0;
  padding: 0;
  cursor: default;
  user-select: none;
  text-decoration: none;

  /* border: 1px solid red; */
}

html {
  height: 100%;
}

body {
  background: linear-gradient(#ebf4f8, white);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#search-container {
  height: 350px;
  margin-top: 1px;
  border-top: 5px double #acd7fb;
  border-bottom: 5px double #acd7fb;
}

h1 {
  width: 395px;
  margin: auto;
  margin-top: 77px;
  text-align: center;
  font-weight: 600;
  font-size: 38px;
  font-family: "Libre Baskerville", serif;
  color: #1746b1;
}

#search-bar-container {
  height: auto;
  width: 600px;
  margin: auto;
}

#search-bar {
  -webkit-appearance: none;
  -moz-appearance: none;  
  display: block;
  width: 496px;
  height: 37px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 25px;
  padding-left: 4px;
  padding-right: 29px;
  font-size: 16px;
  border: 1px solid lightGray;
  border-radius: 5px;
  cursor: text;
}

#search-icon {
  position: relative;
  top: -54px;
  left: 539px;
  cursor: pointer;
}

#button-container {
  width: 375px;
  height: auto;
  margin: auto;
  text-align: center;
}

#wiki-search-button {
  width: 135px;
  height: 20px;
  margin: auto;
  margin-top: -18px;
  padding-top: 6px;
  font-size: 12px;
  font-weight: bold;
  font-family: sans-serif;
  background: #f6f6f6;
  border: 1px solid lightGray;
  border-radius: 5px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

#wiki-search-button:active {
  box-shadow: inset 0px 0px 5px #a3a9b2;
}

#wiki-random-button {
  display: inline-block;
  width: 135px;
  height: 20px;
  margin: auto;
  margin-top: 15px;
  padding-top: 6px;
  font-size: 12px;
  font-weight: bold;
  font-family: sans-serif;
  background: #f6f6f6;
  border: 1px solid lightGray;
  border-radius: 5px;
  cursor: pointer;
}

#wiki-random-button:active {
  box-shadow: inset 0px 0px 5px #a3a9b2 !important;
}

.button-link {
  color: black;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

#results-container {
  display: none;
  height: auto;
  padding-top: 10px;
  text-align: center;
  border-bottom: 5px double #acd7fb;
}

.result-frame {
  display: inline-block;
  height: auto;
  width: 95%;
  margin: auto;
  margin-bottom: 10px;
  padding-bottom: 6px;
  text-align: left;
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
  cursor: pointer;
}

.result-frame-hovered {
  border-left: 8px solid #1746b1;
}

.result-frame:active {
  border-left: 8px solid #1746b1;
  box-shadow: inset -1px 0px 8px #72777d;
}

.result-title {
  width: 99%;
  margin: auto;
  margin-top: 6px;
  font-size: 20px;
  font-weight: bold;
  font-family: sans-serif;
  cursor: pointer;
}

.result-desc {
  width: 99%;
  margin: auto;
  margin-top: 6px;
  font-size: 16px;
  font-family: sans-serif;
  cursor: pointer;
}

.result-frame-link {
  color: black;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.result-none-frame {
  height: auto;
  width: 95%;
  margin: auto;
  margin-bottom: 10px;
  padding-bottom: 6px;
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
  cursor: default;
}

.result-none-title {
  width: 99%;
  margin: auto;
  margin-top: 6px;
  font-size: 20px;
  font-weight: bold;
  font-family: sans-serif;
  text-align: center;
  cursor: default;
}


/* ----- FOOTER BEGINS BELOW ----- */

.footer {
  width: 85%;
  height: 115px;
  margin: auto;
  margin-top: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.footer-icon {
  color: #1746b1;
  link-style: none;
  cursor: pointer;
}

.footer-icon-hovered {
  opacity: 0.75;
}

.footer-icon:active{
  opacity: 0.75;
}

.footer-text-top {
  margin: auto;
  padding: 0;
  text-align: center;
  font-family: sans-serif;
  font-size: 0.9em;
  color: #1746b1;
}

.footer-text-bottom {
  margin: auto;
  padding: 0;
  text-align: center;
  font-family: sans-serif;
  font-size: 0.9em;
  color: #1746b1;
}

.social-media-container {
  width: 50%;
  margin: auto;
  margin-top: 5px;
  margin-bottom: 15px;
  text-align: center;
}

/* ----- MEDIA QUERIES BEGIN BELOW ----- */

@media screen and (max-width: 600px) {
  #search-bar-container{
    width: 450px;
  }
  #search-bar{
    width: 90%;
  }
  #search-icon{
    left: 419px;
  }
}

@media screen and (max-width: 500px) {
  h1{
    width: 350px;
    font-size: 36px;
  }
  #search-bar-container{
    width: 420px;
  }
  #search-bar{
    width: 90%;
  }
  #search-icon{
    left: 390px;
  }
}

@media screen and (max-width: 450px) {
  h1 {
    font-size: 34px;
  }
  #search-bar-container{
    width: 370px;
  }
  #search-bar{
    width: 90%;
  }
  #search-icon{
    left: 343px;
  }
}

@media screen and (max-width: 400px) {
  h1 {
    font-size: 32px;
  }
  #search-bar-container{
    width: 350px;
  }
  #search-bar{
    width: 90%;
  }
  #search-icon{
    left: 325px;
  }
}

@media screen and (max-width: 375px) {
  h1 {
    width: 330px;   
    font-size: 30px;
  }
  #search-bar-container{
    width: 330px;
  }
  #search-bar{
    width: 90%;
  }
  #search-icon{
    left: 308px;
  }
}

/*Downloaded from https://www.codeseek.co/cmcgraw/freecodecamp-wikipedia-viewer-xpxaMR */
$(document).ready(function(){

 $("body *").on("touchstart", function (){
    $(".result-frame").removeClass("result-frame-hovered");
    $(".footer-icon").removeClass("footer-icon-hovered");
  });

/* ---------- Variable Declarations ---------- */

  searchTerm = "";
  currentTerm = "";
  expandContainer = false;

/* ---------- Function Declarations ---------- */

  function getResults(){
    if(searchTerm !== "" && searchTerm !== currentTerm) {
      $("#results-container").empty();

      $.getJSON("https://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&exintro&exsentences=1&explaintext&list=&generator=search&redirects=1&formatversion=2&origin=*&gsrsearch=" + searchTerm + "&gsrlimit=10", function(json) {
        if(json.query) {
          for(i = 0; i < json.query.pages.length; i++) {
            $("#results-container").append("<a class='result-frame-link' target='_blank' href=" + "https://en.wikipedia.org/?curid=" + json.query.pages[i].pageid + ">" + "<div class='result-frame'>" + "<div class='result-title'>" + json.query.pages[i].title + "</div>" + "<div class='result-desc'>" + json.query.pages[i].extract + "</div>" + "</div>" + "</a>");
          }

          $(".result-frame").on("mouseenter", function(){
            $(this).addClass("result-frame-hovered");
          });

          $(".result-frame").on("mouseleave", function(){
            $(this).removeClass("result-frame-hovered");
          });
        }

        else {
          $("#results-container").append("<div class='result-none-frame'>" + "<div class='result-none-title'>" + "No Results" + "</div>" + "</div>");
        }
      });

      currentTerm = searchTerm;

      if(expandContainer === false){
        $("#results-container").slideToggle(750);
        expandContainer = true;
      }
    }
  }

/* ---------- Event Handlers ---------- */

  $(document).keypress(function(key) {
    if(key.which == 13) {
      searchTerm = document.getElementById("search-bar").value;
      getResults();
    }
  });

  $("#wiki-search-button").on("click", function(){
    searchTerm = document.getElementById("search-bar").value;
    getResults();
  });

  $("#search-icon").on("click", function(){
    searchTerm = document.getElementById("search-bar").value;
    getResults();
  });

  $(".footer-icon").on("mouseenter", function(){
    $(this).addClass("footer-icon-hovered");
  });

  $(".footer-icon").on("mouseleave", function(){
    $(this).removeClass("footer-icon-hovered");
  });
});

Comments