Here is a link to my codeine.
here is the html
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<div class="text-center move">
<img src="http://static.oprah.com/images/201105/omag/201105-omag-brain-600x411.jpg" alt="Smiley face">
<br>
<h1> Brain Query</h1>
<input type="text" name="search" id="searchTerm" placeholder="Search..">
</input>
<button type="button" name='search' id='search'class=" bigButton btn btn-info">
<span class="glyphicon glyphicon-search"></span
</button>
</div>
Here is my css
h1{ font-size: 50px;
font-family: Cinzel, serif;
letter-spacing: 4px;
}
input[type=text] {
width: 250px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 10px 9px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus{
width: 50%;
}
img{
margin-top:10px;
position:relative;
top:10px;
}
.bigButton{
padding:12px 17px;
margin-top:-5px;}
Here is my Javascript
$(function(){
//https://en.wikipedia.org/w/api.php?action=opensearch&search=billy&callback=?
$('#search').click(function(){
var searchTerm = $('#searchTerm').val();
$.ajax({
type:'GET',
url:'https://en.wikipedia.org/w/api.php?action=opensearch&search=' + searchTerm + '&callback=?',
async:false,
dataTyoe:'json',
success:function(data){
console.log(data)
},
error:function(err){
alert("ERR")
}
})
})
});