WikiViewer

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

Thumbnail
This awesome code was written by ashoksuthar, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ashoksuthar ©
  • HTML
  • CSS
  • JavaScript
    <div class="contains"> <h1><strong><u>Wiki Viewer</u></strong></h1>
<div class = "content">
   <div class="inputarea"><input class="textfield" type="text" name="search-bar" placeholder="Search..">
     <span class="btns">
 <button class="search"> <i class="fa fa-search" aria-hidden="true"></i>
  </button>
       <a style="color:white" href="https://en.wikipedia.org/wiki/Special:Random" target="blank">
  <button> <i class="fa fa-random" aria-hidden="true"></i> Random
  </button></a>
     </span>
   </div>
</div>
   <hr />

<div class="result"> 
</div>
</div>

/*Downloaded from https://www.codeseek.co/ashoksuthar/wikiviewer-YGkRoR */
    * {
  background: black;
  text-align:center;
  font-family:'Orbitron', cursive;
  color:White;
  box-sizing:border-box;
}

h1 {
  font-family: 'Orbitron';
}

.contains {
  margin-bottom:50px;
}

.content {
  margin-top:5%;
  width:100%;
  margin-bottom:50px;
}

.inputarea{
  width:50%;
  margin:0 25% 0 25%;
  
}

button{
  cursor:pointer;
  border-radius:14px;
}

input[type="text"] {
  background:#333333;
  padding:8px;
  border:none;
  border-radius:5px;
  width:30%;
  -webkit-transition: width 0.4s ease-in-out, margin-left 0.4s ease-in-out;
  transition: width 0.4s ease-in-out, margin-left 0.4s ease-in-out;
}

input[type="text"]:focus {
  width: 40%;
  margin-left:10%;
  border: 2px solid #dddddd;
  background-color: #999999;
}

.btns {
  padding:0px;
  width:30%;
}

button {
  padding:6px;
}

.result {
  margin-top:10%;
  clear:both;
}

.fetched {
  display:block;
  color:black;
  padding:20px;
  background:white;
  margin:20px 10px 10px 10px;
  border-radius:5px;
}

a.fetched {
  color:#000000;
  text-decoration:none;
}

.fetched:hover {
  margin:20px 10px 10px 10px;
  border:5px dashed white;
  box-shadow:5px 5px 3px #3CBC8D;
}


/*Downloaded from https://www.codeseek.co/ashoksuthar/wikiviewer-YGkRoR */
    $(document).ready(function(){
  //Reading the Enter key in the input field
  $(".textfield").keypress(function (e) {
 var key = e.which;
 if(key == 13)  // the enter key code
  {
    $('.search').click();
  }
}); 
  //Reading the click event 
  $(".search").on("click", function(){
    var text = $('.textfield').val();
    var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search="+text+"&format=json&callback=?";
  $.getJSON(url,function(json){
    var j=0;
    $(".result").html("");
    //As long as there is a title
      while(j<json[1].length){
        //prints the title data
    $(".result").append("<a class='fetched' href = "+json[3][j]+" target='blank'>"+json[1][j]+": "+json[2][j]+"</a>");
        j++;
      }
  
  });
  });
});

Comments