Building a Google Search Engine in Javascript Using Serpstack API in Browser

Welcome folks today in this blog post we will be building a google search engine in javascript using serpstack api in browser. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Engine using Serpstack</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    
</head>
<body>
    <div class="container">
        <h1>Google Search Results</h1>
        <form id="form" autocomplete="off">
            <div class="form-group">
        <input type="text" id="search" class="form-control" placeholder="search">
            </div>
            <div class="form-group">
                <button class="btn btn-success btn-block">Search</button>
            </div>
        </form>
        <div id="result">
            
        </div>
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  
$("#form").submit(function(e){
    e.preventDefault()
    var query = $("#search").val()
    var API_KEY = 'b2a78783a54a8f2e5106404d843b1c95'
    let result=''
    var url = 'http://api.serpstack.com/search?access_key='  + API_KEY + "&type=web&query=" +query
    console.log(url);
    $.get(url, function(data){
        $("#result").html('')
        console.log(data)
        data.organic_results.forEach(res => {
            result =`
            <h1>${res.title}</h1><br><a target="_blank" href="${res.url}">${res.url}</a>
            <p>${res.snippet}</p>
            `
            
            $("#result").append(result)
        });
    })
})
</script>
</html>

<!DOCTYPE html>

<head>

<title>Search Engine using Serpstack</title>

</head>

<body>

<h1>Google Search Results</h1>

</div>

<button class="btn btn-success btn-block">Search</button>

</div>

</form>

</div>

</body>

$("#form").submit(function(e){

e.preventDefault()

var query = $("#search").val()

var API_KEY = 'b2a78783a54a8f2e5106404d843b1c95'

let result=''

var url = 'http://api.serpstack.com/search?access_key=' + API_KEY + "&type=web&query=" +query

console.log(url);

$.get(url, function(data){

$("#result").html('')

console.log(data)

data.organic_results.forEach(res => {

result =`

<h1>${res.title}</h1><br><a target="_blank" href="${res.url}">${res.url}</a>

<p>${res.snippet}</p>

$("#result").append(result)

});

})

</script>

</html>

Here you need to replace your own api key from the serpstack api dashboard and then we are making the get request to the api passing the query to the api to get the search engine results for the query passed.