How to Make OMDb API Movie Info Finder Web App in JavaScript & Boostrap 4

In this tutorial, you will learn how to utilize the OMDb API to build a movie info finder web app using HTML5, CSS3, JavaScript, and Bootstrap 4. The complete source code of the OMDb API movie info finder web app is given below.

Source Code of OMDb API Movie Info Finder Web App in JavaScript & 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>

HTML
​x
 
<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;
}

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;
}

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("")
    });
});

JavaScript
 
$(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("")
    });
});

Source Code of OMDb API Movie Info Finder Web App in JavaScript & Boostrap 4

index.html

style.css

script.js

Related posts:

Leave a Comment Cancel reply