Movie App Using HTML CSS and JavaScript

By
Asif Ali
-
0

Hey, guys hope you are all fine, today we are going to learn how to make a movie app using html css and javascript step by step from scratch. It’s a great and helpful project for getting data from APIs and displaying the data on your website or application.

First of All, you need to design the movie site or application using HTML and CSS. Once you designed that, then you can use JS to get the data from API and display it on your website.

Movie App Using HTML CSS and JavaScript

Creating a movie app from scratch using HTML, CSS, and JavaScript is a fun and educational project. In this tutorial, we’ll guide you through the process step by step without providing any actual code. However, we will explain the concepts and logic behind each step so you can create your movie app.

Movie App Using HTML CSS and JavaScript

If you face any problem creating a movie app using HTML CSS and JavaScript, don’t worry I’m going to share the complete video tutorial that will help you to understand each thing step by step practically. Basically, I’ve designed that for anyone who is facing problem to creating projects using API with the help of HTML, CSS & JS

I hope you’ve watched the complete video and hope you’ve learned something new from this tutorial. Let’s look at the source code of the movie website source code HTML and CSS on below.

Create the HTML Structure

  1. Open your code editor and create a new HTML file (e.g., index.html).
  2. Start by setting up the basic structure of your HTML file, including the <html>, <head>, and <body> tags.
  3. Create sections for the header, movie list, movie details, and search bar.
    <header>
      <div class="slider-container">
        <div
          class="slide active"
          style="background-image: url('./img/img1.jpg')"
        >
          <div class="slider-content active">
            <h2 class="movie-title">Extraction II</h2>
            <p class="movies_short_details">
              After barely surviving his grievous wounds from his mission in
              Dhaka, Bangladesh, Tyler Rake is back, and his team is ready to
              take on their next mission.
            </p>
            <div class="m_details">
              <p class="category">Action</p>
              <p class="category">Thiller</p>
              <p class="year">2023</p>
            </div>
            <button type="button">
              <i class="fas fa-circle-play"></i> Watch Now
            </button>
          </div>
        </div>

        <div class="slide" style="background-image: url('./img/img2.jpg')">
          <div class="slider-content">
            <h2 class="movie-title">John Wick: Chapter 4</h2>
            <p class="movies_short_details">
              John Wick uncovers a path to defeating The High Table. But before
              he can earn his freedom, Wick must face off against a new enemy
              with powerful alliances across the globe and forces that turn old
              friends into foes.
            </p>
            <div class="m_details">
              <p class="category">Action</p>
              <p class="category">Crime</p>
              <p class="category">Thiller</p>
              <p class="year">2023</p>
            </div>
            <button type="button">
              <i class="fas fa-circle-play"></i> Watch Now
            </button>
          </div>
        </div>

        <div class="slide" style="background-image: url('./img/img3.jpg')">
          <div class="slider-content">
            <h2 class="movie-title">Fast X</h2>
            <p class="movies_short_details">
              Dom Toretto and his family are targeted by the vengeful son of
              drug kingpin Hernan Reyes.
            </p>
            <div class="m_details">
              <p class="category">Action</p>
              <p class="category">Adventure</p>
              <p class="category">Crime</p>
              <p class="year">2023</p>
            </div>
            <button type="button">
              <i class="fas fa-circle-play"></i> Watch Now
            </button>
          </div>
        </div>

        <div class="slide" style="background-image: url('./img/img4.jpg')">
          <div class="slider-content">
            <h2 class="movie-title">Interstellar</h2>
            <p class="movies_short_details">
              When Earth becomes uninhabitable in the future, a farmer and
              ex-NASA pilot, Joseph Cooper, is tasked to pilot a spacecraft,
              along with a team of researchers, to find a new planet for humans.
            </p>
            <div class="m_details">
              <p class="category">Adventure</p>
              <p class="category">Drama</p>
              <p class="category">Sci-fi</p>
              <p class="year">2014</p>
            </div>
            <button type="button">
              <i class="fas fa-circle-play"></i> Watch Now
            </button>
          </div>
        </div>

        <!-- arrow -->
        <button class="arrow left-arrow" id="left">
          <i class="fas fa-arrow-left"></i>
        </button>

        <button class="arrow right-arrow" id="right">
          <i class="fas fa-arrow-right"></i>
        </button>
      </div>
    </header>

It’s a slider HTML structure, you need to use CSS to design it, So, Let’s look at the CSS of the section.

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Ruda:wght@400;600;700&display=swap");

:root {
  --primary-color: #17202a;
  --secondary-color: #273746;
  --light-gray-color: #ddd;
  --white-color: #fff;
  --green-color: #28b463;
}

html {
  scroll-behavior: smooth;
}

/* utality classes */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 2rem;
}

.label {
  background-color: var(--secondary-color);
  color: var(--light-gray-color);
  padding: 0.5rem;
  border-left: 7px #b1060f solid;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* utality classes */

header {
  height: 100vh;
  width: 100%;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-in-out;
}

body {
  font-family: "Poppins";
  height: 100vh;
  background: var(--primary-color);
}

header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
}

.slider-container {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  height: 70vh;
  width: 70vw;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}

.slide {
  opacity: 0;
  transform: translateX(-25%);
  height: 100vh;
  width: 100vw;
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: -15vh;
  left: -15vw;
  z-index: 1;
  transition: all 1s ease-in;
}

.slide.active {
  opacity: 1;
  transform: translateX(0%);
}

.arrow {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  color: var(--white-color);
  padding: 15px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
}

.arrow i {
  font-size: 1.5rem;
}

.arrow.focus {
  outline: none;
}

.left-arrow {
  left: -0px;
}

.right-arrow {
  right: -0px;
}

button {
  outline: none;
  border: none;
}

.slider-content {
  opacity: 0;
  position: relative;
  top: 67%;
  left: 65%;
  transform: translate(-0%, -50%);
  z-index: 2;
  padding: 4rem;
  transition: all 0.7s ease-in;
  background: rgba(0, 0, 0, 0.23);
}

.slider-content.active {
  transform: translate(-50%, -50%);
  opacity: 1;
}

.slider-content h2 {
  color: #fff;
  font-size: 6rem;
}

.slider-content .movies_short_details {
  color: var(--white-color);
  padding: 1rem;
  width: 50%;
}

.m_details {
  display: flex;
  justify-content: space-between;
  width: 20%;
  margin-left: 1rem;
}

.m_details .category {
  color: #fff;
  background: #eb984e;
  padding: 0.5rem;
  border-radius: 20px;
}

.m_details .year {
  color: #fff;
  background: var(--green-color);
  padding: 0.5rem;
  border-radius: 20px;
}

.slider-content > button {
  padding: 0.7rem 2rem;
  outline: none;
  border: none;
  margin: 2rem 1rem;
  background: #b1060f;
  color: #ffff;
  font-family: inherit;
  font-size: 1rem;
  display: flex;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
}

.slider-content button i {
  margin-right: 1rem;
  font-size: 2rem;
}

Once you have done that, your slider is ready to display the image content, etc. on your website. Let’s look at the menu’s HTML and CSS codes that are used to display the menus on top of the slider.

    <!-- menus -->
    <div class="menus">
      <div class="container">
        <nav>
          <a href="index.html">
            <div class="logo">
              <img src="./img/logo.png" alt="" />
              <h2>eNo</h2>
            </div>
          </a>
          <form id="form">
            <input type="text" placeholder="Search Movies" id="search" />
          </form>
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="#movies">Movies</a></li>
            <li><a href="tv_show.html">Tv Shows</a></li>
          </ul>
        </nav>
      </div>
    </div>

You can use the above HTML codes to display the menus on the slider, but you need to use CSS as well to manage it.

/* ==========================Menus Start====================== */
.menus {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
  transition: all 0.3s ease-in;
  padding: 1rem 0;
}
.menus.sticky {
  background-color: rgba(0, 0, 0, 0.7);
  transition: all 0.3s ease-in-out;
}

nav {
  display: flex;
  list-style-type: none;
  justify-content: space-between;
  align-items: center;
  /* padding: 1rem 0; */
}

.logo {
  display: flex;
  align-items: center;
}

.logo h2 {
  margin-left: 0.3rem;
  font-size: 3rem;
  color: var(--white-color);
}

.logo img {
  width: 50px;
}

nav ul {
  display: flex;
  align-items: center;
  list-style-type: none;
}

nav ul li {
  margin: 0 0.4rem;
}

nav ul li a {
  padding: 0.4rem 1rem;
  text-decoration: none;
  border-radius: 2px;
  color: var(--light-gray-color);
  font-size: 1.1rem;
}

#form input {
  width: 650px;
  outline: none;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 20px;
  font-family: inherit;
  background: var(--light-gray-color);
}

/* ==========================Menus Close====================== */

Then you need to the content section to display the movie posters, title, etc, here are HTML codes

<!-- movies list -->
    <div class="movies-content" id="movies">
      <div class="container">
        <h2 class="label">What's Popular</h2>
        <div class="movies-details">
          <!-- <div class="movies">
            <img src="./img/img-1.jpg" alt="" />
            <div class="des">
              <p class="movie-title">The Transporter</p>
              <div class="short-des">
                <p class="year">2019</p>
                <p class="rating">0.9</p>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>

second last thing is you need to CSS to design the movies posters, title content etc.

/* movies section */
.label {
  margin: 2rem 0;
}

.movies-details,
.Tv-details {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  row-gap: 2rem;
}

.movies,
.tvShows {
  width: 325px;
  height: 500px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transition: all 0.4s ease-in;
  background: var(--secondary-color);
  position: relative;
  overflow: hidden;
}

.movies,
.tvShows img {
  display: block;
  width: 325px;
  height: 400px;
}

.des .movie-title {
  font-size: 1.2rem;
  font-family: inherit;
  margin: 1rem 1rem;
  color: #fff;
}

.short-des {
  display: flex;
  justify-content: space-between;
  /* background-color: var(--green-color); */
  background-color: #b1060f;
  color: var(--white-color);
  margin-top: 1rem;
  font-weight: 600;
  position: absolute;
  bottom: 0;
  width: 100%;
  transform: translateY(80%);
}

.short-des p {
  padding: 0.5rem 0.5rem;
}

.movies:hover .short-des,
.tvShows:hover .short-des {
  transition: all 0.5s ease-in;
  transform: translateY(0%);
}

Finally, you need to HTML structure to design the pagination, let’s look at the the HTML codes.

  <div class="container">
      <div class="paginations">
        <ul>
          <li>Previous</li>
          <li class="active">1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>Next</li>
        </ul>
      </div>
    </div>

Here is the Code that is used to design the pagination. 


/* pagination */
.paginations {
  padding: 4rem 0;
}
.paginations ul {
  list-style: none;
  display: flex;
}

.paginations ul li {
  margin: 0 0.7rem;
  box-shadow: 0px 0px 10px var(--secondary-color);
  color: #fff;
  padding: 0.7rem 1.5rem;
  cursor: pointer;
  outline: none;
  border-radius: 5px;
  font-size: 1rem;
  transition: all 0.3s ease-in;
  color: var(--green-color);
}

.paginations ul li:nth-child(1) {
  margin-left: 0;
}

.paginations ul li:active {
  transform: scale(1.5);
}

a {
  color: #b1060f;
  padding-top: 1rem;
  display: inline-block;
}

Add Interactivity with JavaScript

  1. Create a new JavaScript file (e.g., script.js) and link it to your HTML document using the <script> tag at the end of the <body>.
  2. Use JavaScript to add interactivity to your app. Here are some key functionalities to implement:
  • Populate the movie list with data (you can use sample data or fetch data from an API).
  • Create modal windows to display movie details when a user clicks on a movie.
  • Implement the search functionality to filter movies based on user input.
  • Handle user interactions like clicking on movie cards and closing modal windows.

You May Also Like:

Populate Your Movie Data

  1. If you’re using sample data, create an array of movie objects with properties like title, genre, description, and poster URL.
  2. If you want to fetch real movie data, consider using a movie database API like The Movie Database (TMDb) or OMDb.
"use strict";

const header = document.querySelector(".menus");
const SearchEl = document.getElementById("search");
const form = document.getElementById("form");
const moviesContainer = document.querySelector(".movies-details");
const TvdetailsContainer = document.querySelector(".Tv-details");
const paginationsEl = document.querySelectorAll(".paginations ul li");

// scroll event
window.addEventListener("scroll", () => {
  if (document.documentElement.scrollTop > 20) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
});

// movies
const API_URL =
  "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=YOUR_API_KEY&page=";
const IMG_PATH = "https://image.tmdb.org/t/p/w1280";
const SearchUrl =
  'https://api.themoviedb.org/3/search/movie?api_key=YOUR_API_KEY&query="';

// tv shows API
const API_URL_TV =
  "https://api.themoviedb.org/3/discover/tv?sort_by=popularity.desc&api_key=YOUR_API_KEY&page=";

const SearchTVUrl =
  'https://api.themoviedb.org/3/search/tv?api_key=YOUR_API_KEY&query="';

// get movies
getMovies(API_URL);
async function getMovies(url) {
  try {
    const result = await fetch(url);
    const data = await result.json();
    console.log(data.results);
    showMovies(data.results);
  } catch (error) {}
}

// search
form.addEventListener("submit", (e) => {
  e.preventDefault();

  const SearchTerm = SearchEl.value;

  if (SearchTerm && SearchTerm !== "") {
    getMovies(SearchUrl + SearchTerm);
    getTvShows(SearchTVUrl + SearchTerm);
    SearchEl.value = "";
  } else {
    window.location.reload();
  }
});

// display movies
function showMovies(movies) {
  moviesContainer.innerHTML = null;
  movies.forEach((movie) => {
    const { title, poster_path, vote_average, release_date } = movie;
    const movieDisplay = document.createElement("div");
    movieDisplay.classList.add("movies");
    movieDisplay.innerHTML = ` <img src="${IMG_PATH + poster_path}" alt="" />
    <div class="des">
      <p class="movie-title">${title}</p>
      <div class="short-des">
        <p class="year">Date: ${release_date}</p>
        <p class="rating">Rating: ${vote_average}</p>
      </div>
    </div>`;
    moviesContainer.appendChild(movieDisplay);
  });
}

//tv shows
getTvShows(API_URL_TV);
async function getTvShows(url) {
  try {
    const result = await fetch(url);
    const data = await result.json();
    console.log(data.results);
    DisplayTvShows(data.results);
  } catch (error) {}
}

function DisplayTvShows(tvShows) {
  TvdetailsContainer.innerHTML = "";
  tvShows.forEach((TvShows) => {
    const { name, poster_path, vote_average, first_air_date } = TvShows;
    const TvShowsDisplay = document.createElement("div");
    TvShowsDisplay.classList.add("tvShows");
    TvShowsDisplay.innerHTML = ` <img src="${IMG_PATH + poster_path}" alt="" />
    <div class="des">
      <p class="movie-title">${name}</p>
      <div class="short-des">
        <p class="year">Date: ${first_air_date}</p>
        <p class="rating">Rating: ${vote_average}</p>
      </div>
    </div>`;
    TvdetailsContainer.appendChild(TvShowsDisplay);
  });
}

// pagination
paginationsEl.forEach((pages, index) => {
  pages.addEventListener("click", () => {
    if (getMovies) {
      getMovies(API_URL + index);
    }
    getTvShows(API_URL_TV + index);
  });
});

Test Your Movie App

  1. Open your HTML file in a web browser to test your app’s functionality and appearance.
  2. Thoroughly test your app on different devices and browsers to ensure compatibility.

Refine and Expand

  1. Refine your app’s design and functionality based on user feedback and your own testing.
  2. Consider adding advanced features like user authentication, movie ratings, and reviews for a more complete movie app experience.

Conclusion

By following this tutorial, you’ve learned the basic steps to create a movie app using HTML CSS and JavaScript. While we didn’t provide actual code, you now have a clear understanding of the process and concepts involved. Feel free to explore and experiment further to customize and enhance your movie app to your liking. Building your own movie app is a fantastic way to practice your web development skills and create something enjoyable and useful.

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.