{"id":3605,"date":"2022-10-07T17:23:03","date_gmt":"2022-10-07T12:23:03","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3605"},"modified":"2022-10-07T17:23:06","modified_gmt":"2022-10-07T12:23:06","slug":"how-to-make-omdb-api-movie-info-finder-web-app-in-javascript-boostrap4","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/how-to-make-omdb-api-movie-info-finder-web-app-in-javascript-boostrap4\/","title":{"rendered":"How to Make OMDb API Movie Info Finder Web App in JavaScript & Boostrap 4"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

Source Code of OMDb API Movie Info Finder Web App in JavaScript & Boostrap 4<\/h2>\n\n\n\n

index.html<\/h3>\n\n\n\n
<link rel="stylesheet" href="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.1.2\/css\/bootstrap.min.css"\/>\n\n<div class="container mt-3 text-center">\n        <div class="row justify-content-center">\n            <div class="col-md-8 col-12 content">\n                <h3>OMDB API EXAMPLE WITH JQUERY<\/h3>\n                <div id="search">\n                    <form>\n                        <input type="text" class="search-input search border-padding" placeholder="Enter name of the movie">\n                    <\/form>\n                    <div id="result-list" class="border-padding mb-3">\n                        <div id="results"><\/div>\n                        <div id="result-footer" class="pt-4 mt-2"><a href="#" id="show-more">SHOW MORE \u00bb<\/a><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div id="list" class="col-md-12">\n                <div class="row justify-content-center">\n                    <div class="col-md-8 list-header">\n                      <div class="text-center"><button id="searchAgain" class="btn btn-primary">Search Again<\/button><\/div>\n                        <div class="d-flex justify-content-between p-3">\n                            <div id="search-term"><\/div>\n                            <div id="list-count"><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class="row">\n                    <div class="row m-3" id="list-results"><\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js"><\/script>\n<script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.1.2\/css\/bootstrap.min.css"><\/script><\/pre><\/div>\n\n\n\n
style.css<\/h3>\n\n\n\n
html, body { \n    background-color: #F7F9FD;\n}\n.border-padding {\n    border: 1px solid #F1EEF2;\n    -webkit-border-radius: 10px;\n    -moz-border-radius: 10px;\n    border-radius: 10px;\n    padding: 20px;\n}\n.search-input {\n    width: 100%;\n    height: 55px;\n    padding-right: 60px;\n}\n\n.search {\n    background: url(search.png) no-repeat center right 20px #fff;\n}\n\n.arrow {\n    background: url(arrow.png) no-repeat center right 20px #fff;\n}\n\n#result-list {\n    background: #fff;\n    position: relative;\n    top: 12px;\n}\n\n#result-footer {\n  border-top: 2px solid #F1EEF2;\n  margin: auto -20px;\n}\n\n#result-list:after, \n#result-list:before {\n    bottom: 100%;\n    border: solid transparent;\n    content: " ";\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n\n#result-list:after {\n    border-color: rgba(255, 255, 255, 0);\n    border-bottom-color: #ffffff;\n    border-width: 19px;\n    left: 20%;\n    margin-left: -19px;\n}\n#result-list:before {\n    border-color: rgba(113, 158, 206, 0);\n    border-bottom-color: #F1EEF2;\n    border-width: 20px;\n    left: 20%;\n    margin-left: -20px;\n}\n\n.list-header {\n    border-bottom: 1px solid #5883FF;\n    color: #5883FF;\n    #list-count {\n        color: #9B9B9B;\n    }\n}\n.rating-div {\n    color: #9B9B9B;\n    .rating {\n        color: #5883FF;\n    }\n}\n\n.movie-title {\n    font-size: 1.2rem;\n}<\/pre><\/div>\n\n\n\n
script.js<\/h3>\n\n\n\n
$(document).ready(function() {\n\n    function highlight(word, query) {\n        let check = new RegExp(query, "ig")\n        return word.toString().replace(check, function(matchedText) {\n            return "<u style='background-color: yellow'>" + matchedText + "<\/u>"\n        })\n    }\n\n    $("#result-list").hide()\n    $("#list").hide()\n\n    $(".search-input").keyup(function() {\n        let search = $(this).val()\n        let results = ""\n        if (search == "") {\n            $("#result-list").hide()\n            $(".search-input").removeClass("arrow").addClass("search")\n        } else {\n            $(".search-input").removeClass("search").addClass("arrow")\n        }\n\n        $.getJSON("https:\/\/www.omdbapi.com\/?", { apikey: "fd161998", s: search }, function(data) {\n            if (data.Search !== undefined) {\n                $.each(data.Search, function(index, value) {\n                    if (index < 2) {\n                        $.getJSON("https:\/\/www.omdbapi.com\/?", { apikey: "fd161998", i: value.imdbID }, function(movieData) {\n                            if (movieData) {\n                                results += '<div class="result row p-1">'\n                                results += '<div class="col-sm-5"><img src=' + movieData.Poster + ' style="width: 170px; height: 250px;" \/><\/div>'\n                                results += '<div class="col-sm-7 text-left">'\n                                results += '<div class="movie-title">'+ highlight(movieData.Title, $(".search-input").val()) +' ('+ movieData.Year +')<\/div>'\n                                results += '<div class="rating-div"><span class="h4 rating">'+ movieData.imdbRating +'<\/span>\/10<\/div>'\n                                results += '<div class="my-3">'\n                                results += '<div>Language: '+ movieData.Language + '<\/div>'\n                                results += '<div>Stars: '+ movieData.Actors.split(",").slice(0, 3) + ' | <a href="#">Show All \u00bb<\/a><\/div>'\n                                results += '<\/div>'\n                                results += '<div class="my-3">'\n                                results += '<div>'+ movieData.Plot.slice(0, 100) + '... <a href="#">Details \u00bb<\/a><\/div>'\n                                results += '<\/div>'\n                                results += '<\/div>'\n                                results += "<\/div>"\n                                $("#results").html(results)\n                                \n                                if (\/Mobi|Android\/i.test(navigator.userAgent)) {\n                                    $("#results").children(".result").eq(1).hide();\n                                } else {\n                                    $(".result").first().after("<hr>")\n                                }\n                            }\n                        })\n                    }\n                });\n                $("#result-list").show()\n            }\n        });\n    });\n    \n    $("#show-more").click(function(e) {\n        e.preventDefault()\n        var search = $(".search-input").val()\n        let listResults = ""\n        $("#search").hide()\n        $("#list").show()\n        $("#search-term").html("Results for: " + search)\n        $.getJSON("https:\/\/www.omdbapi.com\/?", { apikey: "fd161998", s: search }, function(listData) {\n            if (\/Mobi|Android\/i.test(navigator.userAgent)) {\n                $("#list-count").html("(" + listData.totalResults + ")")\n            } else {\n                $("#list-count").html(listData.totalResults + " movie found")\n            }\n            if (listData.Search !== undefined) {\n                $.each(listData.Search, function(index, value) {\n                    $.getJSON("https:\/\/www.omdbapi.com\/?", { apikey: "fd161998", i: value.imdbID }, function(listMovieData) {\n                        if (listMovieData) {\n                            listResults += '<div class="list-result col-6 p-3">'\n                            listResults += '<div class="row">'\n                            listResults += '<div class="col-md-6"><img src="' + listMovieData.Poster + '" style="width: 100%;" \/><\/div>'\n                            listResults += '<div class="col-md-6 text-left">'\n                            listResults += '<div class="movie-title">'+ highlight(listMovieData.Title, $(".search-input").val()) +' ('+ listMovieData.Year +')<\/div>'\n                            listResults += '<div class="rating-div"><span class="h4 rating">'+ listMovieData.imdbRating +'<\/span>\/10<\/div>'\n                            listResults += '<div class="my-3">'\n                            listResults += '<div>Language: '+ listMovieData.Language + '<\/div>'\n                            listResults += '<div>Stars: '+ listMovieData.Actors.split(",").slice(0, 3) + ' | <a href="#">Show All \u00bb<\/a><\/div>'\n                            listResults += '<\/div>'\n                            listResults += '<div class="my-3">'\n                            listResults += '<div>'+ listMovieData.Plot.slice(0, 100) + '... <a href="#">Details \u00bb<\/a><\/div>'\n                            listResults += '<\/div>'\n                            listResults += '<\/div>' \/\/ col-6 end\n                            listResults += "<\/div>" \/\/ row end\n                            listResults += "<\/div>" \/\/ list-result col-6 end\n                            $("#list-results").html(listResults)\n                            $(".list-result:odd:not(:last-child)").after("<div class='col-12'><hr><\/div>")\n                        }\n                    })\n                });\n            }\n        });\n    });\n\n    $("#searchAgain").click(function() {\n        $("#search").show()\n        $("#list").hide()\n        $("#result-list").hide()\n        $(".search-input").val("")\n    });\n});<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
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 … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":1762,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3605","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\nHow to Make OMDb API Movie Info Finder Web App in JavaScript & Boostrap 4<\/title>\n<meta name=\"description\" content=\"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\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/how-to-make-omdb-api-movie-info-finder-web-app-in-javascript-boostrap4\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make OMDb API Movie Info Finder Web App in JavaScript & Boostrap 4\" \/>\n<meta property=\"og:description\" content=\"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\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/how-to-make-omdb-api-movie-info-finder-web-app-in-javascript-boostrap4\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-07T12:23:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-07T12:23:06+00:00\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Make OMDb API Movie Info Finder Web App in JavaScript & Boostrap 4","description":"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","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/how-to-make-omdb-api-movie-info-finder-web-app-in-javascript-boostrap4\/","og_locale":"en_US","og_type":"article","og_title":"How to Make OMDb API Movie Info Finder Web App in JavaScript & Boostrap 4","og_description":"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","og_url":"https:\/\/www.edopedia.com\/blog\/how-to-make-omdb-api-movie-info-finder-web-app-in-javascript-boostrap4\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-10-07T12:23:03+00:00","article_modified_time":"2022-10-07T12:23:06+00:00","author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-omdb-api-movie-info-finder-web-app-in-javascript-boostrap4\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-omdb-api-movie-info-finder-web-app-in-javascript-boostrap4\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"How to Make OMDb API Movie Info Finder Web App in JavaScript & Boostrap 4","datePublished":"2022-10-07T12:23:03+00:00","dateModified":"2022-10-07T12:23:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-omdb-api-movie-info-finder-web-app-in-javascript-boostrap4\/"},"wordCount":75,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-omdb-api-movie-info-finder-web-app-in-javascript-boostrap4\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/how-to-make-omdb-api-movie-info-finder-web-app-in-javascript-boostrap4\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-omdb-api-movie-info-finder-web-app-in-javascript-boostrap4\/","url":"https:\/\/www.edopedia.com\/blog\/how-to-make-omdb-api-movie-info-finder-web-app-in-javascript-boostrap4\/","name":"How to Make OMDb API Movie Info Finder Web App in JavaScript & Boostrap 4","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-omdb-api-movie-info-finder-web-app-in-javascript-boostrap4\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-omdb-api-movie-info-finder-web-app-in-javascript-boostrap4\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","datePublished":"2022-10-07T12:23:03+00:00","dateModified":"2022-10-07T12:23:06+00:00","description":"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","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-omdb-api-movie-info-finder-web-app-in-javascript-boostrap4\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/how-to-make-omdb-api-movie-info-finder-web-app-in-javascript-boostrap4\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-omdb-api-movie-info-finder-web-app-in-javascript-boostrap4\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","width":880,"height":495,"caption":"Default Featured Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-omdb-api-movie-info-finder-web-app-in-javascript-boostrap4\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Make OMDb API Movie Info Finder Web App in JavaScript & Boostrap 4"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=3605"}],"version-history":[{"count":1,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3605\/revisions"}],"predecessor-version":[{"id":3606,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3605\/revisions\/3606"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/1762"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}