Wikipedia viewer

index.html

<div class="container">

  <h2 class="center-align"> <i class="fa fa-wikipedia-w left-align" aria-hidden="true"></i>ikipedia viewer</h2>

  <div class="row">
    <div class="offset-m3 col s10 m6">
      <div class="input-field">
        <input id="search-input" type="text" name="search" class="validate">
        <label for="search-input">Search</label>
      </div>
    </div>
    <div class="col s1">
      <a class="btn-floating btn-large waves-effect waves-light red search-button"><i class="material-icons right">search</i></a>
    </div>
    <p class="col s12 center-align"><a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Click here to read a random article.</a></p>
  </div>
  <div class="center-align">
    <div class="preloader-wrapper big hide">
      <div class="spinner-layer spinner-blue">
        <div class="circle-clipper left">
          <div class="circle"></div>
        </div>
        <div class="gap-patch">
          <div class="circle"></div>
        </div>
        <div class="circle-clipper right">
          <div class="circle"></div>
        </div>
      </div>

      <div class="spinner-layer spinner-red">
        <div class="circle-clipper left">
          <div class="circle"></div>
        </div>
        <div class="gap-patch">
          <div class="circle"></div>
        </div>
        <div class="circle-clipper right">
          <div class="circle"></div>
        </div>
      </div>

      <div class="spinner-layer spinner-yellow">
        <div class="circle-clipper left">
          <div class="circle"></div>
        </div>
        <div class="gap-patch">
          <div class="circle"></div>
        </div>
        <div class="circle-clipper right">
          <div class="circle"></div>
        </div>
      </div>

      <div class="spinner-layer spinner-green">
        <div class="circle-clipper left">
          <div class="circle"></div>
        </div>
        <div class="gap-patch">
          <div class="circle"></div>
        </div>
        <div class="circle-clipper right">
          <div class="circle"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="right-align"><a href="#" class="white-anchor hide"><i class="fa fa-2x fa-times" aria-hidden="true"></i></a></div>
  <div class="search-results">
    <ul class="collapsible popout" data-collapsible="accordion">

    </ul>

  </div>
</div>

script.js

$(document).ready(function() {
  console.log("Un mensaje de prueba");
  $("#search-input").on("keydown", function(e) {
    if ((e.keyCode === 13) & ($("#search-input").val().trim() !== "")) {
      searchWikipedia();
    }
  });
  $(".search-button").on("click", function(e) {
    if ($("#search-input").val().trim() !== "") {
      searchWikipedia();
    }
  });
  $(".white-anchor").on("click", function(e) {
    $(".white-anchor").addClass("hide");
    $("li").remove();
  });

  function searchWikipedia() {
    var searchText = $("#search-input").val().trim();
    $("#search-input").val("");
    $(".preloader-wrapper").removeClass("hide");
    $(".preloader-wrapper").addClass("active");
    $.ajax({
      url: "https://en.wikipedia.org/w/api.php",
      data: {
        action: "query",
        list: "search",
        srsearch: searchText,
        format: "json"
      },
      dataType: "jsonp",
      success: function(x) {
        $(".preloader-wrapper").addClass("hide");
        $(".preloader-wrapper").removeClass("active");
        $(".white-anchor").removeClass("hide");
        try {
          $("li").remove();
          x.query.search.forEach(function(searchResult) {
            console.log(searchResult.title.replace(/ /g, "_"));
            var searchResultCollapsible =
              '<li><div class="collapsible-header">' +
              searchResult.title +
              '</div><div class="collapsible-body">' +
              searchResult.snippet +
              '... <a class="read-more-link" href="https://en.wikipedia.org/wiki/' +
              encodeURI(searchResult.title.replace(/ /g, "_")) +
              '" target="_blank">Read More</a></div></li>';
            $(".search-results ul").append(searchResultCollapsible);
          }, this);
          console.log("search length: ", x.query.search.length);
          console.log("search: ", x.query.search);
        } catch (TypeError) {}
      }
    });
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/ace5bce722.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>

style.css

body, html {
  margin: 0px;
  padding: 0px;
  background-color: #1e1e1e;
  color: #f4f4f4;
}

.search-results {
  color: #1e1e1e;
}

.collapsible-body {
  background-color: #f4f4f4;
}

a {
  text-decoration: none;
  outline: 0;
}

.white-anchor {
  color: white;
}

.read-more-link {
  transition: color .3s linear;
  -moz-transition: color .3s linear;
  -webkit-transition: color .3s linear;
}

.read-more-link:hover {
  color: red;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

wikipedia-viewer.markdown

Wikipedia viewer

Intermediate Front-End Development Project of Free Code Camp

A Pen by Valentin on CodePen.

License.