Přidání hodnocení a Srdce ikony taky každý název filmu

// DUMMY names
var names = {
    1: {
        name: "Red Notice",
        desc: "An Interpol agent tracks the world's most wanted art thief.",
        img: "rn.jpg",
    },
    2: {
        name: "Dune",
        desc: "the son of a noble family entrusted with the protection of the most valuable asset and most vital element in the galaxy.",
        img: "dune.jpg",

    },
    3: {
        name: " Escape Room",
        desc: "Six people unwillingly find themselves locked in another series of escape rooms, slowly uncovering what they have in common to survive..",
        img: "esc.jpg",

    },
    4: {
        name: "Antim: The Final Truth",
        desc: "The cop played by Salman fights the land mafia in the film. ",
        img: "4.jpg",

    },
    5: {
        name: "Dhamaka",
        desc: "Reassigned from TV to radio, a frustrated anchor sees both danger and opportunity when he receives threatening calls on the air. ",
        img: "5.jpg",

    }
};


var movie = {
    // (A) PROPERTIES
    hPdt: null, // HTML names list
    hItems: null, // HTML current movie
    items: {}, // Current items in movie

    // (B) LOCALSTORAGE movie
    // (B1) SAVE CURRENT movie INTO LOCALSTORAGE
    save: function() {
        localStorage.setItem("movie", JSON.stringify(movie.items));
    },

    // (B2) LOAD movie FROM LOCALSTORAGE
    load: function() {
        movie.items = localStorage.getItem("movie");
        if (movie.items == null) { movie.items = {}; } else { movie.items = JSON.parse(movie.items); }
    },

    // (B3) EMPTY ENTIRE movie
    nuke: function() {
        if (confirm("Empty favourite List?")) {
            movie.items = {};
            localStorage.removeItem("movie");
            movie.list();
        }
    },

    // (C) INITIALIZE
    init: function() {
        // (C1) GET HTML ELEMENTS
        movie.hPdt = document.getElementById("movie-names");
        movie.hItems = document.getElementById("movie-items");

        // (C2) DRAW names LIST
        movie.hPdt.innerHTML = "";
        let p, item, part;
        for (let id in names) {
            // WRAPPER
            p = names[id];
            item = document.createElement("div");
            item.className = "p-item";
            movie.hPdt.appendChild(item);

            // PRODUCT IMAGE
            part = document.createElement("img");
            part.src = "img/" + p.img;
            part.className = "p-img";
            item.appendChild(part);

            // PRODUCT NAME
            part = document.createElement("div");
            part.innerHTML = p.name;
            part.className = "p-name";
            item.appendChild(part);

            // PRODUCT DESCRIPTION
            part = document.createElement("div");
            part.innerHTML = p.desc;
            part.className = "p-desc";
            item.appendChild(part);

            // ADD TO fav
            part = document.createElement("input");
            part.type = "button";
            part.value = "Add to Favorites";
            part.className = "movie p-add";
            part.onclick = movie.add;
            part.dataset.id = id;
            item.appendChild(part);
        }

        // (C3) LOAD movie FROM PREVIOUS SESSION
        movie.load();

        // (C4) LIST CURRENT movie 
        movie.list();
    },

    // (D) LIST CURRENT movie ITEMS (IN HTML)
    list: function() {
        // (D1) RESET
        movie.hItems.innerHTML = "";
        let item, part, pdt;
        let empty = true;
        for (let key in movie.items) {
            if (movie.items.hasOwnProperty(key)) { empty = false; break; }
        }

        // (D2) movie IS EMPTY
        if (empty) {
            item = document.createElement("div");
            item.innerHTML = "List is empty";
            movie.hItems.appendChild(item);
        } else {
            let p, total = 0,
                subtotal = 0;
            for (let id in movie.items) {
                // ITEM
                p = names[id];
                item = document.createElement("div");
                item.className = "c-item";
                movie.hItems.appendChild(item);

                // NAME
                part = document.createElement("div");
                part.innerHTML = p.name;
                part.className = "c-name";
                item.appendChild(part);

                // REMOVE
                part = document.createElement("input");
                part.type = "button";
                part.value = "X";
                part.dataset.id = id;
                part.className = "c-del movie";
                part.addEventListener("click", movie.remove);
                item.appendChild(part);

            }

            // EMPTY BUTTONS
            item = document.createElement("input");
            item.type = "button";
            item.value = "Remove all from Favorites";
            item.addEventListener("click", movie.nuke);
            item.className = "c-empty movie";
            movie.hItems.appendChild(item);

        }
    },

    // (E) ADD ITEM INTO movie
    add: function() {
        if (movie.items[this.dataset.id] == undefined) {
            movie.items[this.dataset.id] = 1;
        } else {
            movie.items[this.dataset.id]++;
        }
        movie.save();
        movie.list();
    },

    // (G) REMOVE ITEM FROM movie
    remove: function() {
        delete movie.items[this.dataset.id];
        movie.save();
        movie.list();
    },

};
window.addEventListener("DOMContentLoaded", movie.init);

body {
    background-color: rgb(210, 241, 223);
}

.title {
    text-align: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding-bottom: 20px;
}

#movie-wrap {
    font-family: arial, sans-serif;
    display: grid;
    grid-template-columns: 80% 20%;
    margin: 0 auto;
    max-width: 4000px;
}

input.movie,
button.movie {
    font-weight: bold;
    font-size: 1em;
    padding: 10px;
    border: none;
    color: rgb(58, 56, 158);
    background: #929cf5;
    cursor: pointer;
}

.name {
    text-align: center;
}


/* (B) names LIST */

#movie-names {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 30px;
    padding: 10px;
}

.p-item {
    padding: 10px;
    border: 1px solid #aaa;
    text-align: center;
}

.p-name {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.1em;
}

.p-img {
    max-width: 180px;
}

.p-desc {
    color: #777;
    font-size: 0.9em;
    line-height: 1.5em;
}

input.p-add {
    width: 80%;
}


/* (D) CURRENT SHOPPING movie */

#movie-items {
    padding: 10px;
    background: #d8cbcb;
    margin: 10px;
}

.c-item {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.c-name {
    width: 80%;
    font-size: 1.3em;
    line-height: 1.5em;
}

.c-del {
    width: 20%;
}

input.c-empty {
    width: 100%;
    margin-top: 10px;
}


/* (E) RESPONSIVE */

@media (max-width: 768px) {
    #movie-wrap {
        grid-template-columns: 60% 40%;
    }
    #movie-names {
        grid-template-columns: auto;
    }
}

<!DOCTYPE html>
<html>

<head>
    <title>MOVIE LISTING WEBSITE</title>

    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>
    <h1 class="title">Movie Listing App</h1>
    <div id="movie-wrap">
        <div class="name">
            <h2>Movie Names</h2>
            <div id="movie-names">

            </div>
        </div>
        <div class="name">
            <h2>Favorites</h2>
            <div id="movie-items">
            </div>
        </div>

    </div>
</body>

</html>