Free movie review website html source code 2024-25

By /

Creating a movie review website is an excellent project for web development enthusiasts, offering a practical way to apply HTML, CSS, and JavaScript skills. Such a platform allows users to browse, search, and review movies, providing an engaging user experience. This article will guide you through building a free movie review website, complete with source code, and offer insights into best practices for development.

Movie review website

A movie review website serves as a platform where users can discover movies, read reviews, and share their opinions. Developing such a site involves creating a user-friendly interface, managing data efficiently, and ensuring seamless interactions. By utilizing HTML for structure, CSS for styling, and JavaScript for interactivity, you can build a dynamic and responsive website.

Project Overview

The movie review website will feature:

  • Home Page: Displays a list of movies with their posters, titles, and ratings.
  • Search Functionality: Allows users to search for movies by title.
  • Movie Details Page: Provides detailed information about a selected movie, including reviews.
  • Review Submission: Enables users to submit their reviews and ratings.

Setting Up the Development Environment

Before you begin, ensure you have the following tools installed:

Live Website

See the Pen Movie Reviews by Ajay Bagde (@Ajay-Bagde) on CodePen.

Building the Frontend

HTML Structure

Begin by creating the basic structure of your website using HTML. This includes setting up the navigation bar, search bar, movie listings, and placeholders for movie details and reviews.

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Movie Review Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <h1>Movie Reviews</h1>
            <input type="text" id="searchBar" placeholder="Search for movies...">
        </nav>
    </header>
    <main>
        <section id="movieList">
            <!-- Movie items will be dynamically inserted here -->
        </section>
        <section id="movieDetails" class="hidden">
            <!-- Movie details and reviews will be displayed here -->
        </section>
    </main>
    <script src="script.js"></script>
</body>
</html>

CSS Styling

Style your website to enhance its appearance and ensure a responsive design. Utilize CSS Grid or Flexbox for layout management and media queries for responsiveness.

cssCopy code/* styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    background-color: #333;
    color: #fff;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#searchBar {
    padding: 0.5rem;
    font-size: 1rem;
}

#movieList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.movieItem {
    background-color: #f4f4f4;
    padding: 1rem;
    border-radius: 5px;
    text-align: center;
}

.hidden {
    display: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    header {
        flex-direction: column;
    }

    #searchBar {
        margin-top: 1rem;
        width: 100%;
    }
}

JavaScript Functionality

Implement JavaScript to handle dynamic content, such as fetching movie data, displaying movie details, and managing user interactions.

javascriptCopy code// script.js
document.addEventListener('DOMContentLoaded', () => {
    const searchBar = document.getElementById('searchBar');
    const movieList = document.getElementById('movieList');
    const movieDetails = document.getElementById('movieDetails');

    searchBar.addEventListener('input', (e) => {
        const query = e.target.value.trim();
        if (query) {
            fetchMovies(query);
        } else {
            movieList.innerHTML = '';
        }
    });

    async function fetchMovies(query) {
        try {
            const response = await fetch(`https://www.omdbapi.com/?s=${query}&apikey=YOUR_API_KEY`);
            const data = await response.json();
            if (data.Response === 'True') {
                displayMovies(data.Search);
            } else {
                movieList.innerHTML = '<p>No movies found.</p>';
            }
        } catch (error) {
            console.error('Error fetching movies:', error);
        }
    }

    function displayMovies(movies) {
        movieList.innerHTML = movies.map(movie => `
            <div class="movieItem" data-id="${movie.imdbID}">
                <img src="${movie.Poster}" alt="${movie.Title}">
                <h3>${movie.Title}</h3>
                <p>${movie.Year}</p>
            </div>
        `).join('');
    }
});

Note: Replace YOUR_API_KEY with your actual API key from OMDb API.

Integrating Movie Data

To integrate movie data into your website, use the OMDb API to fetch information about movies. This includes movie titles, release years, posters, and more. The API is user-friendly and provides detailed data about movies and TV series.

Steps to Fetch and Display Movie Data

  1. Register for an API Key:
    Go to OMDb API and sign up for an API key.
  2. Fetch Data Using JavaScript:
    Use the fetch() function in JavaScript to retrieve movie data based on user input from the search bar.
  3. Display Movie List:
    Parse the fetched JSON data and dynamically display the list of movies on the webpage.

Here’s how the code fits into your existing JavaScript:

javascriptCopy codeasync function fetchMovies(query) {
    try {
        const response = await fetch(`https://www.omdbapi.com/?s=${query}&apikey=YOUR_API_KEY`);
        const data = await response.json();
        if (data.Response === 'True') {
            displayMovies(data.Search);
        } else {
            movieList.innerHTML = '<p>No movies found. Please try a different keyword.</p>';
        }
    } catch (error) {
        console.error('Error fetching movies:', error);
        movieList.innerHTML = '<p>Error fetching data. Please check your internet connection.</p>';
    }
}

function displayMovies(movies) {
    movieList.innerHTML = movies.map(movie => `
        <div class="movieItem" data-id="${movie.imdbID}">
            <img src="${movie.Poster !== "N/A" ? movie.Poster : 'placeholder.jpg'}" alt="${movie.Title}">
            <h3>${movie.Title}</h3>
            <p>${movie.Year}</p>
        </div>
    `).join('');
}

Movie Details on Click

To make the site more interactive, allow users to click on a movie to view more detailed information. Fetch data using the movie’s IMDb ID.

javascriptCopy codemovieList.addEventListener('click', async (e) => {
    const movieItem = e.target.closest('.movieItem');
    if (movieItem) {
        const movieId = movieItem.dataset.id;
        const response = await fetch(`https://www.omdbapi.com/?i=${movieId}&apikey=YOUR_API_KEY`);
        const movie = await response.json();
        displayMovieDetails(movie);
    }
});

function displayMovieDetails(movie) {
    movieDetails.innerHTML = `
        <h2>${movie.Title} (${movie.Year})</h2>
        <img src="${movie.Poster}" alt="${movie.Title}">
        <p><strong>Director:</strong> ${movie.Director}</p>
        <p><strong>Genre:</strong> ${movie.Genre}</p>
        <p><strong>Plot:</strong> ${movie.Plot}</p>
    `;
    movieDetails.classList.remove('hidden');
}

Implementing User Reviews

Allow users to add their own reviews for movies. Use JavaScript to create a form where users can submit reviews and ratings.

Review Submission Form

Add an HTML form for users to write their reviews:

htmlCopy code<section id="reviewSection">
    <h3>Submit Your Review</h3>
    <form id="reviewForm">
        <textarea id="reviewText" placeholder="Write your review here..." required></textarea>
        <input type="number" id="reviewRating" placeholder="Rating (1-5)" min="1" max="5" required>
        <button type="submit">Submit Review</button>
    </form>
    <div id="userReviews">
        <!-- User reviews will be displayed here -->
    </div>
</section>

Add JavaScript to handle form submission:

javascriptCopy codedocument.getElementById('reviewForm').addEventListener('submit', (e) => {
    e.preventDefault();
    const reviewText = document.getElementById('reviewText').value;
    const reviewRating = document.getElementById('reviewRating').value;
    addReview(reviewText, reviewRating);
    document.getElementById('reviewForm').reset();
});

function addReview(text, rating) {
    const userReviews = document.getElementById('userReviews');
    const review = document.createElement('div');
    review.classList.add('userReview');
    review.innerHTML = `
        <p>${text}</p>
        <p><strong>Rating:</strong> ${rating}/5</p>
    `;
    userReviews.appendChild(review);
}

Enhancing User Experience

Responsive Design

Ensure your website looks great on all devices using media queries:

cssCopy code@media (max-width: 768px) {
    #movieList {
        grid-template-columns: 1fr;
    }
}

Accessibility

Enhance accessibility by adding alt attributes for images and ensuring keyboard navigation is supported.

Testing and Deployment

Test your website thoroughly on different devices and browsers. Once satisfied, deploy it using services like GitHub Pages or Netlify.

Conclusion

Building a movie review website using HTML, CSS, and JavaScript is an excellent way to learn web development. This project provides hands-on experience in integrating APIs, managing user interactions, and enhancing user experience.

FAQs

Q1: Can I use this project for commercial purposes?

A1: Yes, but ensure you comply with the terms of the API and other third-party resources.

Q2: How can I make my website more interactive?

A2: You can add features like a login system, user profiles, or a “favorites” section.

Q3: Is this website secure for deployment?

A3: For basic projects, it’s fine. For commercial projects, consider implementing backend security measures.

Q4: Can I use a different API for fetching movie data?

A4: Yes, you can use other APIs like TMDb (The Movie Database) or custom datasets, but check their usage policies.

Q5: How do I make the site SEO-friendly?

A5: Use descriptive meta tags, optimize images, and create a sitemap. Incorporate schema.org markup for better indexing.

Also Read

How to make a chatting website in php code

html web page examples with source code free download

Data analytics business website backend development python code example

How to give space between two div in html 2024-25

What makes key-value nosql databases powerful for basic operations?

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top