I am tasked with creating a simple Movie listing website where users can add or remove movies from their favorites list. Instead of a standard add to favorites button, I would like to use the heart icon from Bootstrap. Additionally, I want to display the rating of each film using star icons next to the film names.
// DUMMY names
var names = {
1: {
name: "Red Notice",
desc: "An Interpol agent tracks the world's most wanted art thief.",
img: "rn.jpg",
},
// Add more movie objects here
};
// JavaScript object to handle movie operations
var movie = {
// Code for saving, loading, and managing favorite movies
// Initialization function
init: function() {
// Code to initialize the movie website
},
// Function to add a movie to favorites
add: function() {
// Code to add a movie to favorites
},
// Function to remove a movie from favorites
remove: function() {
// Code to remove a movie from favorites
},
// Add more functions as needed
};
// Call the init function when the page loads
window.addEventListener("DOMContentLoaded", movie.init);/* CSS code for styling the movie listing website */<!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>If there are any simpler methods to achieve the same functionality for this website, I would appreciate any guidance or suggestions. Thank you!