[FCC 263] - Wikipedia Viewer

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>[FCC 263] - Wikipedia Viewer</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

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

  
</head>

<body>

  <link href="https://fonts.googleapis.com/css?family=Montserrat:100" rel="stylesheet">

<body>
  <div class="container text-center">
    <h3>Wikipedia search</h3>
    <div class="input-group">
      <input type="text" class="form-control" aria-label="search">
      <span class="search-button">
        <i class="fa fa-search fa-2x btn btn-outline-info" aria-hidden="true" title="Search For Wiki Article"></i>
      </span>
    </div>
    <a class="btn btn-outline-info" href="https://en.wikipedia.org/wiki/Special:Random" target="_blank" role="button" title="Click for Random Wiki Article!"><i class="fa fa-random fa-2x" aria-hidden="true"></i></a>
    <div class="articles-container">
    </div>
  </div>

  <footer>
    <hr/>
    <p class="text-center">
      Made by N. FCC exercise
      <br/> 2017
    </p>
  </footer>

</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/nerijus/fcc-263-wikipedia-viewer-GEmpYd */
body {
  font-family: 'Montserrat', sans-serif;
  background-color: #F3F3F3;
  padding-top: 60px;
  min-width: 420px;
  font-weight: 600;
}

.container a {
  margin-top: 10px;
  margin-bottom: 10px;
}

.articles-container {
  min-height: 350px;
}

.form-control {
  width: 10px;
  margin: 0 auto;
  float: none;
}

.article {
  border: 1px solid #D3D3D3;
  word-wrap: break-word;
  margin-top: 10px;
}

.article:hover {
  background-color: #FFFFFF;
  border-left: 3px solid #5bc0de;
}

.article::first-line {
  color: #5bc0de;
  font-weight: 900;
}


/*Downloaded from https://www.codeseek.co/nerijus/fcc-263-wikipedia-viewer-GEmpYd */
$("input.form-control").keyup(function(e) {
  if (e.which == 13 && this.value.length > 0) {
    getArticles(this.value);
  } else if (this.value.length === 0) {
    $(".articles-container").html("");
  }

  //for some reason (API limits?) this works only if you type slowly. Type fast and it won't return results.
  // if (this.value.length > 0) {
  //   getArticles(this.value);
  // } else if (this.value.length === 0) {
  //   $(".articles-container").html("");
  // }
});

$(".search-button").click(function() {
  var input = $("input.form-control").val();
  getArticles(input);
});

function getArticles(input) {
  var url =
    "https://en.wikipedia.org/w/api.php?action=opensearch&limit=10&format=json&search=" +
    input;

  $.ajax({
    url: url,
    dataType: "jsonp",
    jsonpCallback: "showResults"
  });
}

function showResults(json) {
  var totalArticles = json[1].length;

  $(".articles-container").html("");

  for (i = 0; i < totalArticles; i++) {
    $(".articles-container").append(
      '<div class="article" id="article' + i + '"></div>'
    );

    for (j = 1; j < json.length; j++) {
      var articleDiv = $("#article" + i);

      if (j + 1 === json.length) {
        articleDiv.append(
          "<a href=" + json[j][i] + " target='_blank'>" + json[j][i] + "</a>"
        );
        articleDiv.append("<br/>");
      } else {
        articleDiv.append(json[j][i]);
        articleDiv.append("<br/>");
      }

      //       articleDiv.append(json[j][i]);
      //       articleDiv.append("<br/>");
    }
  }
}

Comments