Movie API

//HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="jquery_ui.css">
    <script src="jquery.js"></script>
    <script src="jquery-ui.js"></script>
    <script src="main.js"></script>
    <style>
        li{
            width: 250px;
            border: 1px solid gray;
            padding: 15px;
            margin-bottom: 10px;
        }
        ul{
            list-style-type:none;
        }
        .ui-selected{
            background: #e78f08;
        }
    </style>
</head>
<body>
<button id="add">Add new movie</button>
<ul id="list">
    <li value="Inception">Inception</li>
    <li value="Focus">Focus</li>
    <li value="Red Notice">Red Notice</li>
    <li value="Friends">Friends</li>
</ul>
<p>Title:<span id="title"></span></p>
<p>ImdbID:<span id="id"></span></p>
<p>Rating:<span id="rating"></span></p>
<p>Director:<span id="director"></span></p>
<p>Actors:<span id="actors"></span></p>
<img src="" id="img">

<div id="dialog">
    <p>Enter new name</p>
    <input type="text" id="movie_name">
</div>
</body>
</html>


//JQUERY
$(document).ready(function () {
    $("#list").selectable({
        stop: function (event, ui) {
            var movie_name = $(".ui-selected").attr("value")
            get_data(movie_name)
        }
    })

    function get_data(movie) {
        //ajax povik
        $.ajax({
            url: "https://www.omdbapi.com/?apikey=3640b4d8&t=" + movie,
            dataType: "json",
            success: function (data) {
                $("#title").html(data.Title)
                $("#id").html(data.imdbID)
                $("#rating").html(data.imdbRating)
                $("#director").html(data.Director)
                $("#actors").html(data.Actors)
                $("#img").attr("src" , data["Poster"])
            }
        })
    }

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

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

})