Wikipedia Viewer

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

freeCodeCamp objective: Wikipedia Viewer

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

Technologies

  • HTML
  • CSS
  • JavaScript
    <style>
<link href='https://fonts.googleapis.com/css?family=Alegreya Sans SC' rel='stylesheet'>
</style>

<div class="container" id="meow">
  <div class="input-group" style="position:relative">
<h1 class="text-center">WIKIPEDIA VIEWER</h1>
  </div>
  
<div class="input-group mb-3">

  <input type="text" class="form-control" id="searchTerm">
  <div class="input-group-append">
    <button class="btn" type="button" onclick="searchWiki()"><span class="glyphicon glyphicon-search"></span></button>
  </div>
</div>
  
<button class="btn btn-block btn-primary" type="button" onclick="getRandom()"><span class="	glyphicon glyphicon-random"></span></button>

  
</div>

<hr>
<div id="searchResult" class="container">
  
</div>


/*Downloaded from https://www.codeseek.co/THEK7/wikipedia-viewer-WMVZdb */
    body, html {
  background-color: #111111;
  min-height: 100%;
}

.input-group {
  margin-top: 10%;
}

h1 {
  color:white;
  font-family: 'Alegreya Sans SC';font-size: 80px;
}


/*Downloaded from https://www.codeseek.co/THEK7/wikipedia-viewer-WMVZdb */
    function searchWiki() {
  var searchTerm = $("#searchTerm").val();
  var api = `https://en.wikipedia.org/w/api.php?action=opensearch&search=${searchTerm}'&format=json&callback=wikicallback`
  
  $.ajax({
      url: api,
      dataType: 'jsonp',
      success: function(data) {
        $("#searchResult").html("");
        $("#searchResult").childNodes = [];
        for(let i = 0; i < data[1].length; i++) {
            let articleCard = document.createElement("div");
            articleCard.setAttribute("class","card");
            let article = document.createElement("div")
            article.setAttribute("class","card-header");
            let articleBody = document.createElement("div");
            articleBody.setAttribute("class","card-body");
            let title = document.createElement("h2");
            title.innerHTML = data[1][i];
            let description = document.createElement("p");
            description.innerHTML = data[2][i];
            let link = document.createElement("a");
            link.setAttribute("href", data[3][i]);
            link.setAttribute("target", "_blank");
            link.setAttribute("class","btn btn-success");
            link.innerHTML = "See More";
          
            article.appendChild(title);
            articleBody.appendChild(description);
            articleBody.appendChild(link);
          
            articleCard.appendChild(article);
            articleCard.appendChild(articleBody)
      
            
            $("#searchResult").append(articleCard);
            $("#searchResult").append("<br>");
        }
        
      },
      error: function(data) {
        
      },
      complete: function(data) {
      }
    });;
}

function getRandom() {
  window.open("https://en.wikipedia.org/wiki/Special:Random");
}

Comments