Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on January 20, 2023

 

 

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

 

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!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>

 

 

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.

 

Recent Posts

  • Android Java Project to Download Multiple Images From URL With Progressbar & Save it inside Gallery
  • Android Java Project to Capture Image From Camera & Save it inside Gallery
  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme