Wikipedia Viewer

index.html

<div id = "top">
  <H1 id="title"> Wikipedia Viewer</H1>
  <form action="">
  <input required type="text" placeholder=" I'm looking for..." id = "requestField" >
  <button id = "requestButton" type="button"> Search </button>
   </form>
  <!-- SUBMIT tpe buttons send request to your backend. If you use SUBMIT type button here at the same time with the ajax request, you will get an error. I thought it is a CORS error, but no, the page refreshing was in the way of the ajax request (type SUBMIT was automatically given by the browser to the button). Use SUBMIT buttons only when you have to (when you are not using javascript) -->
  <br/>
<button id = "random">Go random!</button>
  </div>

<div id = "resultField"></div>

script.js

$(document).ready(function() {
  var searchById = "";
  var julie = function() {
    var searchTerm = $("#requestField").val();
    var searchLink =
      "https://en.wikipedia.org/w/api.php?action=query&srsearch=" +
      searchTerm +
      "&list=search&format=json&formatversion=2";
    $.ajax(searchLink, {
      type: "GET",
      dataType: "json",
      data: {
        origin: "*"
      },
      success: function(searchResult) {
        $(resultField).html("");
        $.each(searchResult.query.search, function(propertyName, value) {
          var articleExtract = value.snippet.replace.slice(0,150);
          console.log(articleExtract);
          $("#resultField").append(
            "<a target = _blank href = https://en.wikipedia.org/wiki/" +
              encodeURIComponent(value.title) +
              '><div class = "container"> <H1>' +
              value.title +
              "</H1> <br/>" +
              articleExtract +
              "</div></a>"
          );
        });
      },

      error: function(whatever) {
        console.log("Scully, you're not gonna believe this!", whatever);
      }
    });
  };
  $("#requestButton").on("click", julie);
  //pass julie
  $("form").keypress(function(event) {
    if (event.which == 13) {
      event.preventDefault();
      julie();
      //calling julie ("JULIE! DO THE THING!")
    }
  });
  //RANDOM START - First, we get the ids
  $("#random").on("click", function() {
    $.ajax(
      "https://en.wikipedia.org//w/api.php?action=query&list=random&format=json&rnnamespace=0&rnlimit=10",
      {
        type: "GET",
        dataType: "json",
        data: {
          origin: "*"
        },
        success: function(searchResult) {
          var idString = "";
          $.each(searchResult.query.random, function(propertyName, value) {
            idString += value.id + "|";
          });
          idString = idString.slice(0, idString.length - 1);
          searchById =
            "https://en.wikipedia.org//w/api.php?action=query&prop=extracts&exintro=true&format=json&list=&pageids=" +
            idString;

          //From the ids we are doing another search for the titles & contents
          $.ajax(searchById, {
            type: "GET",
            dataType: "json",
            data: {
              origin: "*"
            },
            success: function(searchResult) {
              $("#resultField").html("");
              console.log(searchById);
              $.each(searchResult.query.pages, function(propertyName, value) {
                $("#resultField").append(
                  "<a target = _blank href = https://en.wikipedia.org/wiki/" +
                    encodeURIComponent(value.title) +
                    '><div class = "container"> <H1>' +
                    value.title +
                    "</H1> <br/>" +
                    value.extract +
                    "</div></a>"
                );
              });
            },

            error: function(whatever) {
              console.log("Scully, you're not gonna believe this!", whatever);
            }
          });
        }
      }
    );
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.css

#top{
padding: 30px;
  text-align: center;
}

#title{
  padding: 30px;
}

#resultField{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-gap: 1em;
  grid-auto-rows: 250px;
  
  text-overflow: ellipsis-word;
  overflow: hidden;
  white-space: normal;
}

.container {
  font-weight: normal;
  text-decoration: none;
}

.container b {
  font-weight: normal;
}

a {
  text-decoration: none;
  outline: none;
  padding: 1em;
}

a:link {
  background: lightgrey;
  color: black;
}

a:visited {
  background: grey;
  color: black;
}

a:focus {
 border-bottom: 2px solid;
 background: white;
 color: black;
}

a:hover {
  background: white;
  color: black;
  text-decoration: none;
}

a:active {
  background: grey;
  
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />

wikipedia-viewer.markdown

Wikipedia Viewer

Build a Wikipedia Viewer - a freeCodeCamp exercise

A Pen by Noémi Puskás on CodePen.

License.