Movie Website using HTML, CSS, and JavaScript
Hello Coder, 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.
A movie webpage is a special type of page that contains only different types of movies all in one place. This type of website allows users to watch different kinds of movies on one platform and can also search for their desired movies using a search bar.
Working on this type of project helps developers collect huge amounts of user data, such as their interests and what kind of movies they love to watch. Also, creating these types of websites that provide different movies all in one place helps users build great web applications that attract huge users.
50+ HTML, CSS & JavaScript Projects With Source Code
| Code by | N/A |
| Project Download | Link Available Below |
| Language used | HTML, CSS, and JavaScript |
| External link / Dependencies | No |
| Responsive | Yes |
So let’s start with HTML Code for a movie website.
Html Code For Movie Website:-
<!DOCTYPE html>
<html lang="en">
<head>
<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">
</head>
<body>
<header>
<form id="form">
<input type="text" autocomplete="off" id="search" placeholder="Search" class="search">
</form>
</header>
<main id="main">
</main>
<!-- js here -->
<script src="app.js"></script>
</body>
</html>In this HTML code, we create a header with a form tag. In the form tag, we create an input type of text, which means we create a search bar for our movie website. then we create a main tag, so when all movies load by API, we show all content in the main tag, and at the end of the code, we link a JavaScript file.
There is all the HTML code for the movie app. Now, you can see output without CSS and JavaScript code, and then we write CSS and JavaScript for the movie app.
Create Portfolio Website Using HTML and CSS (Source Code)
CSS Code For Movie Website:-
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
*{
box-sizing: border-box;
}
body{
margin: 0;
background-color: #cd094e;
font-family: "Poppins", sans-serif;
}
header{
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;
}
.search::placeholder{
color: #afb2dc;
}
.search:focus{
outline: none;
background-color: #05082c;
}
main{
display: flex;
flex-wrap: wrap;
}
/* ye baad me dekhte hai */
.movie{
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%;
}
.movie-info{
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;
}
.movie-info span.green{
color: rgb(46, 194, 46);
}
.movie-info span.orange{
color: orange;
}
.movie-info span.red{
color: red;
}
.overview{
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;
}Step1:First of all, we will import some of the font families using the Google Font URL, and then, using the body tag selector, we will set the margin to “zero.” Also, using the background-color property, we will set the background color to “dark pink,” and the font styling used on our website is poppins.
Now we will add the styling to our header of the website. Using the header tag selector, we will set the background of the header to “blue,” and using the padding property, we will set the padding to 1rem, and the display type is set to “flex.”.
ADVERTISEMENT
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
*{
box-sizing: border-box;
}
body{
margin: 0;
background-color: #cd094e;
font-family: "Poppins", sans-serif;
}
header{
background-color: #0615de;
padding: 1rem;
display: flex;
justify-content: flex-end;
}
ADVERTISEMENT
Step 2: Now we will add the styling to the search bar of our movie website using the class selector (.search). We will set the padding to 0.5 rem, and using the border-radius property, we will add a few curve edges.
ADVERTISEMENT
Netflix Clone Using HTML,CSS and JavaScritp (Source Code)
ADVERTISEMENT
We will also add some unique styling to the elements of our movie website. We will use the hover property to set a border radius of 3 pixels and transform to change the appearance of the website elements.
ADVERTISEMENT
.search {
padding: 0.5rem 1rem;
border-radius: 50px;
border: 2px solid #22254b;
background-color: transparent;
font-family: inherit;
color: #eee;
font-size: 1rem;
}
.search::placeholder{
color: #afb2dc;
}
.search:focus{
outline: none;
background-color: #05082c;
}
main{
display: flex;
flex-wrap: wrap;
}
/* ye baad me dekhte hai */
.movie{
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%;
}
.movie-info{
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;
}
.movie-info span.green{
color: rgb(46, 194, 46);
}
.movie-info span.orange{
color: orange;
}
.movie-info span.red{
color: red;
}
.overview{
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.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
JavaScript Code For Movie Website:-
const APIURL = "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1";
const IMGPATH = "https://image.tmdb.org/t/p/w1280";
const SEARCHAPI = "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=";
// ye HTML WALE TAG
const main = document.getElementById("main");
const form = document.getElementById("form");
const search = document.getElementById("search");
///initalyy get fav movies
getMovies(APIURL);
async function getMovies(url) {
const resp = await fetch(url);
const respData = await resp.json();
// movie aa gyi
console.log(respData);
// yaha pe show karenge
showMovies(respData.results);
}
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.classList.add("movie");
movieEl.innerHTML = `
<img src="${IMGPATH + poster_path}" alt="${title}"/>
<div class="movie-info">
<h3>${title}</h3>
<span class="${getClassByRate(vote_average)}">${vote_average}</span>
</div>
<div class="overview">
<h2>Overview:</h2>
${overview}
</div>
`;
main.appendChild(movieEl)
});
}
function getClassByRate(vote) {
if (vote >= 8) {
return 'green';
} else if (vote >= 5) {
return 'orange'
} else {
return 'red';
}
}
form.addEventListener("submit", (e) => {
e.preventDefault();
const searchTerm = search.value;
if (searchTerm) {
getMovies(SEARCHAPI + searchTerm);
search.value = "";
}
});
Now we will be using the movie API to fetch a list of different movies along with the title and poster of the movie. Using the constant variable, we will create some of the variables to add the key of our API and the using the document.getelement with id, we will select our HTML elements.
Then we will create a function to show movies, which will show us a list of movies along with the title and poster of the movie. We will use the search button with an API to fetch the particular movie names.
Final Output Of Movie App using HTML, CSS, and JavaScript:-
Code Credit
This Is HTML, CSS, and JavaScript Code can Use this code. Create 3 files and link them in HTML code. Below 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 )
Conclusion
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.
What are API’s?
API stands for Application Programming Interface. It is a technology that acts as an intermediary between the client and the server. APIs use a set of protocols through which users request data from the server through APIs, and the server redirects all the interrelational data to the user.
APIs are mostly widely used tools that are being used in every field, like banking, weather, and real-time stock market analysis. We use APIs in almost all the web technologies for easy and fast fetching of the data. If you want to know more about API’s, then you can check out the below link, which will guide you all about API’s.
What is a movie webpage?
A movie webpage is a special type of page that contains only different types of movies all in one place. This type of website allows users to watch different kinds of movies on one platform and can also search for their desired movies using a search bar.
