Movie App using HTML, CSS, and Javascript

Movie Website using HTML, CSS, and JavaScript

Movie Website using HTML, CSS, and JavaScript

Html Code For Movie Website

Hello Codere, Welcome to the Codewithrandom blog. In this article, we create a Movie Website using HTML, CSS, and JavaScript Code. On this movie website, you see some movie list on the main page and there’s a search bar in the header so you can search for and movie and you get its Poster image, movie title, movie overview, and movie ratings.

50+ HTML, CSS & JavaScript Projects With Source Code

Code byN/A
Project DownloadLink Available Below
Language usedHTML, CSS, and JavaScript
External link / DependenciesNo
Movie App Table

So let’s start with HTML Code for a movie website.

Html Code For Movie Website:-

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Movie Search</title>
    <link rel="stylesheet" href="style.css">
        <form id="form">

            <input type="text" autocomplete="off" id="search" placeholder="Search" class="search">
    <main id="main">

<!-- js here -->
    <script src="app.js"></script>

In this Html Code we create a Header with form tag. In form tag we create a input type text its mean we create search bar for our movie website. then we create main tag so when all movie load by api we show all content in main tag and end of the code we link JavaScript file.

There is all the HTML Code for the Movie App. Now, you can see output without Css and JavaScript Code, then we write Css & JavaScript for the Movie App.

Create Portfolio Website Using HTML and CSS (Source Code)

Html Code For Movie Website
Html Code For Movie Website

CSS Code For Movie Website:-

@import url(';400;600&display=swap');

    box-sizing: border-box;

    margin: 0;
    background-color: #cd094e;
     font-family: "Poppins", sans-serif;

    background-color: #0615de;
    padding: 1rem;
    display: flex;
    justify-content: flex-end;

.search {
padding: 0.5rem 1rem;
border-radius: 50px;
border: 2px solid #22254b;
background-color: transparent;
font-family: inherit;
color: #eee;
font-size: 1rem;

    color: #afb2dc;

    outline: none;
    background-color: #05082c;

    display: flex;
    flex-wrap: wrap;

/* ye baad me dekhte hai */

    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
    border-radius: 3px;
    width: 300px;
    background-color: #0d1dd2;
    margin: 1rem;
    overflow: hidden;
    position: relative;


.movie img{
 width: 100%;

    display: flex;
    justify-content: space-between;
    padding: 0.5rem 1rem 1rem;
    color: #eee;
    letter-spacing: 0.5px;
    align-items: center;

.movie-info h3{
    margin: 0;

.movie-info span{
    background-color: #22254b;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-weight: bold;

    color: rgb(46, 194, 46);
 color: orange;
    color: red;


    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #fff;
    padding: 2rem;
    transform: translateY(100%);
    transition: transform 1s ease-in;
    max-width: 100%;
    overflow: auto;


.movie:hover .overview{
    transform: translateY(0);


.overview h4{
    margin-top: 0;

Here is our Css Code Done for the Movie app.

Html Code For Movie Website
Html Code For Movie Website

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

JavaScript Code For Movie Website:-

const APIURL = "";

const IMGPATH = "";

const SEARCHAPI = "";

const main = document.getElementById("main");
const form = document.getElementById("form");
const search = document.getElementById("search");

///initalyy get fav movies

async function getMovies(url) {
  const resp = await fetch(url);
  const respData = await resp.json();

  // movie aa gyi
  // yaha pe show karenge


function showMovies(movies) {
  //clear main
  main.innerHTML = "";
  movies.forEach((movie) => {
    const { poster_path, title, vote_average, overview } = movie;
    // raja
    const movieEl = document.createElement("div");

    movieEl.innerHTML = `
       <img src="${IMGPATH + poster_path}" alt="${title}"/>

     <div class="movie-info">
         <span class="${getClassByRate(vote_average)}">${vote_average}</span>

     <div class="overview">




function getClassByRate(vote) {
  if (vote >= 8) {
    return 'green';
  } else if (vote >= 5) {
    return 'orange'
  } else {
    return 'red';


form.addEventListener("submit", (e) => {

  const searchTerm = search.value;

  if (searchTerm) {

    getMovies(SEARCHAPI + searchTerm);

    search.value = "";

Final Output Of Movie App using HTML, CSS, and JavaScript:-

Html Code For Movie Website

Code Creditย 

This Is HTML, CSS, and JavaScript Code you can Use this code. Create 3 files and link them in HTML code. Below here you can see the output of our movies App.

Traversy Media Youtube – Click Here

@Traversy Media’s Udemy course – Click Here

Weather App Using Html,Css And Javascript (Source Code )

Hope you like Movie App in javascript, you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you

In this post, we learn how to create a Movie App using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

Which code editor do you use for this Movie App coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this is a responsive project

Do you use any external links to create this project?


Leave a Reply