Shabloni Movies

$(document).ready(function () {
    $("#new_movie").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            Add: function () {
                var movie_name = $("#movie_name").val()
                $("#movies").append("<li>"+movie_name+"</li>")
                $("#new_movie").dialog("close")
            }
        }
    })

    $("#add").click(function () {
        $("#new_movie").dialog("open")
    })

    $(document).on("click","#movies li",function () {
        console.log("List item clicked")
        var movie_name = $(this).html()
        console.log(movie_name)
        processData(movie_name)
    })

    function processData(movie_name) {
        $.ajax({
            url: "http://omdbapi.com/?t="+movie_name+"&apikey=a6592a8d",
            dataType: "json",
            success: function (data) {
                console.log(data.Title)
                $("#title").html(data.Title)
                $("#rating").html(data.imdbRating)
                $("#director").html(data.Director)
                $("#actors").html(data.Actors)
                $("#image").attr("src", data.Poster)
            }
        })
    }
})


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="jquery/jquery-ui.css">
    <script src="jquery/jquery.js"></script>
    <script src="jquery/jquery-ui.js"></script>
    <script src="script.js"></script>
    <style>
    </style>
</head>
<body>
<button id="add">Додај нов филм</button>

<div id="new_movie">
    <h3>Внеси име на филм</h3>
    <input type="text" id="movie_name">
</div>

<ul id="movies">

</ul>
<p>Title: <span id="title"></span></p>
<p>Rating: <span id="rating"></span></p>
<p>Director: <span id="director"></span></p>
<p>Actors: <span id="actors"></span></p>
<img id="image">
</body>
</html>