Wikipedia Viewer

index.html

<div class="container" id="form">
  <div class="wiki mb-4"> Wikipedia Search Engine</div>
  <form class="text-center">
    <input id="txt_name" type="text" class="form-control" placeholder="Search Wiki or Type URL" autofocus onkeypress="return runScript(event)" />
    <p type="submit" class="btn btn-primary mt-2 mr-4" id="search">Submit</p>
    <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank" button class="btn btn-default mt-2 random">Random Article</a>
  </form>
  <p class="text-center mt-4 dan"> Designed by DanielShow</p>
</div>
<div class="container">
  <div class="new"></div>
</div>

script.js

function runScript(e) {
    if (e.keyCode == 13) {
      console.log("me")
    }
}
$(document).ready(function(){
   $("#search").on('click', function(){
      let searchItem = $('#txt_name').val();
      searchme(searchItem)
    /*
    let searchItem = $('#txt_name').val()
    $('#form').css('background', 'white');
    $('#form').css('margin-top', '0px');
    $('#form').css('position', 'relative');
    $('.dan').hide();
    //searchme(searchItem)
    console.log(searchItem);
    */
  }); 
});
 


function searchme(searchparam){
  $.ajax({
    //url: "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=dan&utf8=&callback=JSON_CALLBACK",
    url: "https://en.wikipedia.org/w/api.php?action=opensearch&search=api&limit=10&namespace=0&format=json&callback=JSON_CALLBACK",
    type: 'GET',
    dataType: 'jsonp',
    success: function(data){
      console.log("yes");
      /**
      let titleList= data[1];
      let titleContent = data[2];
      let titleUrl= data[3];    
      var htmlStr = ""
    for (let i=0; i < titleList.length; i++){
      htmlStr += "<h3><a href = " +titleUrl[0]+" target= -blank >"+ titleList[i]+"</a></h3><hr><br/>"+titleContent[0];
      $('.new').html(htmlStr)
  }*/
    },
    error: function(){
      console.log("Something went wrong")
    },
   
  });
   
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

style.css

#form {
    font-family: cursive;
    height: 200px;
    padding: 10px;
    position: absolute; 
    margin: auto;
    top: 0;
    right: 0;
    left: 0;
    bottom:0;
  background: linear-gradient(white, black);
  border-radius: 10px;
}
.wiki{
    text-align: center;
    font-size: 30px;
  }

p{
  color: white;
}
@media screen and (max-width: 350px){
  #form{
    padding: 5px;
    width: 100%;
  }
  .buttons{
    width: 100%;
  } 
  .wiki{
    font-size: 20px;
  }
  
}


@media screen and (min-width: 351px){
  .buttons{
    width: 100%;
  }
}

@media screen and (min-width: 700px){
  #form{
    width: 800px;
    left: 0;
    right: 0; 
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

wikipedia-viewer.markdown

Wikipedia Viewer

A Pen by Daniel on CodePen.

License.