JSFiddle - React, Tailwind, and code Playground

by rjasoriano

HTML

<html>
<body>
	<img src="https://st2.depositphotos.com/1720162/10591/v/950/depositphotos_105916294-stock-illustration-modern-thin-line-design-concept.jpg")>
  <p id="title">Ask Me Anything!</p>	
  <p id="title2">Your One-Stop Info Shop</p>	
  <input type="text" id="keyword"><br>
  <button id="search">Search</button><br><br>
  <div id="content"></div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Gochi+Hand');
#title{
  color: black;
  font-family: Gochi Hand;
	text-align: center;
  font-size: 300%;
}
#title2{
  color: black;
  font-family: Gochi Hand;
	text-align: center;
  font-size: 100%;
}
#search{
	color: white;
	display: block;
	margin: auto;
	background-color: blue;
	transition: background-color: 5s;
}	
#search:hover{
  background-color: green;
}
#keyword{
	width: 500px;
	display: block;
	margin: auto;
}
#content{
	font-family: arial;
  display: block;
	margin: auto;
	width: 600px;
	color: black;
	background-color: #BEC6C4;
}
img{
	display: block;
  margin-left: auto;
  margin-right: auto;
  width: 500px;
	height: 200px;
	border-radius: 20px;
}

JavaScript

$("#search").click(function(){
   var a = $("#keyword").val();
   async(a); 
    
});

$(function(){
  $("#keyword").keyup(function (e) {
    if (e.which == 13) {
      $('#search').trigger('click');
    }
  });
});


function async(word){

    $.ajax({
      method: "GET",
      url: "https://en.wikipedia.org/w/api.php",
      dataType:"jsonp",
      data: { format: "json",
             action: "query",
             prop:"extracts",       
             exintro:"",
             explaintext:"",
             titles:word},
      success:function(data) {
              var number = Object.keys(data["query"]["pages"])[0];
          if(number == "-1"){
                  $("#content").html("No result found");
          }else{
              var data1 = data["query"]["pages"][number]["extract"];
              //$("#content").html(data1);
              $("#content").html(JSON.stringify(data));
          }
      },
      error:function(data) {
             alert(data.message); 
      }
     
    });

    
    
}