Build a OMDb API Movie Info Finder Web App in Javascript Using Boostrap 4 Full Project For Beginners

 

OMDb API Movie Info Finder Web App in Javascript Using Boostrap 4

 

 

 

index.html

 

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css"/>

<div class="container mt-3 text-center">
        <div class="row justify-content-center">
            <div class="col-md-8 col-12 content">
                <h3>OMDB API EXAMPLE WITH JQUERY</h3>
                <div id="search">
                    <form>
                        <input type="text" class="search-input search border-padding" placeholder="Enter name of the movie">
                    </form>
                    <div id="result-list" class="border-padding mb-3">
                        <div id="results"></div>
                        <div id="result-footer" class="pt-4 mt-2"><a href="#" id="show-more">SHOW MORE »</a></div>
                    </div>
                </div>
            </div>
            <div id="list" class="col-md-12">
                <div class="row justify-content-center">
                    <div class="col-md-8 list-header">
                      <div class="text-center"><button id="searchAgain" class="btn btn-primary">Search Again</button></div>
                        <div class="d-flex justify-content-between p-3">
                            <div id="search-term"></div>
                            <div id="list-count"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="row m-3" id="list-results"></div>
                </div>
            </div>
        </div>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css"></script>

 

 

style.css

 

 

html, body { 
    background-color: #F7F9FD;
}
.border-padding {
    border: 1px solid #F1EEF2;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 20px;
}
.search-input {
    width: 100%;
    height: 55px;
    padding-right: 60px;
}

.search {
    background: url(search.png) no-repeat center right 20px #fff;
}

.arrow {
    background: url(arrow.png) no-repeat center right 20px #fff;
}

#result-list {
    background: #fff;
    position: relative;
    top: 12px;
}

#result-footer {
  border-top: 2px solid #F1EEF2;
  margin: auto -20px;
}

#result-list:after, 
#result-list:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

#result-list:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #ffffff;
    border-width: 19px;
    left: 20%;
    margin-left: -19px;
}
#result-list:before {
    border-color: rgba(113, 158, 206, 0);
    border-bottom-color: #F1EEF2;
    border-width: 20px;
    left: 20%;
    margin-left: -20px;
}

.list-header {
    border-bottom: 1px solid #5883FF;
    color: #5883FF;
    #list-count {
        color: #9B9B9B;
    }
}
.rating-div {
    color: #9B9B9B;
    .rating {
        color: #5883FF;
    }
}

.movie-title {
    font-size: 1.2rem;
}

 

READ  How to Build a Cron Job Task Scheduler Using Node-Cron in Node.js Full Tutorial

 

 

script.js

 

 

$(document).ready(function() {

    function highlight(word, query) {
        let check = new RegExp(query, "ig")
        return word.toString().replace(check, function(matchedText) {
            return "<u style='background-color: yellow'>" + matchedText + "</u>"
        })
    }

    $("#result-list").hide()
    $("#list").hide()

    $(".search-input").keyup(function() {
        let search = $(this).val()
        let results = ""
        if (search == "") {
            $("#result-list").hide()
            $(".search-input").removeClass("arrow").addClass("search")
        } else {
            $(".search-input").removeClass("search").addClass("arrow")
        }

        $.getJSON("https://www.omdbapi.com/?", { apikey: "fd161998", s: search }, function(data) {
            if (data.Search !== undefined) {
                $.each(data.Search, function(index, value) {
                    if (index < 2) {
                        $.getJSON("https://www.omdbapi.com/?", { apikey: "fd161998", i: value.imdbID }, function(movieData) {
                            if (movieData) {
                                results += '<div class="result row p-1">'
                                results += '<div class="col-sm-5"><img src=' + movieData.Poster + ' style="width: 170px; height: 250px;" /></div>'
                                results += '<div class="col-sm-7 text-left">'
                                results += '<div class="movie-title">'+ highlight(movieData.Title, $(".search-input").val()) +' ('+ movieData.Year +')</div>'
                                results += '<div class="rating-div"><span class="h4 rating">'+ movieData.imdbRating +'</span>/10</div>'
                                results += '<div class="my-3">'
                                results += '<div>Language: '+ movieData.Language + '</div>'
                                results += '<div>Stars: '+ movieData.Actors.split(",").slice(0, 3) + ' | <a href="#">Show All »</a></div>'
                                results += '</div>'
                                results += '<div class="my-3">'
                                results += '<div>'+ movieData.Plot.slice(0, 100) + '... <a href="#">Details »</a></div>'
                                results += '</div>'
                                results += '</div>'
                                results += "</div>"
                                $("#results").html(results)
                                
                                if (/Mobi|Android/i.test(navigator.userAgent)) {
                                    $("#results").children(".result").eq(1).hide();
                                } else {
                                    $(".result").first().after("<hr>")
                                }
                            }
                        })
                    }
                });
                $("#result-list").show()
            }
        });
    });
    
    $("#show-more").click(function(e) {
        e.preventDefault()
        var search = $(".search-input").val()
        let listResults = ""
        $("#search").hide()
        $("#list").show()
        $("#search-term").html("Results for: " + search)
        $.getJSON("https://www.omdbapi.com/?", { apikey: "fd161998", s: search }, function(listData) {
            if (/Mobi|Android/i.test(navigator.userAgent)) {
                $("#list-count").html("(" + listData.totalResults + ")")
            } else {
                $("#list-count").html(listData.totalResults + " movie found")
            }
            if (listData.Search !== undefined) {
                $.each(listData.Search, function(index, value) {
                    $.getJSON("https://www.omdbapi.com/?", { apikey: "fd161998", i: value.imdbID }, function(listMovieData) {
                        if (listMovieData) {
                            listResults += '<div class="list-result col-6 p-3">'
                            listResults += '<div class="row">'
                            listResults += '<div class="col-md-6"><img src="' + listMovieData.Poster + '" style="width: 100%;" /></div>'
                            listResults += '<div class="col-md-6 text-left">'
                            listResults += '<div class="movie-title">'+ highlight(listMovieData.Title, $(".search-input").val()) +' ('+ listMovieData.Year +')</div>'
                            listResults += '<div class="rating-div"><span class="h4 rating">'+ listMovieData.imdbRating +'</span>/10</div>'
                            listResults += '<div class="my-3">'
                            listResults += '<div>Language: '+ listMovieData.Language + '</div>'
                            listResults += '<div>Stars: '+ listMovieData.Actors.split(",").slice(0, 3) + ' | <a href="#">Show All »</a></div>'
                            listResults += '</div>'
                            listResults += '<div class="my-3">'
                            listResults += '<div>'+ listMovieData.Plot.slice(0, 100) + '... <a href="#">Details »</a></div>'
                            listResults += '</div>'
                            listResults += '</div>' // col-6 end
                            listResults += "</div>" // row end
                            listResults += "</div>" // list-result col-6 end
                            $("#list-results").html(listResults)
                            $(".list-result:odd:not(:last-child)").after("<div class='col-12'><hr></div>")
                        }
                    })
                });
            }
        });
    });

    $("#searchAgain").click(function() {
        $("#search").show()
        $("#list").hide()
        $("#result-list").hide()
        $(".search-input").val("")
    });
});

 

Leave a Reply