Build a Wikipedia Page Viewer Search Engine in Browser Using Vanilla Javascript Full Project For Beginners

Build a Wikipedia Page Viewer Search Engine in Browser Using Vanilla Javascript Full Project For Beginners

 

 

Welcome folks today in this blog post we will be building a wikipedia page viewer search engine in browser using vanilla javascript.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

 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/readable/bootstrap.min.css"/>
div class="search-box">
    <h1>Wikipedia Viewer</h1>
    <form>
    <input class="search-box" id="text-field">
    <br><br>
    <button class="btn btn-default" id="searchArticle">Search</button>
    <button class="btn btn-default" id="randomArticle">I'm feeling lucky</button>
    </form>
</div>
<div class="col-md-12 col-lg-12">
<div id="content">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

 

 

Now make a style.css file and copy paste the below code

 

style.css

 

body{
    text-align: center;
}
h1{
    font-size: 72px;
    /*font-family: Helvetica;*/
}
.search-box{
    display: inline;
    text-align: center;
    width: 400px;
    /*padding: 20px;*/
}
.content-box{
    margin-top: 20px;
    display: inline-block;
    background: #f9f9f9;
    border-left: 5px solid gray;
    border-radius: 15px 0 15px 0; 
    text-align: left;
    width: 70%;
    overflow: hidden;
}

 

See also  jsPDF Tutorial to Generate a Striped Table Salary Invoice Template Using jsPDF-Autotable Library in Javascript Full Project For Beginners

 

Now make a script.js file and copy paste the below code

 

script.js

 

$('document').ready(function(){

    function showResult(keyword){
        var myUrl = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=" + keyword;
        $.ajax({
            url: myUrl,
            data: 'queryData',
            dataType: 'jsonp',
            contentType: 'application/json; charset = utf-8',
            type: 'GET',
            async: false,
            cache: false,
            success: function(result){
                linkgenerator(result);
                console.log(result);
                console.log(keyword);
            }
        })
        .done(function(){
            console.log("success");
        })
        .fail(function(){
            console.log("error");
        })
        .always(function(){
            console.log("complete");
        });
    }

    function linkgenerator(result){
        for (var i = 0; i < result[1].length; i++) {
            
            $('#content').append(
                "<div class= 'content-box'><a href=" + result[3][i] + "><h2>" + result[1][i] + "</h2></a><p class='url'>" + result[3][i] + "</p><p>" + result[2][i] + "</p></div>"
                );
        }
    }

    $('#searchArticle').click(function(event){
        var keyword = $('#text-field').val();
        showResult(keyword);
    event.preventDefault();
    });

    $('#randomArticle').click(function(){
        window.open("https://en.wikipedia.org/wiki/special:random");
    });

    $('#text-field').keyup(function(event){
        var keyPressed = $(this).val();
        $('#content').empty();
        showResult(keyPressed);
    event.preventDefault();
    });
});

 

 

Now if you open the index.html file inside the browser you will see the below output

See also  Node.js Express Convert EPUB Book to PDF Online Converter Using ebook-converter Library Full App 2020

 

Leave a Reply