Search Wiki

alvbmw.markdown

aLvBmW

A Pen by Shivam Rastogi on CodePen.

License.

index.html

<div class="outer-container">
  <div class="search-box-container">
    <input id="search-wiki" type="text">
    <label for="search-wiki">Search Wiki</label>
    <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">I'm feeling lucky!</a>
    <span id="cross"><i class="fa fa-times" aria-hidden="true"></i></span>
  </div>

  <div class="hide search-result-container">
  </div>
</div>

script.js

$(document).ready(function() {
  // $("#search-wiki").on("blur", function() {
  //   this.value = "";
  // });

  $("#cross").on("click", function() {
    // location.reload();
    $("#search-wiki").val("");
    $(".search-result-container").html("");
    $("#cross").css("opacity", "0");
    $(".outer-container").animate(
      {
        top: "50%"
      },
      300
    );
  });

  $("#search-wiki").on("keydown", function(e) {
    if (e.which == 13) {
      $(".outer-container").animate(
        {
          top: "15%"
        },
        300
      );
      $(".search-result-container").html("");

      $("#cross").css("opacity", "1");

      let searchQuery = this.value;
      $.ajax({
        url:
          "https://en.wikipedia.org/w/api.php?action=query&format=json&origin=*&list=search&srsearch=" +
            encodeURIComponent(searchQuery),
        success: function(data) {
          console.log(data);
          if (typeof data === "string") {
            data = JSON.parse(data);
          }
          let articles = data.query.search;
          if (articles.length === 0) {
            let errorMsg =
              '<article class="search-results-item" style="text-align:center;">' +
              '   <p class="sri-heading">No results found&#33;</p>' +
              "</article>";

            $(".search-result-container").append(errorMsg);
            $(".search-result-container").removeClass("hide");
            return;
          }
          articles.forEach(function(article, index) {
            let articleNode =
              '<article id="article' +
              index +
              '" class="search-results-item">' +
              '   <p class="sri-heading">' +
              article.title +
              "</p>" +
              '   <p class="sri-snippet">' +
              article.snippet +
              "</p>" +
              "</article>";

            $(".search-result-container").append(articleNode);

            $("#article" + index).on("click", function() {
              window.open(
                "http://en.wikipedia.org/?curid=" + article.pageid,
                "_blank"
              );
            });
          });
          $(".search-result-container").removeClass("hide");
        }
      });
    }
  });
});

scripts

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

style.css

body {
  font-family: "Open Sans", sans-serif;
  background: #092B40;
}

.outer-container {
  position: absolute;
  width: 80%;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.search-box-container {
  text-align: center;
}

label, input {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
}

label {
  color: white;
  top: 65px;
  font-size: 24px;
}

input {
  background-color: #092B40;
  width: 200px;
  border-radius: 20px;
  border: 3px solid #D96F32;
  color: white;
  box-sizing: border-box;
  font-size: 24px;
  padding: 10px;
  text-align: center;
}

input:focus {
  width: 400px;
  outline: none;
  transition: all 300ms ease-in-out;
}

input:focus ~ label {
  left: 50%;
  color: #D96F32;
  transform: translate(-50%, -40px);
  font-size: 16px;
  transition: all 300ms ease-in-out;
}

a {
  color: white;
  text-decoration: none;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
}

a:hover {
  text-decoration: underline;
}

#cross {
  font-size: 24px;
  color: #D96F32;
  position: absolute;
  top: 90%;
  left: 50%;
  font-size: 20px;
  border: 3px solid #D96F32;
  padding: 3px 6px;
  border-radius: 50%;
  transform: translateX(-50%);
  opacity: 0;
}

#cross:hover {
  cursor: pointer;
}

.search-result-container {
  width: 100%;
  height: 50px;
  top: 120%;
  position: absolute;
  padding-top: 10px;
  transition: all 300ms ease-in-out;
}

.sri-heading {
  margin: 0 0 16px 0;
  color: #092B40;
  font-size: 24px;
}

.sri-snippet {
  margin: 0;
}

.search-results-item {
  list-style: none;
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
  border-left: 5px solid white;
  border-radius: 5px;
}

.search-results-item:hover {
  border-left: 5px solid #D96F32;
  cursor: pointer;
}

.hide {
  display: none;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet" />