Telegram Group Join Now
Movie App using HTML, CSS, and Javascript
In this article, we create a movie website using HTML, CSS, and JavaScript Code. In this movie app, 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.
| 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 app.
50+ HTML, CSS & JavaScript Projects With Source Code
HTML Code
<!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>
ADVERTISEMENT
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.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
CSS Code
@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;
}
Here is our Css Code Done.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
JavaScript Code
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 = "";
}
});
JavaScript Code Done.
Code Credit
Traversy Media Youtube – Click Here
@Traversy Media’s Udemy course – Click Here
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.
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.
is this project responsive or not?
Yes! this is a responsive project
Do you use any external links to create this project?
No!
